Our social:

March 20, 2015

Beautiful Popular Post Numbering Widget to Blogger

                                         popular posts widget for blogger 

သူငယ္ခ်င္းတို႔ Popular Post ေလးေတြစတိုင္အမ်ိဳးမ်ိဳးနဲ႔ထားၾကတယ္။က်ြန္ေတာ္ကလည္း
ဒီတစ္ခါ ဒီဇိုင္းဆန္းဆန္းေလးေပါ့ေနာ္ ပံုမွာျပထားတဲ့အတိုင္း အလန္းေလးထားမယ္ဆိုရင္ေတာ့
ေအာက္မွာဘယ္လိုလုပ္ရလဲဆိုတာ ေသခ်ာရွင္းျပထားပါတယ္။သူငယ္ခ်င္းတို႔စိတ္၀င္စားမယ္
ဆိုရင္ လုိက္လုပ္ၾကည့္ပါ။ ပထမဆံုး မိမိ Template ကိုအရင္ Backup လုပ္ထားပါ။

ပထမဆံုး Go to Blogger >> Template >> EditHTML သြားလိုက္ပါ။
အခုျပထားတဲ့ဟာကိုရွာလိုက္ပါ-  <b:skin>....</b:skin> ကိုရွာလိုက္ပါ။
ေအာက္မွာပံုေလးနဲ႔ျပထားပါတယ္.
  
ဟုတ္ျပီ အဲ့ဒီ့ 2 ခုၾကားကိုတစ္ခ်က္ကလစ္လိုက္ပါ။  </b:skin> tag ေလးရဲ႕အေပၚမွာ
ေအာက္ကကုဒ္ကိုကူးျပီးထည့္ေပးလိုက္ပါ။

#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 10px 0px -5px; 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;}
#PopularPosts1 img {
border-radius:200px;
width:60px; height:60px;
margin-left:4px;
}

ဒီေလာက္ဆိုရင္သူငယ္ခ်င္းတို႔ရဲ႕ဘေလာ့စ္မွာ အေပၚမွာျပထားတဲ့စတိုင္ေလးျဖစ္ေနပါျပီ။
ျပီးရင္လည္း Save လုပ္ဖို႔မေမ့နဲ႔အုန္းေနာ္။
ေညာင္ညိဳသားေလး(ကၽြန္ဗ်ဴတာ နည္းပညာ ေဆာ့ဝဲလ္မွ်ေဝျခင္း) http://mrthanaung.blogspot.com 
အားလံုးအဆင္ေျပမွာပါ။ ေနာက္ထပ္ Blog နဲ႔ပတ္သက္တဲ့ဒီလိုပိုစ္႔မ်ားကို က်ြန္ေတာ့္



ဘေလာ့စ္ရဲ႕ "လိုခ်င္တာဒီမွာရွာ" ဆိုတဲ့ Labels ေခါင္းစဥ္ေအာက္မွာ" BLOG နည္းပညာ "
လို႔ေရးထားပါတယ္။


ေညာင္ညိဳသားေလးသို ့{ ဒီမွာ } သြားလိုက္ပါ


0 comments:

Post a Comment