Join Our Telegram Group to connect with bigger community. Join Now!

Table of Content

ব্লগারে রিলেটেড পোস্ট শো করব কিভাবে? Related posts with thumbnails in blogger

ব্লগারের আরো একটি পোস্টে আপনাদের সবাইকে স্বাগতম। আজকের এই পোস্ট আমরা কিভাবে আপনারা আপনার ব্লগার ওয়েবসাইট এর মধ্যে রিলেটেড পোস্ট শো করাতে পারবেন তা দেখাব। অনেক ব্লগার থিম এর মধ্যে এই অপশন টি না থাকার কারণে আপনার ওয়েবসাইট এর ভিজিটর এর সংখ্যা কমে যেতে পারে। কারণ যখন কেও আপনার ওয়েবসাইট এর কোনো পোস্ট পড়বে তখন যদি তার এরকম আরো কোনো পোস্ট ভালো লাগে তাহলে সে সেই পোস্টটি ও পড়তে চাইবে। কিন্তু যদি আপনার ব্লগার থিম এর মধ্যে এই রিলেটেড পোস্ট শো অপশন না থাকে তাহলে আপনার অন্যান্য পোষ্টের মধ্যে ভিজিটর সংখ্যা কমে যাবে।
ব্লগারে রিলেটেড পোস্ট শো করব কিভাবে? Related posts with thumbnails in blogger


ওয়েবসাইটে রিলেটেড পোস্ট থাকার সুবিধা:

ব্লগার ওয়েবসাইটে রিলেটেড পোস্ট দেখানোর বেশ কয়েকটি সুবিধা রয়েছে। এর মধ্যে রয়েছে:
  • ব্যবহারকারীদের জন্য তথ্য প্রদান:
রিলেটেড পোস্টগুলি ব্যবহারকারীদের আপনার ব্লগে আরও তথ্য খুঁজে পেতে সাহায্য করতে পারে। উদাহরণস্বরূপ, যদি কেউ আপনার ব্লগে একটি পোস্ট পড়ে যা একটি নির্দিষ্ট বিষয় সম্পর্কে, তাহলে রিলেটেড পোস্টগুলি তাদের সেই বিষয় সম্পর্কে আরও জানতে সাহায্য করতে পারে।
  • ব্লগ ট্রাফিক বৃদ্ধি:
রিলেটেড পোস্টগুলি ব্যবহারকারীদের আপনার ব্লগের অন্যান্য পোস্টগুলিতে ক্লিক করতে উৎসাহিত করতে পারে। এর ফলে আপনার ব্লগ ট্রাফিক বৃদ্ধি পেতে পারে।
  • SEO উন্নত করা:
রিলেটেড পোস্টগুলি আপনার ব্লগের সামগ্রিক SEO উন্নত করতে পারে। এর কারণ হল রিলেটেড পোস্টগুলি আপনার ব্লগের বিভিন্ন পোস্টগুলির মধ্যে লিঙ্কগুলি তৈরি করে। এই লিঙ্কগুলি Google এবং অন্যান্য সার্চ ইঞ্জিনের জন্য আপনার ব্লগের গুরুত্ব প্রদর্শন করে।

Releted posts for blogger with thumbnails:

চলুন দেখে নিই কিভাবে আপনার ব্লগার ওয়েবসাইটে Releted posts শো করাবেন তাও থাম্বনেইল সহকারে। এর মাধ্যমে অটোমেটিক আপনার পোস্টের শেষে লেবেল অনুযায়ী পোস্ট শো করবে।
  • ব্লগার ড্যাশবোর্ড লগ ইন করুন।
  • থিম অপশন থেকে Edit Html এ যান।
  • ]]></b:skin> লিখে সার্চ করুন এবং নিচের দেওয়া কোডটি এর পরে পেস্ট করে দিন।
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.related-postspace{position:relative;margin:0;padding:20px 0}.related-postspace h4{margin:0 0 15px 0;font-weight:700;font-size:18px;padding:0 0 20px 0;border-bottom:1px solid rgba(0,0,0,0.05);text-align:center}.related-post-simple-2,.related-post-simple-2 li{list-style:none;margin:0;padding:5px}.related-post-simple-2 li{overflow:hidden;margin:0 auto 10px auto;transition:all .3s}.related-post-simple-2 li:hover .related-post-item-title{color:#e74c3c}.related-post-simple-2 .related-post-item-thumbnail{border-radius: 2px; width: 120px; height: 80px; max-width: none; max-height: none; background-color: transparent; object-fit: cover; border: none; float: left; margin: 2px 15px 0 0; padding: 0; transition: box-shadow 0.3s ease 0s; -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); }}.related-post-simple-2 .related-post-item-title{color:#222;font-size:16px;font-weight:700}.related-post-simple-2 .related-post-item-title:hover{color:#e74c3c}.related-post-simple-2 .related-post-item-summary{display:block;font-size:13px;margin:5px auto 0 auto;color:#999}.related-post-simple-2 .related-post-item-summary .related-post-item-more{display:none}
@media screen and (max-width:750px){
.related-post-simple-2 li{width:100%;float:none}
.related-post-simple-2,.related-post-simple-2 li{padding:5px 0}
.related-post-simple-2 .related-post-item-summary{display:none}}  
</style>  
</b:if>
  • <data:post.body/> লিখে সার্চ করুন এবং নিচের দেওয়া কোড গুলো এর পর পেস্ট করে দিন।
<div class='related-postspace' id='dtostrelated-post'/>

         <div class='clear'/>

            <script type='text/javascript'>

               var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>

                         &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

                     </b:loop></b:if>];

               var relatedPostConfig = {

                     homePage: &quot;<data:blog.homepageUrl/>&quot;,

                     widgetTitle: &quot;&lt;h4&gt;Related Posts&lt;/h4&gt;&quot;,

                     numPosts: 5,

                     summaryLength: 160,

                     titleLength: &quot;auto&quot;,

                     thumbnailSizew: 120,

                     thumbnailSizeh: 80,

                     noImage: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs0jw7ppayASrVWIaBtiKH6M8fT3HdUibtuV39ML6p12ZsQjA396ci7Vxb49tZz837qEQiC3ByE9cUOiLkWCu7lE5GCx7G-PJb4HCIk8J8Q7c-Us6pDv0iz_KLFpjOmXJ-lbIAw6pp2mA/s1600/noimage1.png&quot;,

                     containerId: &quot;dtostrelated-post&quot;,

                     newTabLink: false,

                     moreText: &quot;Read More&quot;,

                     widgetStyle: 2,

                     callBack: function() {}

               };

            </script>

            <script type='text/javascript'>

               //<![CDATA[

               /*! Related Post Widget */

               var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Recommended</h4>",widgetStyle:1,homePage:"https://blogger.com",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSizew:150,thumbnailSizeh:100,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-simple-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail" in x[q]&&d.thumbnailSizew!==false)?x[q].media$thumbnail.url.replace('s72', 's200'):d.noImage;u=("summary" in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSizew+'" height="'+d.thumbnailSizeh+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSizew+'" height="'+d.thumbnailSizeh+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSizew+'" height="'+d.thumbnailSizeh+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSizew+'" height="'+d.thumbnailSizeh+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);

               //]]>

            </script>
এভাবে আপনারা আপনার ব্লগার ওয়েবসাইটের মধ্যে সহজ ভাবে একটি থাম্বনেইল বা ছবি সহ রিলেটেড পোস্ট শো করাতে পারবেন।

Post a Comment