দারুন একটি নাম্বার POPULAR POSTS ওয়েডগেট ব্লগার ব্লগ এর জন্য ।

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

LIVE DEMO

* আশাকরি আপনাদের পছন্দ হল । তাহলে আর দেরি না করে দেখে নিন কিভাবে এটিকে আপনার ব্লগে যুক্ত করবেন ।

১) আপনার ব্লগ লগ অন করুন তারপর ড্যাশবোর্ড থেকে Template এ ক্লিক করে Edit HTML এ ক্লিক করুন ।

২) এবার Ctrl +F এর সাহায্য নিয়ে নীচের কোড টি সার্চ করুন ।

]]></b:skin>

* এবার উপরের কোডটি খুজে পেলে নীচের কোডটি উপরের কোড এর ঠিক উপরে কপি করে পেস্ট করুন তারপর Preview template এ ক্লিক করে এর লাইভ Preview দেখে নিন , তাহলে বুজে যাবেন এটা আপনার ব্লগে যুক্ত হছে কি হছে না তারপর  Save এ ক্লিক করে Template সেভ করে নিন ।

.popular-posts ul li a {
    background: none repeat scroll 0 0 #222222;
    color: #FFFFFF;
    display: block;
    margin: 10px 0;
    padding: 25px 15px 30px;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
 width: 85%;
}
.popular-posts ul li a:before {
    background: none repeat scroll 0 0 #2DB3E9;
    color: #FFFFFF;
    font-weight: 700;
    height: 2em;
    line-height: 2em;
    margin-left: 88%;
    padding: 4px;
    position: absolute;
    text-align: center;
    width: 2em;
    transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.3s ease-in-out 0s;
}
.popular-posts ul li a:hover {
    opacity: 0.8;
}
.popular-posts ul li a:hover:before {
    border-left-color: #CCCCCC;
    left: -1px;
     -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before {
    content: "10";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before {
    content: "9";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before {
    content: "8";
}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before {
    content: "7";
}
.popular-posts ul li:first-child + li + li + li + li + li a:before {
    content: "6";
}
.popular-posts ul li:first-child + li + li + li + li a:before {
    content: "5";
}
.popular-posts ul li:first-child + li + li + li a:before {
    content: "4";
}
.popular-posts ul li:first-child + li + li a:before {
    content: "3";
}
.popular-posts ul li:first-child + li a:before {
    content: "2";
}
.popular-posts ul li:first-child a:before {
    content: "1";
}
.item-snippet {
    display: none;
}
.PopularPosts .item-thumbnail {
    display: none;
} 

* ব্যাস আপনার কাজ শেষ এবার আপনি আপনার ব্লগে প্রবেশ করে দেখুন । ভাল লাগলে একটি কমেন্ট করে জানাবেন । কমেন্ট করলে বুজতে পারি আপনারা এসো বন্ধুর সাথেই আছেন । ভাল থাকবেন সুস্থ থাকবেন । আল্লাহ্‌ হাফেজ ।