POPULAR POST STYLE FOR BLOGGER

Popular Post Style For Blogger

ဒါက​တော့မိမိတို့အခုလက်ရှိအသုံးပြု​နေတဲ့ 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; }

0

0

Loading...