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/AVvXsEis-aKNLgk6ceMTD57flZSdJbx4I3RG0hYvanUtDsOtc2dD5hTjM8O_WLJs9kmmz_ita9TtTi0ai5QjSwRXvnBlqe6iKT_Ag4QckDtIG73uBog5wqJD-DIraszFSrMCKyc6qR9pLqNP2So/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/AVvXsEjaoo7L0536-RmbE1vtFeJSSV_ZcxTcm4YISi8alMJ-6fgOih7_I6EftX1sOmhS59NOJj8hrd7qgFiF2Sx6vKLAXv7XiFkCL0PZi-CiuMNj7HCnZ0TEEnu-Cxge1oiT0-DlHdSFWYrPH28/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 ကုိ နုိပ္ေပးလုိက္ပါ။