আপনারা হয়ত অনেকেই জানেন কিভাবে ব্লগার এর পপুলার পোস্ট WIDGET পরিবর্তন করতে হয় । কিন্তু যারা ব্লগার এ নতুন তাদের blogspot ব্লগ কে সুন্দর করে সাজাতে আমার আই পোস্ট ।

To view live DEMO CLICK HERE

• আপনার ব্লগার অ্যাকাউন্ট এ লগ ইন করুন এবং ড্যাশবোর্ড এ যান
• প্রথম এ যান  Blogger >> Your Blog >> Layout.
• তারপর Add a Gadget >> Popular Posts
• এখন নিচের পিকচার অনুযায়ী আপনার Widget এর সেটিং ঠিক করে সেভ করে নিন।

• তারপর  Blogger >> Template >> এ যান ।
• আপনার ফুল Template টি backup হিশেবে রাখার জন্য ডাউনলোড করে নিন । পরে যদি কোন সমস্যা হয় তাহলে আবার আপলোড করে সেভ করে আগের অবস্থায় ফিরতে পারবেন ।
• এখন ক্লিক করুন -> Template -> Edit HTML-> Proceed
• তারপর Ctrl+F এর মাধ্যমে খুজে বের করুন  ]]></b:skin>
• এখন নিছের কোড টি কপি করে  ]]></b:skin> এর উপরে পেস্ট করুন ।

/*—. bditmela.blogspot.com  POPULAR WIDGET STYLE STARTS HERE—*/
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, ‘Times New Roman’, Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#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,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#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:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:”9″}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:”10″}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#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;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:”7″}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:”5″}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:”4″}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:”3″}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:”2″}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:”1″}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
/*—bditmela.blogspot.com POPULAR WIDGET STYLE ENDS HERE—*/

• ইচ্ছা করলে আপনারা নিজে নিজেই আপনাদের ইচ্ছা মত সব কিছু পরিবর্তন করে নিতে পারেন। যেমনঃ width, background, height, color etc.
• Step 5: সব শেষে সেভ করুন এবং আপনার ব্লগ টি রিফ্রেশ করে দেখুন আপনার খুব সুন্দর পপুলার পোস্ট WIDGET

কোন সমস্যা হলে আমাকে ইমেইল করতে পারেন or কমেন্ট করে জানাতে পারেন । আমি সমস্যা সমাধান করার চেষ্টা করব । আমার ইমেইল [email protected]

আমার ব্লগস্পট ব্লগটি দেখে আসতে পারেন । এখানে ক্লিক করুন

আরো নতুন নতুন ডিজাইন আসবে…………