Jun 11, 2015

ব্লগ পোষ্টের নিচে যুক্ত করুন আকর্ষণীয় Related Posts Widget

প্রায় সব ধরনের ব্লগ/ওয়েবসাইটে আপনি হয়তো দেখে থাকেন যে, পোষ্টের নিচে কিছু Related Posts শো করে। বাংলা ব্লগে এটিকে লেখা হয় “এ সম্পর্কিত পোষ্ট”। এর ফলে আপনার ব্লগের ভিজিটররা পোষ্টের এ সম্পর্কিত পোষ্টগুলি সম্পর্কে ধারনা নিতে পারে বা পড়তে পারে। যার ফ্রলশ্রুতিতে দেখা যায় আপনার ব্লগের পেজ ভিউ অনেকগুনে বেড়ে যায়।
Blogger 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 == &quot;item&quot;'>
<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 == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=10&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<!-- Related Posts Code End-->
  • এরপর Save Template এ ক্লিক করলেই কাজ OK.

কাষ্টমাইজেশনঃ

  • উপরের লাল অংশ width:100pxheight:100px থেকে ইমেজ Thumbnail সাইজ পরিবর্তন করতে পারবেন।
  • হালকা নীল কালার অংশ color:#666 থেকে পোষ্টের টাইটেল কালার পরিবর্তন করতে পারবেন।
  • নিচের বক্সের পিংক কালারের var maxresults=5 এ আপনি যে কয়টি পোষ্ট দেখাতে চান, তা সিলেক্ট করে দিতে পারেন।
Subcribe to our all updates

and Share on
পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট

0 টি মন্তব্য: Post Yours! Read Comment Policy ▼
লক্ষ্য করুনঃ
পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

Post a Comment

 
Subscribe for all Updates

Subscribe Now

কপিরাইট © 2015- প্রযুক্তি ডট কম ™, সর্বস্বত্ব সংরক্ষিত

Powered by: