IT জ্ঞান আহরণের জন্য আপনি নিয়মিত Visit করুন http://www.itknowledgeschool.blogspot.com
প্রায় সব ধরনের ব্লগ/ওয়েবসাইটে আপনি হয়তো দেখে থাকেন যে, পোষ্টের নিচে কিছু Related Posts শো করে। বাংলা ব্লগে এটিকে লেখা হয় “এ সম্পর্কিত পোষ্ট”। এর ফলে আপনার ব্লগের ভিজিটররা পোষ্টের এ সম্পর্কিত পোষ্টগুলি সম্পর্কে ধারনা নিতে পারে বা পড়তে পারে। যার ফ্রলশ্রুতিতে দেখা যায় আপনার ব্লগের পেজ ভিউ অনেকগুনে বেড়ে যায়।
আমরা আজকে যে, Related Posts Widget টি শেয়ার করবো এটিতে একসাথে পোষ্টের হেডিং দেখানোর সাথে সাথে একটি ছবিও Thumbnail আকারে শো করবে। যার ফলে এটি আপনার ব্লগের সুন্দর্য আরও বৃদ্ধি করে তুলবে। এটি আপনার পোষ্টের Label অনুসারে পোষ্টগুলি শো করবে। যেমন ধরুন- যখন কোন ভিজিটর আপনার ব্লগের Movie লেভেলের কোন পোষ্ট ভিজিট করবে তখন এটি আপনার ব্লগের Movie সংক্রান্ত পোষ্টগুলি শো করবে। আবার যখন অন্য কোন লেভেলের পোষ্ট ভিজিট করবে তখন ঐ লেভেলের পোষ্টগুলি দেখাবে। এতে করে সহজে ভিজিটররা আপনার ব্লগের বিভিন্ন পোষ্ট সম্পর্কে ধারনা নিতে পারবে।
কিভাবে ব্লগে যুক্ত করবেনঃ
- প্রথমে আপনার ব্লগে লগইন করুন।
- এরপর Template > Edit Html এ ক্লিক করুন।
- তারপর কিবোর্ড হতে Ctrl+F চেপে </head> অংশটি সার্চ করুন।
- এখন নিচের কোডগুলি কপি করে </head> অংশটির উপরে পেষ্ট করুন।
<!--Related Posts Scripts and Styles Start-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2; width:100px; height:100px; transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}
</style>
<script type='text/javascript' src='https://harunzoki.googlecode.com/svn/trunk/Related-Posts.js' />
</b:if>
<!--Related Posts Scripts and Styles End-->
- এখন আবার কিবোর্ড হতে Ctrl+F চেপে <div class='post-footer'> অংশটি সার্চ করুন।
- তারপর এই <div class='post-footer'> অংশটির উপরে নিচের নিচের কোডগুলি কপি করে পেষ্ট করুন।
<!-- Related Posts Code Start-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=10"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="<b>Related Posts:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<!-- Related Posts Code End-->
- এরপর Save Template এ ক্লিক করলেই কাজ OK.
কাষ্টমাইজেশনঃ
- উপরের লাল অংশ width:100px ও height:100px থেকে ইমেজ Thumbnail সাইজ পরিবর্তন করতে পারবেন।
- হালকা নীল কালার অংশ color:#666 থেকে পোষ্টের টাইটেল কালার পরিবর্তন করতে পারবেন।
- নিচের বক্সের পিংক কালারের var maxresults=5 এ আপনি যে কয়টি পোষ্ট দেখাতে চান, তা সিলেক্ট করে দিতে পারেন।
