Home
WIDGET

POPULAR POST STYLE FOR BLOGGER

ဒါက​တော့မိမိတို့အခုလက်ရှိအသုံးပြု​နေတဲ့ Template မှာနဂိုပါလာတဲ့ Popular Post Style ကိုမကြိုက်လို့​ပြောင်းသုံးချင်​နေသူများအတွက်အဆင်​ပြေ​နေ​စေမဲ့ Popular Post Style ​လေးဖြစ်​နေလိမ့်မယ်လို့ထင်ပါတယ်။​အောက်မှာဒီဇိုင်းပုံ​တွေပြထားပါတယ်မိမိကြိုက်နှစ်သက်တဲ့ဒီဇိုင်းကို​ရွေးချယ်အသုံးပြုနိုင်ပါတယ်။ပြုလုပ်ပုံပြုလုပ်နည်းကလဲသိပ်​တော့မခက်ပါဘူး။ထည့်ပြီးလုပ်ရမဲ့လမ်း​ကြောင်းက​ပြောင်း​နေသဖြင့်အနည်းငယ်အမှားအယွင်းဖြစ်နိုင်ပါတယ်​သေချာဂရုတစိုက်​လေးလုပ်​ပေးလိုက်ပါ။အောက်မှာ Popular Post Style ( 2 )ခုပြသထားပါတယ်မိမိနှစ်သက်ရာကို​ရွေးချယ်အသုံးပြုပါ။



  1. မိမိ Blog site ကို account အရင်ဝင်ပါ

  2. dashboard ထဲက Theme ဆိုတာကိုနှိပ်

  3. Customize ကိုနှိပ်

  4. Advanced ကိုနှိပ်

  5. Add CSS ကိုနှိပ်

  6. ပေါ်လာတဲ့အကွက်ထဲမှာ Popular Post Style Code တွေထည့်ပေးလိုက်ပါ

    အခု NO(6)​နေရာအဆင့်မှာ HTML Template ဆိုရင်​တော့အခုလို Box အကွက်​ပေါ်လာမှာမဟုတ်ပါဘူး။​ပေါ်မလာလို့စိတ်ညစ်မသွားပါနဲ့နည်းလမ်းရှိပါတယ်။ HTML Template ဆိုရင်​တော့အ​ပေါ်ကအဆင့်​တွေနဲ့မဆိုင်​တော့ပါဘူး။HTML Template သုံးတဲ့မိတ်​ဆွေ​တွေရှိတယ်ဆိုရင်အခုပြမဲ့အဆင့်​တွေအတိုင်းလိုက်လုပ်​ပေးပါ။ပုံနဲ့​တော့မရှင်းပြ​တော့ဘူးရှုပ်ကုန်မှာစိုးလို့ပါ
    1. မိမိ blog site ကို account အရင်ဝင်ပါ
    2. dashboard ထဲက Theme ကိုနှိပ်
    3. Edit HTML ကိုနှိပ်
    4. Ctrl + F  အကူအညီနဲ့ ]]></b:skin> ကိုရှာပါ။ ]]></b:skin> ကို​တွေ့ပြီဆိုရင်အခု Popular Post Code ​တွေအဲဒီ ]]></b:skin> အ​ပေါ်က​နေကပ်လျက်ထည့်​ပေးပါ။Code ​တွေထည့်ပြီးသွားရင် save template ကိုနှိပ်ပါဒါဆိုပြီးပါပြီ။

  7. Code တွေထည့်ပြီးသွားရင်စာလုံးတလုံးလောက်ဖျက်ပြီးခဏမှတ်ထားပါ။အဲဒီဖျက်လိုက်တဲ့စာလုံးနေရာမှာအဲဒီစာလုံးပြန်ရေးပေးပါ အဲဒါမှ Apply to Blog ဆိုတာကိုနှိပ်လို့ရမှာပါ။ပြန်ရေးပြီးသွားပြီဆိုရင် Apply to Blog ဆိုတာကိုနှိပ်ပါ။

  8. Back to Blogger ကိုနှိပ်ပြီးပြန်သွားလိုက်ပါ။ဒါဆိုအားလုံးလုပ်ဆောင်လို့ပြီးပါပြီ။

Popular Posts Style No ( 1 )



#PopularPosts1 h2{
padding:7px 0 3px 0;
width:100%;
margin-bottom:10px;
font-size:1.3em;
text-indent:-12px;
font-size:18px;
text-align:center;
color: #757575; /* Color of the widget's title */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-7px;
width:290px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px;
width:285px;
}
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #ddd;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;   
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
top: 50%;
margin: -0.9m;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* text color of numbers */
background: #FB8835; /* background color of numbers */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute;   
left: 0;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:hover{
background: #eee;
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg);   
}
#PopularPosts1 ul li a{
font: 14px Georgia, serif; /* font size of post titles */
text-shadow: 0 -1px 2px #fff;
color: #444;
display:block;
min-height:25px;
text-decoration:none;
text-transform: uppercase;
}
#PopularPosts1 ul li a:hover{
color: #444;
}

Popular Posts Style No ( 2 )


#PopularPosts1 h2{
position:relative;
padding:8px 10px 6px 10px;
width:100%;
margin-bottom: 5px;
font-size:17px;
color:#757575; /* Color of the widget's title */
text-align:left;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{ /* Styles of each element */
width:100%;
position:relative;
left:-12px;
margin:0 0 1px 12px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
left: -8px;
top: 50%;
margin-top: -13px;
background: #8E8E8E; /* background color of the numbers */
height: 1.9em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
color: #fff;
font-size: 14px;
}
#PopularPosts1 ul li:after{
position: absolute;
content: '';
left: 10px;
margin-top: -.7em; 
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:10px solid #8E8E8E; /* background color of the right arrow*/
}
#PopularPosts1 ul li a{
color: #444;
text-decoration: none;   
font-size:15px;
}
#PopularPosts1 ul li {
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 0.4em;
background: #ddd;
transition: all .3s ease-out;
text-decoration:none;
transition: all .1s ease-in-out;
}
#PopularPosts1 ul li:hover{
background: #eee; /* Background color on mouseover */
}   
#PopularPosts1 ul li a:hover{
color:#444; /* Link color on mouseover */
margin-left:3px;
}

Post a Comment