Thursday, October 13, 2016
မဂၤလာပါဗ်ာ
ကၽြန္ေတာ္ဒီေန႔ေျပာျပေပးမယ့္နည္းေလးကေတာ့မိမိဘေလာ့PostေတြမွာPost Views ေလးထည့္ပံုေလးပါ
မေန႔ကညီေလးတစ္ေယာက္က"အစ္ကိုေရာင္ျပန္ေလးေရ ဒီလိုမ်ိဳး Post Views ဘယ္လိုထည့္ရလဲ" ဆိုၿပီး
Linkတစ္ခုေပးပါတယ္။ကၽြန္ေတာ္၀င္ၾကည့္လိုက္ေတာ့wordpressႀကီးျဖစ္ေနတယ္။
ကၽြန္ေတာ္လည္းWordpressမွာေတာင္ရရင္ဘေလာ့မွာလဲရႏိုင္တယ္ဆိုၿပီးထံုးစံအတိုင္း
Youtubeမွာေမႊေႏွာက္လိုက္တာေတြ႔ပါေရာ။ပထမဦးဆံုးစလုပ္ၾကည့္တာဆိုေတာ့သူကEလိုေျပာ
ကိုယ္ကနားလည္သေလာက္လုပ္ၾကည့္တာေန႔တစ္ပိုင္းကုန္မွရတယ္ ခ္ ခ္။
စကားေတြေျပာေနတာအခ်ိန္ေတာင္ေတာ္ေတာ္ကုန္ျပီ ခ္ ခ္ ။နမူနာၾကည့္ဖို႔ေအာက္မွာDemo Linkေလး
Demo
ကိုႏွိပ္ျပီးသြားၾကည့္ဗ်ာ။
ကဲစမယ္ဗ်ာ ပထမဆံုး ဒီမွာ Register အရင္သြားလုပ္ဗ်ာ။
အေရးႀကီးပါတယ္။
ေအာက္မွာ SS ေတြျပထားပါျပီေနာ္။
Google Account ေတာ့ရွိဖို႔လိုပါမယ္။(Bloggerေတြပဲရွိမွာပါ)
CREATE NEW PROJECT ကိုႏွိပ္ပါမယ္။
My awesome project ေနရာမွာအဆင္ေျပတာေရးေပးပါ။(Only English Letter)
Country/region မွာ Myanmar ေရြးေပးပါ။
ျပီးရင္ CREATE PROJECT ကိုႏွိပ္ပါ။
ေအာက္ကစာမ်က္ႏွာေရာက္လာပါၿပီ။
Add Firebase to your web app ကိုႏွိပ္လိုက္ပါ။ေအာက္ကစာမ်က္ႏွာက်လာပါလိမ့္မယ္။
အေပၚကစာမ်က္ႏွာေရာက္သြားရင္ကၽြန္ေတာ္၀ိုင္းျပထားတာေလးကိုNotepad မွာကူးယူမွတ္ထားလိုက္ပါ။
အေရးႀကီးပါတယ္။
ကဲဇာတ္လမ္းကအခုမွစမွာထံုးစံအတိုင္း
Blog>>>Templated>>>Edit Templated>>>
]]></b:skin>ကိုရွာပါ။
ျပီးရင္သူ႔ရဲ႔အေပၚကပ္ရပ္မွာေအာက္ကCodeကိုထည့္လိုက္ပါ။
/*-------- Post Views ----------*/
#views-container {
width: 85px;
float: right;
}
#views-container {
width: 85px;
float: right;
}
.mbtloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBmyiVnpAUKN5tX6ySSoVNP8zdtbhXnRvByA7ctef9NrVkPEzfywKPNMwkSvrCbmmt_2Y1-TZVFaQ948-P7aA37w8FwMDrRe8mh9cUXrspxDcQNq5fTUi3-nxejfi8SaPexMl-TkZk0jmp/s320/mbtloading.gif') no-repeat left center;
width: 16px;
height: 16px;
}
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBmyiVnpAUKN5tX6ySSoVNP8zdtbhXnRvByA7ctef9NrVkPEzfywKPNMwkSvrCbmmt_2Y1-TZVFaQ948-P7aA37w8FwMDrRe8mh9cUXrspxDcQNq5fTUi3-nxejfi8SaPexMl-TkZk0jmp/s320/mbtloading.gif') no-repeat left center;
width: 16px;
height: 16px;
}
.viewscount {
float: right;
color: #EE5D06;
font: bold italic 14px arial;
}
float: right;
color: #EE5D06;
font: bold italic 14px arial;
}
.views-text {
float: left;
font: bold 12px arial;
color: #333;
}
float: left;
font: bold 12px arial;
color: #333;
}
.views-icon{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipTCj6fSnOgvKZjXwHXetMYLOeAkho-s0KnCpSZeXQ2GBn1l2R-9hhiz0Eq1AN6liQoPM_F7cRRHaX5xH_U1KKFbPQj3U2damWV-U-IUH-bLmyU5hqk4qB-mFAXvACXb0G1UAZhFUJY8G6/s1600/postviews.png') no-repeat left;
border: 0px;
display: block;
width: 16px;
height: 16px;
float: left;
padding: 0px 2px;
}
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipTCj6fSnOgvKZjXwHXetMYLOeAkho-s0KnCpSZeXQ2GBn1l2R-9hhiz0Eq1AN6liQoPM_F7cRRHaX5xH_U1KKFbPQj3U2damWV-U-IUH-bLmyU5hqk4qB-mFAXvACXb0G1UAZhFUJY8G6/s1600/postviews.png') no-repeat left;
border: 0px;
display: block;
width: 16px;
height: 16px;
float: left;
padding: 0px 2px;
}
ျပီးရင္</body>ကိုထပ္ရွာပါ။ေစာေစာကလိုပဲသူ႔အေပၚကပ္ရပ္မွာေအာက္ကCodeကိုထည့္ပါ။
Color ခ်ယ္ထားတဲ႔ေနရာမွာေစာေစာကNotepadမွာမွတ္ထားတာကိုအစားထိုးလိုက္ပါ။
<!-- Post Views Script by MBT -->
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
$.each($('a[name]'), function(i, e) {
var elem = $(e).parent().find('#postviews').addClass('mbtloading');
var blogStats = new Firebase("https://mybloggertricks.firebaseio.com/pages/id/" + $(e).attr('name'));
blogStats.once('value', function(snapshot) {
var data = snapshot.val();
var isnew = false;
if(data == null) {
data= {};
data.value = 0;
data.url = window.location.href;
data.id = $(e).attr('name');
isnew = true;
}
elem.removeClass('mbtloading').text(data.value);
data.value++;
if(window.location.pathname!='/')
{
if(isnew)
blogStats.set(data);
else
blogStats.child('value').set(data.value);
}
});
});
</script>
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
$.each($('a[name]'), function(i, e) {
var elem = $(e).parent().find('#postviews').addClass('mbtloading');
var blogStats = new Firebase("https://mybloggertricks.firebaseio.com/pages/id/" + $(e).attr('name'));
blogStats.once('value', function(snapshot) {
var data = snapshot.val();
var isnew = false;
if(data == null) {
data= {};
data.value = 0;
data.url = window.location.href;
data.id = $(e).attr('name');
isnew = true;
}
elem.removeClass('mbtloading').text(data.value);
data.value++;
if(window.location.pathname!='/')
{
if(isnew)
blogStats.set(data);
else
blogStats.child('value').set(data.value);
}
});
});
</script>
မၿပီးေသးဘူးကိုယ့္လူအခု<data:post.body/>ကိုရွာလိုက္ပါဦး။ေတြ႔ရင္သူ႔အေပၚကပ္ရပ္မွာ
<!-- Post Views Counter by MBT-->
<div id='views-container'><span class='views-icon'/><div class='views-text'>Views:</div> <div class='mbtloading viewscount' id='postviews'/></div>
<div id='views-container'><span class='views-icon'/><div class='views-text'>Views:</div> <div class='mbtloading viewscount' id='postviews'/></div>
ေလးထည့္ေပးလိုက္ပါ။
ဒါကေတာ့ေနာက္ဆံုးအဆင့္<head> ကိုရွာပါ။ေတြ႔ရင္သူ႔ေအာက္ကပ္ရပ္မွာ
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
ထည့္ေပးလိုက္ပါ။ၿပီးရင္ Save Templated ႏွိပ္လိုက္ပါ။
ျပီးပါၿပီဗ်ာ။
အဆင္ေျပၾကပါေစ
ဒီေအာက္ကပ္ရပ္ကပံုေလးတစ္ခ်က္ေလာက္ကလစ္ခဲ႔ေပးပါလားဗ်ာ။
