আপনার ব্লগে যুক্ত করুন অসাধারণ জনপ্রিয় পোষ্ট গেজেট (How to add colorful popular post widget)

আসালামু‘আলায়কুম। কেমন আছেন সবাই। আজ ব্লগার ব্লগের জন্য ছোট্ট একটি টিউন নিয়ে হাজির হয়েছি। আমরা যারা ব্লগ ব্যবহার করি তারা সবাই ভিজিটরদের সুবিধা এবং মন আকর্ষণ করার জন্য অনেক ধরনের গেজেট ব্লগে যুক্ত করে থাকি ।

আজ আমপাদের জন্য ব্লগে জনপ্রিয় পোষ্ট (Popular post) এর একটি অসাধারণ কালারযুক্ত গেজেট নিয়ে এসেছি।

আসুন যেভাবে যুক্ত করবেন-

প্রথমে আপনার ব্লগার ব্লগটি ওপেন করুন। তারপর নিচের চিত্রের মতে লেআউট এগিয়ে জনপ্রিয় পোষ্ট (Popular post) গেজেটটি যুক্ত করুন।

তারপর নিচের চিত্রের মত টেমপ্লেট এ ক্লিক করুন। এখান থেকে Edit Html এ ক্লিক করুন। Html কোডিং আসলে বক্স এ Ctrl+F চাপুন। চার্চ বক্স এ নিম্মে কোডটি দিয়ে এন্টার চাপুন।

]]></b:skin>

]]></b:skin> কোডটি খোঁজে ফেলে তার টিক উপরে নিচের কোডগুলো কপি করে পেষ্ট করুন।

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width8%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width5%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width2%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width0px;height0px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}