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

Add Multicolored Popular Post Widget V3 in BLOGGER



                      Add Multicolored Popular Post Widget V3 in BLOGGER
သူငယ္ခ်င္းတို႔ရဲ႕ဘေလာ့စ္မွာအခုလိုလွပတဲ့ Popular Post Widget အလွေလးထားခ်င္တယ္
ဆိုရင္ေအာက္မွာအဆင့္ဆင့္ျပထားပါတယ္။
This tutorial will show you How To Add Different/Multi Colored Popular Post Widget In blogger. This widget is same as the previous one multicolored widget but it look different.



HOW TO ADD DIFFERENT/MULTI COLORED POPULAR POST WIDGET TO BLOGGER


1. Go to Blogger Dashboard --> Template --> Edit HTML --> Proceed

2. Backup your Template before making any changes to your blog

3. Now Expand Widget Templates

4. Press Ctrl + F  ကိုအသံုးျပဳျပီးေအာက္ code ေလးကိုရွာလိုက္ပါ။

]]></b:skin>

ေတြ႔ရင္ေအာက္ပ Code ကိုကူးျပီးသူ႔အေပၚမွာ Paste လုပ္လိုက္ပါ။


#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

ျပီးရင္ Save  လုပ္လိုက္ပါ။
ျပီးရင္က်ြန္ေတာ္တို႔ Blogger Dashboard --> Layout --> Add a Gadget --> Popular Posts
Select "display up to 9 posts" ေလာက္ထားမယ္ျပီးရင္ uncheck image thumbnail and snippet
Now Save the widget
ဒီေလာက္ဆိုသူငယ္ခ်င္းတို႔အဆင္ေျပေလာက္ပါျပီ။ အဆင္ေျပရင္ေၾကာ္ျငာေလးကလစ္ဖို႔နဲ႔
Like လုပ္ဖို႔မေမ့ပါနဲ႔ေနာ္....
Drop your Questions and Comments below.

                                       MM-Helper Blogger

0 comments:

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

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

    Featured Post