ဒါကတော့မိမိတို့အခုလက်ရှိအသုံးပြုနေတဲ့ Template မှာနဂိုပါလာတဲ့ Popular Post Style ကိုမကြိုက်လို့ပြောင်းသုံးချင်နေသူများအတွက်အဆင်ပြေနေစေမဲ့ Popular Post Style လေးဖြစ်နေလိမ့်မယ်လို့ထင်ပါတယ်။အောက်မှာဒီဇိုင်းပုံတွေပြထားပါတယ်မိမိကြိုက်နှစ်သက်တဲ့ဒီဇိုင်းကိုရွေးချယ်အသုံးပြုနိုင်ပါတယ်။ပြုလုပ်ပုံပြုလုပ်နည်းကလဲသိပ်တော့မခက်ပါဘူး။ထည့်ပြီးလုပ်ရမဲ့လမ်းကြောင်းကပြောင်းနေသဖြင့်အနည်းငယ်အမှားအယွင်းဖြစ်နိုင်ပါတယ်သေချာဂရုတစိုက်လေးလုပ်ပေးလိုက်ပါ။အောက်မှာ Popular Post Style ( 2 )ခုပြသထားပါတယ်မိမိနှစ်သက်ရာကိုရွေးချယ်အသုံးပြုပါ။
NO(1)။မိမိ Blog site ကို account အရင်ဝင်ပါ
NO(2)။dashboard ထဲက Theme ဆိုတာကိုနှိပ်
NO(3)။Customize ကိုနှိပ်
NO(4)။ Advanced ကိုနှိပ်
NO(5)Add CSS ကိုနှိပ်
NO(6)။ပေါ်လာတဲ့အကွက်ထဲမှာ Popular Post Style Code တွေထည့်ပေးလိုက်ပါ
အခု NO(6)နေရာအဆင့်မှာ HTML Template ဆိုရင်တော့အခုလို Box အကွက်ပေါ်လာမှာမဟုတ်ပါဘူး။ပေါ်မလာလို့စိတ်ညစ်မသွားပါနဲ့နည်းလမ်းရှိပါတယ်။ HTML Template ဆိုရင်တော့အပေါ်ကအဆင့်တွေနဲ့မဆိုင်တော့ပါဘူး။HTML Template သုံးတဲ့မိတ်ဆွေတွေရှိတယ်ဆိုရင်အခုပြမဲ့အဆင့်တွေအတိုင်းလိုက်လုပ်ပေးပါ။ပုံနဲ့တော့မရှင်းပြတော့ဘူးရှုပ်ကုန်မှာစိုးလို့ပါ။
no(1)။မိမိ blog site ကို account အရင်ဝင်ပါ
no(2)။dashboard ထဲက Theme ကိုနှိပ်
no(3)။Edit HTML ကိုနှိပ်
no(4)။Ctrl + F အကူအညီနဲ့ ]]></b:skin> ကိုရှာပါ။ ]]></b:skin> ကိုတွေ့ပြီဆိုရင်အခု Popular Post Code တွေအဲဒီ ]]></b:skin> အပေါ်ကနေကပ်လျက်ထည့်ပေးပါ။Code တွေထည့်ပြီးသွားရင် save template ကိုနှိပ်ပါဒါဆိုပြီးပါပြီ။
NO(7)။Code တွေထည့်ပြီးသွားရင်စာလုံးတလုံးလောက်ဖျက်ပြီးခဏမှတ်ထားပါ။အဲဒီဖျက်လိုက်တဲ့စာလုံးနေရာမှာအဲဒီစာလုံးပြန်ရေးပေးပါ အဲဒါမှ Apply to Blog ဆိုတာကိုနှိပ်လို့ရမှာပါ။ပြန်ရေးပြီးသွားပြီဆိုရင် Apply to Blog ဆိုတာကိုနှိပ်ပါ။
NO(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;
}