Custom Blog Stats For Blogger
ဒါကတော့မိမိတို့ Blog site မှာတင်ထားသမျှ post အရေအတွက်နဲ့ မှတ်ချက် comment အရေအတွက်တို့အပြင်မိမိတို့ရဲ့ Blog site ကိုဝင်ရောက်ကြည့်ရှုသူအရေအတွက်ဘယ်လောက်ရှိတယ်ဆိုတာတွေကိုပါဖော်ပြပေးမဲ့ဒီဇိုင်းလေးပါ။အရမ်းကိုလှပသေသပ်လွန်းပါတယ်။အောက်မှာပုံစံဒီဇိုင်းတွေပြသထားပါတယ်မိမိကြိုက်နှစ်သက်ရာဒီဇိုင်းပုံစံကိုရွှေးချယ်အသုံးပြုနိုင်ပါတယ်။ပြုလုပ်ပုံပြုလုပ်နည်းကတော့အောက်ကအတိုင်းပါပဲ
NO(1)မိမိ BLOG SITE ကို account အရင်ဝင်ပါ
NO(2)dashboard ထဲက Theme ကိုနှိပ်ပါ
NO(3) Edit HTML ဆိုတာကိုနှိပ်ပါ
NO(4) Ctrl + F (or) CDM + F အကူအညီယူ၍ ]]></b:skin> ကိုရှာပါ။အဲဒီ ]]></b:skin> ကိုတွေ့ပြီဆိုရင်အောက်မှာပေးထားတဲ့ပုံစံဒီဇိုင်းတွေထဲကမိမိကြိုက်နှစ်သက်ရာကိုရွေးချယ်ထားတဲ့ပုံစံဒီဇိုင်းရဲ့ style code တွေကိုအဲဒီ ]]></b:skin> အပေါ်ကနေကပ်လျက်ထည့်ပေးပါ။
Style No(1)
#Stats1 ul{margin:0px 0;border:0;padding:0}
#Stats1 li{
display:inline;
width:33%;
border:0;
color:#fff;
float:left;
text-decoration:none;
margin:0;font-size:100%;
list-style-type:none
}
#Stats1 li:hover{
opacity: 0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
}
#Stats1 h4{margin:0;font-size:140%;line-height:1.2em;color:#fff;padding: 0 5px 0 5px;}
#Stats1 span{font-size:12px;color:#fff;padding: 0 5px 0 5px;}
#totalposts{
background: #FF0404;
}
#totalComments{
background: #045DFF;
}
#totalCount{
background: #F67309;
}
Style No(2)
#Stats1 ul{margin:0px 0;border:0;padding:0}
#Stats1 li{
display:inline;
width:30%;
border:3px inset #045DFF;
color:#fff;
float:left;
text-decoration:none;
margin:0;font-size:100%;
list-style-type:none
}
#Stats1 li:hover{
opacity: 0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
}
#Stats1 h4{margin:0;font-size:140%;line-height:1.2em;color:#fff;padding: 0 5px 0 5px;}
#Stats1 span{font-size:12px;color:#fff;padding: 0 5px 0 5px;}
#totalposts{
background: #6C9FFB;
}
#totalComments{
background: #6C9FFB;
}
#totalCount{
background: #6C9FFB;
}
Style No(3)
#Stats1 ul{margin:0px 0;border:0;padding:0}
#Stats1 li{
display:inline;
width:30%;
border-left:5px solid #05A8FC;
color:#fff;
float:left;
text-decoration:none;
margin:0;font-size:100%;
list-style-type:none
}
#Stats1 li:hover{
opacity: 0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
}
#Stats1 h4{margin:0;font-size:140%;line-height:1.2em;color:#fff;padding: 0 5px 0 5px;}
#Stats1 span{font-size:12px;color:#fff;padding: 0 5px 0 5px;}
#totalposts{
background: #000000;
}
#totalComments{
background: #222222;
}
#totalCount{
background: #333333;
}
Style No(4)
#Stats1 ul{margin:0px 0;border:0;padding:0;}
#Stats1 li{
display:inline;
width:30%;
border-right:5px solid #FFFFFF;
border-buttom:4px solid #FC2B2C;
color:#fff;float:left;
text-decoration:none;
margin:0;font-size:100%;
list-style-type:none}
#Stats1 li:hover{opacity:0.7;filter:alpha(opacity=70);/* For IE8 and earlier */}
#Stats1 h4{
margin:0;font-size:140%;
line-height:1.2em;
color:#fff;padding:0 5px 0 5px;}
#Stats1 span{font-size:12px;color:#fff;
padding:0 5px 0 5px;}
#total posts{
background:#212121;
}
#total comments{
background:#212121;
}
#total count{
background:#212121;
}
Style No(5)
#Stats1 ul{margin:0px 0;border:0;padding:0}
#Stats1 li{
display:inline;
width:30%;
border:3px dashed #000000;
color:#fff;
float:left;
text-decoration:none;
margin:0;font-size:100%;
list-style-type:none
}
#Stats1 li:hover{
opacity: 0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
}
#Stats1 h4{margin:0;font-size:140%;line-height:1.2em;color:#fff;padding: 0 5px 0 5px;}
#Stats1 span{font-size:12px;color:#fff;padding: 0 5px 0 5px;}
#totalposts{
background: #055BFA;
}
#totalComments{
background: #FA05E0;
}
#totalCount{
background: #FA0505;
}
** ဒုတိယအဆင့်အနေနဲ့ဒါလေးတွေဆက်လုပ်ပေးပါ **
Sidebar ကိုရှာပါ။ sidebar ရဲ့မည်သည့်နေရာတွင်မဆိုထည့်သွင်းအသုံးပြုနိုင်ပါတယ်။sidebar ကိုလဲတွေ့ပြီထည့်သွင်းအသုံးပြုမဲ့နေရာကိုလဲသတ်မှတ်ပြီးပြီဆိုရင်အောက်မှာပေးထားတဲ့ code တွေကိုမိမိသတ်မှတ်ထားတဲ့နေရာမှာထည့်ပေးပါ။
<b:widget id='Stats1' locked='false' title='Total Pageviews' type='Stats'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<li id='totalposts'>
<h4 id='Stats1_totalPosts'>…</h4>
<span>Posts</span>
</li>
<li id='totalComments'>
<h4 id='Stats1_totalComments'>…</h4>
<span>Comments</span>
</li>
<li id='totalCount'>
<h4 expr:id='data:widget.instanceId + "_totalCount"'>…</h4>
<span>Pageviews</span>
</li>
</ul>
<script type='text/javascript'>
//<![CDATA[
function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>');
//]]>
</script>
</div>
</b:includable>
</b:widget>