কিভাবে ব্লগারে সাম্প্রতিক পোস্ট ( Recent Post Widget ) গ্যালারী যুক্ত করবেন !

সাম্প্রতিক পোস্ট অর্থাৎ Recent Post ওয়েডগেট খুব কাজের ও দরকারি একটি জিনিস। এই ওয়েডগেট দ্বারা ভিজিটর খুব সহজেই বুঝতে পারে আপনার ব্লগে বর্তমান সময়ে অর্থাৎ সাম্প্রতিক কোন কোন পোস্ট হয়েছে বা নতুন কোন পোস্ট হয়েছে! আসলে সব ভিজিটর ত আর সরাসরি ব্লগে প্রবেশ করেনা অনেক ভিজিটর সার্চ ইঞ্জিন থেকেও আসে আর তাদের বেশির ভাগ ক্ষেত্রে দেখা যাই তারা সাইড বারে যে সকল পোস্ট থাকে সেগুল ভিজিট করে। সেই জন্য আমাদের এই ধরনের পোস্ট ওয়েডগেট ব্যবহার করতে হয় ভিজিটর ধরে রাখার উদ্দেশ্যে। সে যাই হোক আপনি যদি মনে করেন এটা আপনার ব্লগে ব্যবহার করা যাবে বা ব্যবহার যোগ্য এবং আপনার ব্লগের উপকার হবে তবে অবশ্যই ব্যবহার করতে পারেন। তবে কিছু মানুষ ভয় করে বেশি ওয়েডগেট ব্যবহার করলে ব্লগ ধির গতি হয়ে যাবে ইত্যাদি। আমি তাদের সঙ্গে একমত হ্যাঁ বন্ধু আপনি ঠিক বুঝেন বেশি ওয়েডগেট ব্লগে না ব্যবহার করার পরামর্শ আমিও দিব কিন্তু দরকারি জিনিস গুলত অবশ্যই ব্যবহার করতে হবে। তবে আপনার ব্লগ ধির গতি মনে হলে অবশ্যই এই পোস্ট দেখুন - " কিভাবে সিএসএস , জাভাস্ক্রিপ্ট এবং ফটোকে সঠিক ভাবে কমপ্রেস করে ব্লগের গতি বাড়াবেন " আশাকরি আপনার ব্লগের ধির গতি সমস্যার সমাধান হয়ে যাবে। যাই হোক আর কথা না বাড়িয়ে চলুন দেখি আজকের এই ওয়েডগেট কিভাবে ব্লগার ব্লগে যুক্ত করতে হয়।

Gallery Style Demo

কিভাবে ব্লগারে সাম্প্রতিক পোস্ট গ্যালারী যুক্ত করবেন :

প্রথমে আপনার ব্লগার ব্লগ লগইন করুন এবং ড্যাশবোর্ড থেকে Template এ ক্লিক করুন এবার Edit HTML এ ক্লিক করে এডিট বক্সে প্রবেশ করুন।

এবার আপনার কীবোর্ড এর CTRL+F প্রেস করে এই ট্যাগটি সার্চ করুন ]]></b:skin> এই ট্যাগ খুজে পেলে তার ঠিক উপরে নিচের কোড গুল কপি করে পেস্ট করে দিন।

.recent-gallery {padding:0;clear:both;}
.recent-gallery:after {content:"";display:table;clear:both;}
.recent-gallery .ad-item{display:inline-block;position:relative;margin:6px 0;overflow:hidden;}
.recent-gallery .ad-item a{position:relative;float:left;margin:0 6px;text-decoration:none}
.recent-gallery .ad-item .ptitle{background:rgba(0,0,0,.7);display:block;clear:left;font-size:10px;line-height:1.3em;position:absolute;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;padding:5px;word-wrap:break-word;overflow:hidden;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}
.recent-gallery .ad-item:hover .ptitle{visibility:visible;opacity:1}
.recent-gallery a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}
.recent-gallery a:hover img {border-color:#bbb;}

এবার একি ভাবে আপনার কীবোর্ড এর CTRL+F প্রেস করে এই </head> ট্যাগ সার্চ করুন খুজে পেলে তার ঠিক উপরে নিচের কোড গুল কপি পেস্ট করুন।

<script type='text/javascript'>
//<![CDATA[
// Recent Post Gallery
function arlinagrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-gallery">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+arlina_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+arlina_thumbs+'" height="'+arlina_thumbs+'"/>',p=arlina_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="ad-item">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>

Save Template এ ক্লিক করুন এবার ড্যাশবোর্ড থেকে Layout এ ক্লিক করুন, তারপর Add a Gadget এ ক্লিক করুন সব শেষে HTML/Javascript এ ক্লিক করে নিচের কোড গুল ফাকা করে বসিয়ে দিন।

<script>
var arlina_thumbs = 72; 
var arlina_title = true; 
</script>
<script src="/feeds/posts/summary?max-results=9&amp;alt=json-in-script&amp;callback=arlinagrid"></script>

Save এ ক্লিক করে বেরিয়ে আসুন এবং আপনার ব্লগ ভিজিট করে দেখুন আশাকরি আপনি কাজটি করতে সফল হয়েছেন। তবে এই ওয়েডগেট গুগল ক্রম নতুন ভার্সনে মনে হল কাজ করল আবার একবার করল না যাই হোক এটা জিনি বানিয়েছেন তাকা ম্যাসেজ করা হয়েছে কোন সমস্যা থাকলে অবশ্যই সমাধান দেওয়া হবে। ভাল থাকবেন সুস্থ থাকবেন। আসসালামু আলাইকুম।