How To Add Customize Blogger Official Popular Posts Widget With CSS

အခုတင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ Blog Official Popular Posts Widget ေလးကုိ CSS Cond ေပါင္းထည့္ၿပီး Design လွလွေလးျဖင့္ေအာင္ လုပ္နည္း/ထည့္နည္းေလးပါ။ သိၿပီးၾကေသာ ဘေလာ့မိတ္ေဆြေတြလည္းမ်ားေတာ့မွာပါ။ မသိေသးတဲ့ ဘေလာ့မိတ္ေဆြေတြ/သုံးခ်င္းတဲ့ သူေတြအတြက္ အဆင္ေျပနုိင္ေအာင္ ပုိ႔(စ္)ေလးတစ္ခုအေနျဖင့္ ထပ္မွ်ေ၀ေပးလုိက္တာပါ။ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ရေအာင္ link နဲ႔တကြ လုပ္နည္းနွင့္ လုိအပ္တဲ့ Cond ေတြကုိလည္း ထားေပးပါတယ္။

အဆင့္ ၁။
၁။ Sign In Blogger

၂။ Layout

၃။ Add a Gadget

၄။ Popular Posts

အဆင့္ ၂။ ၁။ Template

၂။ Edit HTMl

၃။ Proceed

၄။ ေအာက္က Cond ေလးကုိရွာပါ။Ctrl + F ကုိတြဲနုိပ္၍ရွာပါ ၊ ရွာရလြယ္ပါတယ္။

]]></b:skin>

၅။ ေတြ႔ၿပီးဆုိရင္ ]]></b:skin> ရဲ႕အေပၚမွာ ေအာက္က Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။

/*--- Customize Popular Posts Widget Design By www.mrthangming.blogspot.com --- */

.popular-posts ul{padding-left:0px;}

.popular-posts ul li {background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFgJfAJdBU8hF7tderXcHZ65XYgNBMNG06pejDnX-d7LwfLuu3y0fE-ATRZ_TeGZ6bM-t64bprEcCNCfl14NPEbmqTbMH4EL9yzHyB8A1X_2LBu3PDKCwexSSzNnPEdN7SLSv7EWvSsZk/s1600/rb+cancel+icon...jpg) no-repeat scroll 5px 10px;

list-style-type: none;

margin: 0 0 5px 0px;

padding: 5px 5px 5px 33px !important;

border: 1px dashed #dddddd;

border-radius: 10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

}

.popular-posts ul li:hover {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_UFNlcvwJR9bSD9KijttkOhBaWzJWjofrRrlHvFKoM67hTqh5nk75Pt3WlS_gsWcB8f2Vby4-F4y1MrlNtsSGYsMUfPXfpv32nnZUOGHRQ8ATCqUa9ykLI9rBvvMmvW57sGQ7PiFYR7o/s1600/rb+mark+icon...jpg) no-repeat 2px;

border: 2px solid #b60000;

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

}

.popular-posts ul li a:hover {

text-decoration:none;

}

၆။ ထည့္ၿပီးရင္ Save Template ကုိ နုိပ္ေပးလုိက္ပါ။