Home
WIDGET

Multi-Color Popular Post Style For Blogger

Multi-Color Popular Post Style For Blogger

ဒါက​တော့အရမ်းကိုလှတဲ့ Popular Post widget ​လေးပါ။အရမ်းကိုလှပ​သေသပ်လွန်းပါတယ်။မိတ်​ဆွေတို့လဲကြိုက်နှစ်သက်လိမ့်မယ်လို့​မျှော်လင့်မိပါတယ်။ပြုလုပ်နည်းက​တော့ ]]></b:skin> အ​ပေါ်က​နေထည့်​ပေးလိုက်ရုံပါပဲ။​အောက်မှာဒီဇိုင်းပုံစံ (2) ခုပြသထားပါတယ်မိမိကြိုက်နှစ်သက်တဲ့ဒီဇိုင်းကို​ရွေးချယ်အသုံးပြုပါ။


  1. မိမိ Blogsite ကို account အရင်ဝင်ပါ
  2. dashboard ထဲက Theme ကိုနှိပ်ပါ
  3. Edit HTML ကိုနှိပ်ပါ
  4. Ctrl + F အကူအညီနဲ့ ]]></b:skin> ကိုရှာပါ။အဲဒီ ]]></b:skin> ကို​တွေ့ပြီဆိုရင်​အောက်က​ပေးထားတဲ့ Popular Post Style Code ​တွေကိုအဲဒီ ]]></b:skin> အ​ပေါ်က​နေကပ်လျက်ထည့်​ပေးလိုက်ပါ။
  5. Popular Post Style Code ​တွေထည့်ပြီးသွားရင် save Template ကိုနှိပ်ပါပြီးပါပြီ။

Design(1)


 #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}

Design(2)


#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:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#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{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:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

<------------( OR ) သို့မဟုတ် -------------->
Template ထဲမှာဝင်ပြင်လို့အခက်အဲဖြစ်​နေရင်လဲ Tab Style အဖြစ်နဲ့ဒီနည်းကိုလဲအသုံးပြု၍ရပါတယ်
  1. မိမိ blogsite ကို account အရင်ဝင်ပါ
  2. dashboard ထဲက Layout ကိုနှိပ်ပါ

  3. Popular Posts အ​ပေါ်က Add a Gadget ကိုနှိပ်ပါ

  4. HTML/Java Script ကိုနှိပ်

  5. ပေါ်လာတဲ့ Box အကွက်ထဲမှာ​အောက်မှာ​ရေးထားသလို​လေးလိုက်​ရေး​ပေးပြီထည့်​ပေးရမဲ့ code ​တွေကိုလိုက်ထည့်​ပေးပါ။

    <style type='text/css'> လို့​ရေး​ပေးပါ။(1)

    <-- style code --> ထည့်ပါ။(2)

    </style> ​နောက်ဆုံးမှာ​ရေး​ပေးပါ။(3)

  6. ထည့်ပြီးသွားရင် save ကိုနှိပ်ပြီးပါပြီ။​အောက်ကပုံအတိုင်းဖြစ်​နေလိမ့်ပါမယ်။


Post a Comment