আসসালামু আলাইকুম ব্লগস্পট মাষ্টাররা। আশা করি সবাই ভালো আছেন। আজকে ব্লগস্পট মাষ্টারদের জন্য নিয়ে আসলাম অসাধারণ একটি Recent post widget তাও আবার Animated. ব্লগস্পটের বিষয়ে যাবতীয়া আপডেটের জন্য যারা  আমার ব্লগে নিয়মত  ভিজিট করেন তারা হয়ত এই পোষ্টটি এতক্ষনে দেখে নিয়েছেন। যদিও আমার ব্লগে ইংরেজীতে পোষ্ট করা।

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

ডেমো

ডেমো টা দেখলেন! আশা করি ভালো লাগছে। তাহলে চলুন এবার কাজ শুরু করা যাক। আর হে, কাজ শুরু করার আগে অবশ্যই আপনার টেমপ্লেট এর ব্যাক-আপ নিতে ভুলবেন না।

ধাপ১ঃ প্রথম আপনার ব্লগস্পট সাইটের ড্যাশবোর্ডে যান। তারপর "Template" এ ক্লিক করে "Edit Template" এ ক্লিক করুন।

ধাপ২ঃ এবার "Ctrl+F" চেপে  ]]></b:skin> এই কোডটি খুজে বের করুন এবং নিচের CSS কোডটুকু ]]></b:skin> এর উপরে পেষ্ট করুন।

#post-gallery{width:100%;margin:0 auto;font:normal 11px Arial,Sans-Serif;color:##000000;padding:8px}#post-gallery .rp-item{float:left;display:inline;position:relative;margin:2px;padding:0;background:url(http://i.imgur.com/Xgup3Hw.gif) no-repeat 50% 50%;width:79px;height:79px}#post-gallery .rp-item img{width:69px;height:69px;border:2px solid silver;border-radius:50%;margin:0!important;padding:0!important;background:transparent!important;display:none;-webkit-transition-duration:.8s;-moz-transition-duration:.8s;-o-transition-duration:.8s;transition-duration:.8s;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;transition-property:transform;overflow:hidden}#post-gallery .rp-item img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg)}#post-gallery .rp-item .rp-child{position:relative;top:10%!important;left:10%!important;z-index:1000;width:200px;background-color:#fff;border:2px solid #f56954;-webkit-box-shadow:5px 5px 10px rgba(0,0,0,0.7);-moz-box-shadow:5px 5px 10px rgba(0,0,0,0.7);box-shadow:5px 5px 10px rgba(0,0,0,0.7);padding:10px 15px;overflow:initial;word-wrap:break-word;display:none;opacity:.9}#post-gallery .rp-item .rp-child h4{font-size:12px;margin:0 0 5px;color:#1BA1E2}#post-gallery .rp-item:hover .hidden{display:block}

ধাপ৩ঃ এবার টেমপ্লেটটি Save করুন।

ধাপ৪ঃ টেমপ্লেটটি সেভ করার পর Layout এ ক্লিক করে নতুন একটি "HTML/Javascript" উইডগেট ওপেন করুন এবং নিচের কোডটুকু এই উইডগেট এ পেষ্ট করুন এবং উইডগেটটি Save করুন। আর হে, এই Widget এই কিন্তু Recent Posts দেখাবে। অতএব, আপনার যেখানে Recent Posts দেখানো দরকার সেখানেই নতুন উইডগেট তৈরী করুন।

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script> <script type="text/javascript"> var rpTitle = "Recent Posts", // Widget Title numposts = 14, // Number of Posts to show numchar = 200, // Number of Characters to be displayed rcFadeSpeed = 600, // Speed pBlank = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif", // If No Image blogURL = "http://your-blog.blogspot.com/"; // Your Blog URL </script> <script src="https://ms-design.googlecode.com/svn/animated-recent-posts.js" type="text/javascript"></script>

নোটঃ  http://your-blog.blogspot.com/ এই লিখাটি আপনার ব্লগের URL দিয়ে পরিবর্তন করুন।

ব্যস, কাজ শেষ। উপভোগ করতে থাকুন Awesome Animated Recent Post Widget. আর কোন সমস্যা হলে টিউনমেন্ট এ জানাবেন অথবা আমি আছি ফেইসবুকে অথবা যোগ দিন Blogspot Blogger's Forum Bangladesh ফেইসবুক গ্রুপে।

সৌজন্যেঃ MS Design [ব্লগস্পটের যাবতীয় আপডেট এবং টেমপ্লেট এর জন্য ঘুরে আসতে পারেন আমার ব্লগ থেকে]