৯ জানু, ২০১৬

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

ব্লগ পোষ্টের নিচে Related Posts Widget যুক্ত করুন
4/ 5 stars - "ব্লগ পোষ্টের নিচে Related Posts Widget যুক্ত করুন" যে কোন ব্লগের Page View বাড়িয়ে নেয়ার জন্য Related Posts অপশনটা অত্যন্ত কার্যকরী উপায়। এই অপশনটা সাধারণত সব ধররেন ব্লগ পোষ্টের নিচে রাখা ...
-
ব্লগ পোষ্টের নিচে Related Posts Widget যুক্ত করুন
যে কোন ব্লগের Page View বাড়িয়ে নেয়ার জন্য Related Posts অপশনটা অত্যন্ত কার্যকরী উপায়। এই অপশনটা সাধারণত সব ধররেন ব্লগ পোষ্টের নিচে রাখা হয়ে থাকা। ভিজিটর যখন ব্লগের কোন একটি পোষ্ট ভিজিট করবে তখন এটি অটোমেটিক পোষ্টের সাথে সম্পর্কিত আরও কিছু পোষ্ট শো করবে। এতেকরে ভিজিটররা সহজে তার পছন্দমত আর পোষ্ট পড়ে নিতে পারে। তাছাড়া এটি যে কোন ব্লগের সুন্দর্য বৃদ্ধি করে।
ব্লগ পোষ্টের নিচে Related Posts Widget যুক্ত করুন
আমরা ইতিপূর্বে এ ধরনের একটি উইজেট শেয়ার করেছি। তবে দুটি ভিন্ন স্টাইলে করা হয়েছে। আপনি ইচ্ছে করলে এই লিংক থেকে আগের পোষ্টটি দেখে আসতে পারেন। আজকের উইজেটটি উপরের চিত্রে দেখতে পাচ্ছেন। এটি লিষ্ট আকারে একটির পর একটি নিচের দিকে শো করবে। আশা করি উইজেটটি আপনার ব্লগের কাজে আসবে। লাইভ দেখুন- Live Demo

কিভাবে ব্লগে যুক্ত করবেন?

  • প্রথমে আপনার ব্লগে লগইন করুন।
  • এরপর Template > Edit Html এ ক্লিক করুন।
  • তারপর কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
  • এখন নিচের কোডগুলি কপি করে ]]></b:skin> ট্যাগের উপরে পেষ্ট করুন।
 /* Related Posts
------------------------------------------ */
#related-posts{margin:20px 0}
#related-posts h4{padding:0;margin:0 0 12px;font-size:110%;border-bottom:3px solid #4F93C5}
#related-posts h4 span{background:#4F93C5;color:#fff;padding:6px 10px 3px 10px;display:inline-block;text-transform:uppercase;vertical-align:middle}
#related-posts-img{margin-top:-12px;border-width:0 1px 1px 1px;border-style:solid;border-color:#E7E7E7;padding:0}
#related-posts-img:hover{background:0}
#related-posts-img ul{list-style-type:none;margin:0;padding:0}
#related-posts-img li{min-height:62px;border-bottom:1px dotted #E7E7E7;list-style:none;margin:0 0 5px;padding:5px}
#related-posts-img li:last-child{border-bottom:0 #E7E7E7}
#related-posts-img li a{color:#444;font-size:14px}
#related-posts-img li a:hover{text-decoration:underline}
#related-posts-img .related-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size:14px}
#related-posts-img .related-text{display:block;line-height:20px;margin-top:10px;text-transform:none;color:#888;font-size:13px;font-weight:normal;text-align:justify}
#related-posts-img img{background:#fafafa;float:left;margin-right:10px;width:100px;height:70px;max-width:100%;padding:3px;border-radius:2px;border:1px solid #E9E9E9}
  • আবার কিবোর্ড হতে Ctrl+F চেপে </head> অংশটি সার্চ করুন।
  • এখন নিচের Script টি কপি করে </head> ট্যাগের উপরে পেষ্ট করুন। 
<script type='text/javascript'>
/*<![CDATA[*/
var relnum=0;
var relmaxposts=5;
var numchars=135;
var morelink=" ";
function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")&&(e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=e.join(""),e=e.substring(0,l-1)}function relpostimgthum(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reljudul[relnum]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),relcuplikan[relnum]=saringtags(postcontent,numchars),postimg="media$thumbnail"in e?e.media$thumbnail.url:"http://lh3.ggpht.com/_xcD4JK_dIjU/SnamIh0KTCI/AAAAAAAADMA/hLjqmEbdtkw/d/noimagethumb.gif",relgambar[relnum]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[relnum]=e.link[n].href;break}relnum++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function relatedpost(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reljudul[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]=relgambar[t]);reljudul=l,relurls=r,relcuplikan=e,relgambar=n;for(var t=0;t<reljudul.length;t++){var a=Math.floor((reljudul.length-1)*Math.random()),u=reljudul[t],s=relurls[t],i=relcuplikan[t],o=relgambar[t];reljudul[t]=reljudul[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relgambar[t]=relgambar[a],reljudul[a]=u,relurls[a]=s,relcuplikan[a]=i,relgambar[a]=o}for(var g,m=0,h=Math.floor((reljudul.length-1)*Math.random()),c=h,d=document.URL;m<relmaxposts&&(relurls[h]==d||(g="<li class='related-title clearfix'>",g+="<a href='"+relurls[h]+"' rel='nofollow' target='_top' title='"+reljudul[h]+"'><img src='"+relgambar[h]+"' /></a>",g+="<a href='"+relurls[h]+"' target='_top'>"+reljudul[h]+"</a>",g+="<span class='related-text'>"+relcuplikan[h]+" ... <a href='"+relurls[h]+"' target='_top'>"+morelink+"</a><span class='related-text'>",g+="</li>",document.write(g),m++,m!=relmaxposts))&&(h<reljudul.length-1?h++:h=0,h!=c););}var reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;
/*]]>*/
</script>
  • পুনরায় কিবোর্ড হতে Ctrl+F চেপে <div class='post-footer'> অংশটি সার্চ করুন।
  • তারপর <div class='post-footer'> অংশটির উপরে নিচের নিচের কোডগুলি কপি করে পেষ্ট করুন।
<div id='related-posts'>
<h4><span><i class='fa fa-fire'/> Related Posts</span></h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<ul id='related-posts-img'>
<script type='text/javascript'>relatedpost();</script>
</ul>
</div>
  • সবশেষে Save Template এ ক্লিক করলেই কাজ OK.

পরিবর্তনঃ

  • উপরের লাল চিহ্নিত অংশ হতে টাইলের বোর্ডার কালার পরিবর্তন করতে পারবেন।
  • পিংক কালার অংশ হতে টাইলের ব্যকগ্রাউন্ড কালার পরিবর্তন করা যাবে।
Subcribe to our all updates

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

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

  1. আসসালামু আলাইকুম, ভাই আমি সকল কোডগুলো দেয়ার পর save templet করলে , টেমপ্লেট সেভ হয়না , ভাই একটু সাহায্য করিয়েন ।

    উত্তরমুছুন
    উত্তরগুলি
    1. আপনার ইন্টারনেচ স্লো গতির কিংবা ব্রাউজারে সমস্যা অথবা কোড সঠিক জায়গায় সেট না করলে এ ধরনের সমস্যা হবে। এগুলি ঠিক আছে কি না আগে দেখুন, তারপর আবার চেষ্টা করুন।

      মুছুন

 
Subscribe for all Updates

Subscribe Now

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

Powered by: