জনপ্রিয় পোষ্ট দেখানোর জন্য আমরা ব্লগে পোপুলার পোষ্ট (Popular Posts) গ্যাজেট ব্যবহার করি। এই গ্যাজেটের বিশেষত্ব হল পোষ্ট ভিউ এর নির্ভর করে সব থেকে যে পোষ্ট টি বেশি বার দেখা হয়েছে সেটা সবার উপরে থাকে। এভাবে বেশ কয়েকটি পোষ্ট রাখা যায় ভিজিটরদের সুবিধার জন্য।

আজ আমরা এই গ্যাজেটটি একটু কাস্টমাইজ করব। আজ আমরা এই গ্যাজেটে অ্যানিমেটেড কালার ইফেক্ট দিবো। যা গ্যাজেটের তথা ব্লগের সৌন্দর্য আরও বৃদ্ধি করবে।

তাহলে চলুন শুরু করা যাক, ব্লগে ব্লগস্পটের ডিফল্ট পোপুলার পোষ্ট গ্যাজেটটি যুক্ত করা না থাকলে করেনিন, image Thumbnail এবং snippet অপশন দুটি বন্ধ করুন। টেম্পলটি ইডিট করুন এবং খুজে বের করুন ]]></b:skin> কোডটি এবং নিচের কোডটি হুবাহু কপি করে ]]></b:skin> ঠিক পূর্বে পেষ্ট করুন।

.popular-posts ul{padding-left:1px;}
.popular-posts ul li {background: #FFF no-repeat scroll 5px 10px;
font-size: 12px;
font-family: Oswald;
font-weight:normal;
padding: 5px 10px 3px 10px;
color: #FEFF80;
background:transparent;
border: 1px solid #FE8080;
text-shadow: 0 1px 0 #CCC;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 1px 3px #F2FEBF, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
-webkit-box-shadow: 0 1px 3px #F2FEBF, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
box-shadow: 0 1px 3px #F2FEBF, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
margin: 5px 1px;
text-transform: uppercase;
line-height: 1.3;
transition:background 2s;
-moz-transition:background 2s; /* Firefox 4 */
-webkit-transition:background 2s; /* Safari and Chrome */
-o-transition:background 2s; /* Opera */
}
.popular-posts ul li:hover {
background:#E6FE80;
color:#FFF;
border-color:#B20000;
}

টেম্পলটি সেইব করুন। বাস ইডিট করার কাজ শেষ এখন ব্লগ ভিজিট করে দেখুন।

আমার ব্লগে একটু ঘুরে আসতে পারেন নতুন ডিজাইন টা কেমন হল জানাতে ভুলবেন না

আমার পোষ্টটি পড়ার জন্য আপনাকে ধন্যবাদ।