অ্যানিমেটেড Multi Colored Popular Post ওয়েডগেট ব্লগার ব্লগ এর জন্য ।



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








* এবার দেখে নিন কিভাবে যুক্ত করবেন । স্টেপ গুল লক্ষ করুন ।

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

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


]]></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:90%}
#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;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#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:72%}
#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;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts3 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;
    background: #F2F2F2;}#PopularPosts1 img:hover {
    -moz-transform: scale(1.2) rotate(-560deg) ;
    -webkit-transform: scale(1.2) rotate(-560deg) ;
    -o-transform: scale(1.2) rotate(-560deg) ;
    -ms-transform: scale(1.2) rotate(-560deg) ;
    transform: scale(1.2) rotate(-560deg) ;
}


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

* তাহলে আজকের মতো এই পর্যন্ত আবার দ্যাখা হবে । আল্লাহ্‌ হাফেজ ।


একটি মন্তব্য পোস্ট করুন

3 মন্তব্যসমূহ

  1. সুন্দর পোস্ট!! শেয়ার করার জন্য ধন্যবাদ।

    উত্তরমুছুন
  2. aslamparvez৯:২৪ PM

    ধন্যবাদ ভাই কমেন্ট করার জন্য ।

    উত্তরমুছুন
  3. রামিজ রাজা৯:৫৭ AM

    এক কথাই অসাধারন ।

    উত্তরমুছুন

আপনার একটি মন্তব্য একজন লেখক কে ভালো কিছু লিখার অনুপেরনা যোগাই তাই প্রতিটি পোস্ট পড়ার পর নিজের মতামত জানাতে ভুলবেন না । তবে বন্ধুরা এমন কোন মন্তব্য পোস্ট করবেন না যার ফলে লেখকের মনে আঘাত করে ! কারণ একটা ভাল মন্তব্য আমাদের আরও ভাল কিছু লিখার অনুপেরনা যাগাই !!