How To Add Customize Popular Posts Widget With CSS3 To Blogger

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

(၁) သင့္ ဘေလာ့မွာ Popular Posts Widget ကုိ အရင္ထည့္ပါ:

၁။Sign In Blogger

၂။ Layout

၃။ Add a Gadget

၄။ Popular Posts

(၂) ေအာက္ပါအတုိင္ CSS Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ:

၅။ Edit HTMl

၆။ Proceed

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

]]></b:skin>

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

/*--- Mr ThangMing --- */

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

.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOTU4-t4CtgZ1HJ5PcbeZSUPbifdZJ1Lf643DCowZ57jpPUWke8gHFTAgOzGoJMDlPmrSrIUfWgt5LBFplqNn5vA9dmGEIr0mjgp8D6goLVptw6HVGuBfEPOhHe_Xb7IKGaqboqJ-Kbgk/s1600/1.gif)  no-repeat scroll 5px 10px;

  list-style-type: none;

  margin:0 0 5px 0px;

  padding:5px 5px 5px 20px !important;

  border: 1px solid #ddd;

  border-radius:10px;

  -moz-border-radius:10px;

  -webkit-border-radius:10px;

}

.popular-posts ul

  li:hover {

  border:1px solid #6BB5FF;

}

.popular-posts ul

  li a:hover {

  text-decoration:none;

}

.popular-posts .item-thumbnail img {

  webkit-border-radius: 100px;

  -moz-border-radius: 100px;

  border-radius: 100px;

  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

}

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