আপনার ব্লগার ব্লগে যুক্ত করে নিন সুন্দর একটি Hover effect Popular ওয়েডগেট ।

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










এবার দেখে নিন কিভাবে আপনার ব্লগে যুক্ত করবেন !


১) আপনার ব্লগ লগ ইন করুন তারপর ড্যাশবোর্ড থেকে Layout এ ক্লিক করুন

২) এবার Add a Gadget এ ক্লিক করে Popular পোস্ট টি যুক্ত করে নিন । নীচের চিত্রে দেখুন ।





নোট  ঃ আপনার যদি ১ এবং ২ কাজ মানে পপুলার পোস্ট আগে থেকে যুক্ত থাকে তাহলে নীচের টিপস লক্ষ করুন  আর হ্যাঁ Image Thumbnail & snippet সিলেক্ট করে ৯ টি পোস্ট সিলেক্ট করুন ।





৩) আবার আপনার ব্লগ এর ড্যাশবোর্ড এ জান তারপর Template থেকে 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:#04BDFA;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#05EEFB;width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#04BDFA;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#05EEFB;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#04BDFA;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#05EEFB;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:#04BDFA;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 + li + li +li{background:#05EEFB;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:#04BDFA;width:90%}
#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:0px;right:-15px;border-radius:5%;background:#353535;width:20px;height:100%;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border-radius:15%;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) ;
}



৬) এবার Save Template এ ক্লিক করে সেভ করে নিন । এবার আপনার ব্লগে গিয়ে দেখুন আশাকরি কাজ হয়ে গেছে । কোন সমস্যা হলে জানাবেন আমি হেল্প করতে চেষ্টা করবো ।


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


এসো বন্ধু

আমি পারভেজ ব্লগিং এর সঙ্গে যুক্ত আছি গত বেশ কিছু বছর, বাংলা ব্লগিং এর সঙ্গে সঙ্গে আমি অন্য ভাষাতেও ব্লগিং করি। সেই সব কারনে ব্লগে নিয়তম থাকা হয়না, আপনাদের ভালোবাসা যদি আগের মত আবার ফিরে পাই তাহলে অবশ্যই নিয়মত হবার চেস্ট করবো। facebook telegram youtube twitter

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

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

  1. bro ami ekdom notun tai apnar kase ektu sahajjo chacchi..
    Amake ekta simple blogger template baniye diben please..ami omek try koresi apnar blogger template diye kintu edit korte parina...
    Amar blogger template ta evabe hobe...
    Page,menu ami korbo..eita kisu korte hobena..tar por post er seshe ''read more'' eita lagbenna.
    Shudu facebook like box ar facebooke twitter share korar option.commente apnar moto disquis option..ar post er bame-dane banner dewar bebosta (skyleader banner)please help me bai..apni na korle ar kew korbena

    উত্তরমুছুন
  2. aslamparvez৯:১১ AM

    ধন্যবাদ ভাই কমেন্ট করার জন্য সময় পেলে অবশ্যই আপনাকে হেল্প করবো ।

    উত্তরমুছুন
নবীনতর পূর্বতন

نموذج الاتصال