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/AVvXsEjA7i-9pVTiXjrGbdiEYNYYCs54JVJc2p5bDVw69DCqtPNbYu2Aabo8Xq18YTpDi9PAW6jBBDccMLXIfE8ueE2SCezNfHmAjFqdE8iQg6SMsU-vxQTEM1zud_Hrj2AWu06NqCyQ1DASxtM/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/AVvXsEgg5uS7NeHJ59WXWNvnlXgQNZHpv_go6KS8pRWwf5dD6phVf9CjkPckF4qURqhgPiLPqA7qlbZVPWHK6ySYK6GmuR4NLX24Iqru6mWR8PTZEMTXD4HqCKsYpqHYNL8QXLAuOnUCHmfAx54/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 ကုိ နုိပ္ေပးလုိက္ပါ။