New Multi colored - Numbered Popular Post Widget for Blogger

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

Today, I'm gonna to share "New Multi colored - Numbered Popular  Post Widget for Blogger". Popular post widget very important widget for blogger users so this widget make more attractive and user friendly. Users need to easy navigate to good articles and read much more so this feature very use full.So lets check out this widget→

1) Template Edit HTML ကေန  CTRL + F ကိုအသံုးျပဳျပီး ]]></b:skin>  

 ကိုရွာလိုက္ပါ။

Go to Blogger Dashboard→Select Template→Edit HTML then CTRL + F to find ]]></b:skin> tag and given below style/Skin code paste before this tag.

 2) ေတြ႔ရင္ေအာက္က ကုဒ္ကို ကူးျပီးထည့္ေပးလိုက္ပါ။

 

/* Multi colored - Numbered Popular Post Widget By MM-HelperBlogger.blogspot.com */ #PopularPosts4 ul li:hover{ background-color: #ffffff; } #PopularPosts1 ul li{border-bottom:2px dotted #999999;} #PopularPosts1 ul li .item-thumbnail{-webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } #PopularPosts1 ul li .item-thumbnail:hover{ -webkit-transform: rotate(-17deg); -moz-transform: rotate(-17deg); -o-transform: rotate(-17deg); } #PopularPosts1 ul li .item-title {color:#fff;} #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:5px 0;border-bottom:1px dashed #ffffff;padding:10px} #PopularPosts1 ul li:first-child{background:#eb1f0a;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul li:first-child + li{background:#0ddb25;width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child + li + li{background:#0d6edb;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li + li + li{background:#eeac0f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#7d0fee;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:#e30d31;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #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{position:absolute;top:20px;right:-15px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD5fxdVY3esRZhB0Ke9iN8Pe5dNq1gc0IKhZHXzR7gWZubFv6XVGBwCkbS2PF3TrzBgZ9Uv0k4HTV_dIdLnUjcZq5gIHMv_W1ueAn4xklG7rO00qQ8aMR6KYiJtwPjLl_Nl-CVqT5GdQ-0/s1600/waved-circle.png) no-repeat; width:32px;height:32px;text-align:center;font-size:15px; padding-top:13px; font-weight: bold; color:#ffffff;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px; border-radius: 5px; border: 2px solid #ffffff;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);box-shadow: 0 1px 2px rgba(0, 0, 0, .4);} #PopularPosts1 ul li a{font-size:12px;color:#fff;text-decoration:none} #PopularPosts1 ul li a:hover{color:#e3dede;text-decoration:none} #PopularPosts1 { margin-left: 20px; } #PopularPosts1 h2 {color:white; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbOFJtn8GOyY9wpVFqFgOVPkad2LQEx6PgIMX8IcFWSrodLxgD6c586lPO6Ih7ACz4INTG1qXxWAsQk9iCRyzM1vmHXbBiYHNmVJ76HuIKehtv0cfoJ9E6rvWtc-NCPDseV9gk6gz3VbX/s1600/layer2.png) no-repeat; height:30px; width: 287px; margin-left:-5px; padding-top:10px; font-size:18px; text-align: center; } 

ထည့္ျပီးသြားျပီဆိုရင္ Layout→Add widget Option→ Popular post widget မွာမိမိလိုသေလာက္
ပိုစ့္အေရအတြက္နဲ႔ ပံုထည့္ခ်င္ရင္လည္းထည့္၊ မထည့္ခ်င္လည္းရတယ္။ အေပၚမွာျပထားတဲ့ အတိုင္း
ပံဳပါရင္စတိုင္တစ္မ်ိဳး ၊ မပါရင္တစ္မ်ိဳးေလးေပါ့။
Save all and after go Layout→Add widget Option→ Choose Popular post widget. 

အားလံုးပဲအဆင္ေျပၾကရင္ ေၾကာ္ျငာေလးေတာ့ ကလစ္ခဲ့ပါ... Please...

Posted in: Blog ဆုိင္ရာနည္းပညာ,ကုဒ္မ်ား