২৬ এপ্রিল, ২০১৬

ব্লগের Sidebar এ যুক্ত করুন Recent Post With Thumbnail Widget

ব্লগের Sidebar এ যুক্ত করুন Recent Post With Thumbnail Widget
4/ 5 stars - "ব্লগের Sidebar এ যুক্ত করুন Recent Post With Thumbnail Widget" প্রায় সব ধরনের ব্লগের পোষ্ট পেজের সাইডবারে Recent Post Widget যুক্ত করা থাকে। কারণ একজন ভিজিটর যখন সার্চ ইঞ্জিন হতে আপনার ব্লগের কোন একট...
-
ব্লগের Sidebar এ যুক্ত করুন Recent Post With Thumbnail Widget
প্রায় সব ধরনের ব্লগের পোষ্ট পেজের সাইডবারে Recent Post Widget যুক্ত করা থাকে। কারণ একজন ভিজিটর যখন সার্চ ইঞ্জিন হতে আপনার ব্লগের কোন একটি পোষ্ট ভিজিট করবে, তখন সে যদি আপনার ঐ পোষ্ট হতে তার প্রয়োজন মিটিয়ে নেয়ার পর ব্লগের হোম পেজে না আসে, তাহলে ঐ ভিজিটর আপনার সম্প্রতি পোষ্টগুলি দেখতে পাবে না। এ ক্ষেত্রে আপনি যদি ব্লগের পোষ্ট পেজের সাইডবারে Recent Post Widget যুক্ত করে রাখেন তাহলে একজন ভিজিটর ব্লগের যে কোন পেজে থাকুক না কেন, সে খুব সহজে হোম পেজে না গিয়েও আপনার সম্প্রতি পোষ্টগুলি দেখে নিতে পারবে। এটি আপনার ব্লগের Page View বাড়ীয়ে নিতেও সাহায্য করবে।
ব্লগের Sidebar এ যুক্ত করুন Recent Post With Thumbnail Widget
উপরের চিত্র হতে উইজেটটির Screenshot দেখুন। উইজেটটি দেখতে ঠিক উপরের চিত্রেরমত হওয়াতে আমরা উইজেটটির কোন লাইভ ডেমো শেয়ার করছি না। তবে বর্তমানে এটি আমাদের ব্লগের সাইডবারে ব্যবহার করছি। আপনি ইচ্ছে করলে আমাদের ব্লগের সাইডবার হতে লাইভ ডেমো দেখে নিতে পারেন।

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

  • প্রথমে আপনার ব্লগে লগইন করুন।
  • ব্লগার ড্যাশবোর্ড হতে Layout এ ক্লিক করুন।
  • এখন ডান পাশের লেআউট হতে Add Gadget এ ক্লিক করুন। নিচের চিত্রে দেখুন -
ব্লগের Sidebar এ যুক্ত করুন Recent Post With Thumbnail Widget
  • তারপর HTML/JavaScript এ ক্লিক করুন।
ব্লগের Sidebar এ যুক্ত করুন Recent Post With Thumbnail Widget
  • এবার নিচের কোডগুলি কপি করে HTML/JavaScript এর ঘরে পেষ্ট করুন।
<script type='text/javascript'>
function recentposts(json){document.write('<ul class="sidebar-recent-posts">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='http://www.webaholic.co.in/other/no-image.jpg';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<img class="post-thumb" src="'+thumburl+'"/>');document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('<i>');document.write(postcontent);document.write('</i>');}
else{document.write('<i>');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('</i>');}}
var towrite='';var flag=0;document.write('<br><strong>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+' '+cdday+', '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' <i class="fa fa-comments-o"></i> ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='0 Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More -></a>';flag=1;;}
document.write(towrite);document.write('</strong></li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('<hr size=0.5>');}document.write('</ul>');}
</script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = false;
var numchars = 60;
</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=recentposts'></script>

<script type='text/javascript'>
$(document).ready(function(){$(".sidebar-recent-posts").find("img").each(function(b,a){a=$(a);a.attr({src:a.attr("src").replace(/s72-c/,"w150-h100").replace(/default/,0)});a.attr("width",65);a.attr("height",60)})});
</script>

<style type='text/css'>
.sidebar-recent-posts{float:left;width:100%;min-height:70px;margin:5px 0 5px 0;padding:0;font-size:12px}
ul.sidebar-recent-posts li{padding-bottom:5px;text-align:left;padding-top:0;min-height:65px;border-bottom:1px dotted #CCC}
ul.sidebar-recent-posts li:last-child{border-bottom:0 dashed #92DAF8}
.sidebar-recent-posts a{text-decoration:none}
.sidebar-recent-posts a:hover{color:#F53B3B;transition:all 0.25s ease 0s}
.sidebar-recent-posts strong{font-size:10px}
.sidebar-recent-posts strong:before{content:"\f133";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
img.post-thumb{float:left;margin-right:10px;border-radius:10px;border:2px solid #FFF;box-shadow:0 1px 2px rgba(0,0,0,0.4)}
ul.sidebar-recent-posts li:hover{background:#E6FAFC}
img.post-thumb:hover{opacity:0.7}
</style>
  • সবশেষে Gadget টি Save করুন। That's all.

পরিবর্তনঃ

  • পোষ্টের সংখ্যা বাড়াতে বা কমাতে চাইলে উপরের লাল কালারের var numposts = 5 হতে সংখ্যাটি পরিবর্তন করে দিন।
  • পোষ্টের Thumbnail দেখাতে না চাইলে নীল কালারের var showpostthumbnails = true এর স্থলে false লিখে দিতে হবে।
  • পোষ্টের Comments এবং Date দেখাতে না চাইলে উপরের পিংক কালারের দু’টি অপশনের true এর স্থলে false লিখে দিন।
  • এছাড়াও আরো কিছু অপশন রয়েছে যেগুলি আপনি নিজেই বুঝতে পারবেন।

Advance অপশনঃ

সাধারণত Recent Post Widget ব্লগের হোম পেজে না দেখিয়ে শুধুমাত্র পোষ্ট পেজে দেখানো হয়। কারণ ব্লগের হোম পেজে সবসময় নরমালি Recent Post শো করে। সেই জন্য এটিকে হোম পেজ হতে Conditional Tag ব্যবহার করে Hide করা হয়ে থাকে। নিচে দেখুন কিভাবে উইজেটটি ব্লগের হোম পেজ হতে Hide করতে হয়?
  • প্রথমে আপনার Widget টির HTML ID বের করতে হবে। কিভাবে Widget ID খোঁজা হয় তা এই পোষ্ট থেকে দেখে নিতে পারেন।
  • তারপর ব্লগার ড্যাশবোর্ড হতে Template > Edit HTML এ ক্লিক করুন।
  • এখন ব্লগার টেমপ্লেট হতে "Jump to widget" অপশন হতে আপনার কাঙ্খিত Widget টিতে ক্লিক করুন। তাহলে আপনার HTML টির কোডগুলি নিচেরমত দেখতে পাবেন। আপনার উইজেটটিতে শুধুমাত্র নিচের লাল কালারের কোডগুলি দেখতে পাবেন না।
<b:widget id='HTML4' locked='false' title='সর্বশেষ পোষ্ট' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
  • উপরের কোড হতে কেবলমাত্র লাল কালারের কোডগুলি কপি করে আপনার উইজেটিটির ঠিক একই জায়গায় পেষ্ট করুন।
  • সবশেষে Template Save করুন। তাহলে এখন থেকে উইজেটটি কেবলমাত্র আপনার ব্লগের পোষ্ট পেজে শো করবে।
Subcribe to our all updates

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

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

 
Subscribe for all Updates

Subscribe Now

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

Powered by: