Call Yangonthar Phone Number: 083-111-8534(thai)

Customize Popular Posts Widget in Blogger with CSS3

သူငယ္ခ်င္းတို႕ရဲ႕ ဘေလာ့စ္မွာ အခုလို Popular Post Widget ေလးထားခ်င္တယ္ဆိုရင္
ေအာက္မွာအဆင့္ဆင့္ျပထားပါတယ္။ အရင္ပိုစ့္ေတြမွာတင္ေပးထားပါေသးတယ္။ဒါကေနာက္ထပ္
စတိုင္အလန္းေလးတစ္ခုပါ။
In order to customize your blog's popular posts you should first add the widget into your blog's side bar or somewhere on your blog. To add the popular posts widget in Blogger just follow given steps below:
ပထမဆံုး မိမိဘေလာ့စ္မွာ ျပထားတဲ့အတိုင္းအရင္သြားျပီး ယူလိုက္ပါ။
  1. Go to Dashboard 
  2. Layout >> Add a Widget >> Add the Popular posts widget အမွန္ျခစ္ေလးထည့္လိုက္ပါ။
  3. ျပီးရင္ကိုယ္ထားခ်င္သေလာက္ ပိုစ့္အေရအတြက္ကိုထည့္ပါ။ျပီးရင္ Save .
Now the actual part is here, by default when you add this widget, it looks pretty simple; so you can customize it with css codes. Just follow my steps to change the popular posts widget in blogger:
ျပီးရင္က်ြန္ေတာ္တို႕ေအာက္မွာျပထားတဲ့အတိုင္း လုပ္ေဆာင္ရပါမယ္။
  1. Blogger Dashboard
  2. Template >> HTML >> Proceed 
  3. CTRL+F ကိုသံးျပီး ဒီ code ကိုရွာပါ </b:skin>
  4. ေတြ႕ရင္ေအာက္ကကုဒ္ကို </b:skin> အေပၚမွာ code and paste လုပ္လိုက္ပါ။

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRmuj5_m5GO5wVmzn4okcFBSQ77RhP6inmtJwUA44lEvae5wZEg__7wLB_m4AYp1byfBLPvPiUNfZW3Vmn68vsKbiliu3p-OnzBq7CId-ty7aawN7qH34f5xYuIY7XhKQJrdOgmyTO_tg/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:2px solid #6BB5FF;
background:#000000;
}
.popular-posts ul
  li a:hover {
  text-decoration:none;
color:#FFF8DC;
}
.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);
}
Now save your template and you've done it.ဒီေလာက္ဆိုရင္သူငယ္ခ်င္းတို႕အဆင္ေျပပါျပီ။
Color: ေနရာမွမိမိတို႕ၾကိဳက္သလိုျပင္ဆင္ႏိုင္ပါတယ္။

                                          MM-Helper Blogger


သူငယ္ခ်င္းတို႕အဆင္ေျပၾကတယ္ဆိုရင္ ေၾကာ္ျငာေလးကလစ္သြားရင္လည္းစိတ္ဆိုးဘူးေနာ္..ေိခိ:D
                Like ႏွိပ္ေပးျခင္းျဖင့္အားေပးၾကပါ။ အဖြဲ၀င္ဖို႕လည္းဖိတ္ေခၚပါတယ္။


0 comments:

အဆင္ေျပတယ္ဆိုရင္ေၾကာ္ျငာေလးကလစ္ခဲ့ဖို႔မေမ့လိုက္ပါနဲ႔သူငယ္ခ်င္း..ေိခိးD

အဖြဲ႔၀င္ခဲ့ဖို႔ဖိတ္ေခၚပါတယ္

    Featured Post