Popular Post Style လွလွပပေလး

ကဲ ဗ်ိဳ႕....ဘေလာ့ကာ ေဘာ္ေဘာ္ အေပါင္းးတို႕....ဘေတာ့ရဲ႕ ေပၚပ်ဴလာပို႕စ္ လွလွေလးေတြကို
က်ေနာ္ ေတြ႕ရွိသေလာက္ ျပန္လည္ မွ်ေ၀ေနပါတယ္... 

မိမိတို႕ဘေလာ့မွာ လွလွပပ ဆင္ျမန္းဖို႕ဆိုရင္ သည္လို နည္းလမ္းေလးေတြက လိုအပ္ေနမွာ အမွန္ပါ ဒါေၾကာင့္ ရွာေဖြ ေလ့လာရင္းး မွ်ေ၀ေနပါတယ္...

ေအာက္မွာ လုပ္ေဆာင္ခ်က္ေတြကို ေလ့လာရင္း လုပ္လိုက္ၾကပါေနာ္......

• ►1- Blogger Singin ၀င္လိုက္ပါ။
• ►2- Dashboard ကိုသြားလိုက္ပါ။
• ►3- Template ကိုကလစ္ပါ..။
• ►4- Edit Html ကို၀င္ပါ..
• ►5- Ctrl+F (သို႕မဟုတ္) F3 အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။

]]></b:skin> သည္ကုဒ္ကိုရွာပါ ေတြ႕တာနဲ႕ သူမတိုင္ခင္ အေပၚကပ္လွ်က္
ေအာက္ကကုဒ္ေတြကို ထည့္ေပးလိုက္ပါ။

#PopularPosts1 ul{
margin:0;
padding:5px 0;
list-style-type:none
}

#PopularPosts1 ul li{
position:relative;
margin:5px 0;
border:0;
padding:10px
}

#PopularPosts1 ul li:first-child{
background:#ff4c54;
width:90%
}

#PopularPosts1 ul li:first-child:after{
content:"1"
}

#PopularPosts1 ul li:first-child + li{
background:#ff764c;
width:87%
}

#PopularPosts1 ul li:first-child + li:after{
content:"2"
}

#PopularPosts1 ul li:first-child + li + li{
background:#ffde4c;
width:84%
}

#PopularPosts1 ul li:first-child + li + li:after{
content:"3"
}

#PopularPosts1 ul li:first-child + li + li + li{
background:#c7f25f;
width:81%
}

#PopularPosts1 ul li:first-child + li + li + li:after{
content:"4"
}

#PopularPosts1 ul li:first-child + li + li + li + li{
background:#33c9f7;
width:78%
}

#PopularPosts1 ul li:first-child + li + li + li + li:after{
content:"5"
}

#PopularPosts1 ul li:first-child + li + li + li + li +li{
background:#7ee3c7;
width:75%
}

#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:72%
}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{
content:"7"
}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{
background:#f59095;
width:69%
}

#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:#c7f25f;
width:66%
}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{
content:"9"
}

#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{
position:absolute;
top:20px;
right:-15px;
border-radius:50%;
background:#353535;
width:30px;
height:30px;
line-height:1em;
text-align:center;
font-size:28px;
color:#fff
}

#PopularPosts1 ul li .item-thumbnail{
float:left;
border:0;
margin-right:10px;
background:transparent;
padding:0;width:70px;height:70px;
}

#PopularPosts1 ul li a{
font-size:12px;
color:#444;
text-decoration:none
}

#PopularPosts1 ul li a:hover{
color:#222;
text-decoration:none
}

#PopularPosts3 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease; padding:4px;
border:1px solid #fff !important;
background: #F2F2F2;
}

#PopularPosts1 img:hover {
-moz-transform: scale(1.2) rotate(-560deg) ;
-webkit-transform: scale(1.2) rotate(-560deg) ;
-o-transform: scale(1.2) rotate(-560deg) ;
-ms-transform: scale(1.2) rotate(-560deg) ;
transform: scale(1.2) rotate(-560deg) ;
}

မိမိတို႔ တန္ပလိတ္ကို ေဆ့လိုက္လို႔ ရပါၿပီ....ေနာ္...။

ေနာက္တဆင့္အေနနဲ႔ ကေတာ့...
Blogger home page ကို သြားပါ.... Layout ကို၀င္ပါ Add a Gadget ကိုကလစ္ပါ...။
အဲထဲက Popular Post ကိုကလစ္ပါ.... ပို႔စ္ အေရအတြက္ ေတြ ေရြးခ်ယ္ပါ..."display up to 9 posts"
ွွSave လုိက္ပါ...ျပီးဆုံးပါျပိေနာ္... လွလွပပ ေလးရျပီေပါ့..
ဘေလာ့ခရီးသည္ မွကူးယူမွ်ေဝသည္။

HTML codeမထည့္တက္ရင္ ေအာက္က Videoကိုၾကည့္ထည့္ပါ။

 ကၽြန္ေတာ္တင္သမွ် Post ေတြကို Facebook မွ တုိက္ရုိက္ဖတ္ရႈလို႔ပါက >> နည္းပညာႏွင့္ေဆာ့ဝဲလ္မ်ား Page ကိုႏွိပ္ျပီး Like လုပ္ထားေပးပါ၊၊ 

Follow Me Chaw Ko Ko Facebook.

႐ိုး႐ွင္​း​ေသာနည္​းပညာမ်ားကို ဆန္​းသစ္​စြာတင္​ဆက္​မည္​။

အားလံုးကိုခင္​မင္​လ်ွက္​။

CKK - နည္​းပညာ