আপনার ব্লগার ব্লগে যুক্ত করে নিন অসম্ভব সুন্দর একটি Recent Post ওয়েডগেট । আশাকরি আপনাদের দারুন লাগবে!!!

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

~>> নীচে থেকে লাইভে ডেমো দেখে আসুন ভাল লাগলে আপনার ব্লগে যুক্ত করে নিন ...।।

LIVE DEMO

এবার দেখে নিন কিভাবে অ্যাড করবেন ...

১// আপনার ব্লগ Log in করুন  > তারপর ড্যাশবোর্ড থেকে Layout  ক্লিক > তারপর Add a Gadget এ ক্লিক করুন > তারপর HTML/Javascript এ ক্লিক করুন > তারপর Content ঘরে নীচের কোডটি কপি করে পেস্ট করুন । 

<style type="text/css">
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.rcentside{font:normal normal 11px Verdana,Geneva,sans-serif}
ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative}
ul.rcentside{width:100%;height:500px}
ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block}
ul.rcentside img{border:0;width:100%;height:100%}
ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.rcentside li:nth-child(2){left:0;top:50%}
ul.rcentside li:nth-child(3){left:50.5%;top:50%}
ul.rcentside li:nth-child(4){width:100%;left:0;top:75%}
ul.rcentside .overlayx,ul.rcentside li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw_NUxj-PvvZXsuQon9KH5gfGQnGARNxpnDH-lQOnAjw5iNpSJ_EUw6_-GPwSQNtYGJCFquUIShMc67V_3C4iR6D1j_Ub-a6iGYKQoh4wEUAGjffZfmzlZSLJzEWZGl26o9PlwiT931Ec/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}
ul.rcentside .overlayx,ul.rcentside img{border:4px solid #000000;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
ul.rcentside li:nth-child(1) .overlayx{background-position:50% 25%}
ul.rcentside .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
ul.rcentside h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}
ul.rcentside li:nth-child(1) h4,ul.rcentside li:nth-child(4) h4{font-size:150%}
ul.rcentside .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}
ul.rcentside li:nth-child(2) .autname,ul.rcentside li:nth-child(3) .autname{display:none}
.buttons{margin:5px 0 0}
.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
</style>
<div id="featuredpostside"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://makingdifferent.github.io/blogger-widgets/featuredposts.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://asobondhu.blogspot.com",
 MaxPost:30,
 idcontaint:"#featuredpostside",
 ImageSize:300,
 interval:5000,
 autoplay:true,
 tagName:false
});
//]]>
</script>

নোট  ঃ উপরের blog URL এর জাইগাই আপনার ব্লগ URL বসান , Image Size কত দিতে চান টা ঠিক করে নিতে পারেন লাল রগে ঘিরা উপরে কোডে দেখুন । MaxPost 30 আছে আপনি আপনার পছন্দ মতো দিতে পারেন  ।


~>> তাহলে আশাকরি বুজতে কোন সমস্যা হলা না সমস্যা হলে জানাবেন আমি হেল্প করতে চেষ্টা করবো । আর আমার এই পোস্ট আপনাদের ভাল লাগলে একটি কমেন্ট করে জানাতে ভুলবেন না কিন্তু ।


~>> তাহলে আজাকের মতো এই পর্যন্ত আবারও দেখা হবে ভাল থাকবেন সুস্থ থাকবেন । আল্লাহ্‌ হাফেজ।