ကၽြန္ေတာ္ဒီေန႔ေျပာျပေပးမယ့္နည္းေလးကေတာ့မိမိဘေလာ့PostေတြမွာPost Views ေလးထည့္ပံုေလးပါ
မေန႔ကညီေလးတစ္ေယာက္က"အစ္ကိုေရာင္ျပန္ေလးေရ ဒီလိုမ်ိဳး Post Views ဘယ္လိုထည့္ရလဲ" ဆိုၿပီး
Linkတစ္ခုေပးပါတယ္။ကၽြန္ေတာ္၀င္ၾကည့္လိုက္ေတာ့wordpressႀကီးျဖစ္ေနတယ္။
ကၽြန္ေတာ္လည္းWordpressမွာေတာင္ရရင္ဘေလာ့မွာလဲရႏိုင္တယ္ဆိုၿပီးထံုးစံအတိုင္း
Youtubeမွာေမႊေႏွာက္လိုက္တာေတြ႔ပါေရာ။ပထမဦးဆံုးစလုပ္ၾကည့္တာဆိုေတာ့သူကEလိုေျပာ
ကိုယ္ကနားလည္သေလာက္လုပ္ၾကည့္တာေန႔တစ္ပိုင္းကုန္မွရတယ္ ခ္ ခ္။
စကားေတြေျပာေနတာအခ်ိန္ေတာင္ေတာ္ေတာ္ကုန္ျပီ ခ္ ခ္ ။နမူနာၾကည့္ဖို႔ေအာက္မွာDemo Linkေလး
ကိုႏွိပ္ျပီးသြားၾကည့္ဗ်ာ။
အေရးႀကီးပါတယ္။
ေအာက္မွာ 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;
}
.mbtloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY1EJnKc1k80EMPcqWa0Ah1PMMQxzoYwiDNhWJ4GHfIOAnNajMHEmTDW-qlHrDtgDxfjp3PGMMvN8RXa8-AxU20LTfJ-tGu5z-o-HTSmn237BLf4VXFzDg7mGfJtd34J5TGyMesxSI-zot/s320/mbtloading.gif') no-repeat left center;
width: 16px;
height: 16px;
}
.viewscount {
float: right;
color: #EE5D06;
font: bold italic 14px arial;
}
.views-text {
float: left;
font: bold 12px arial;
color: #333;
}
.views-icon{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY-WJTHRzPCtB-tQdb_sm6H9SoRMFbrrrt-9BBP5UIvtWPvA6tlV_K99hDyCtEFDuF-IvE6ZvDE4OcpGHZ-xYZwK6ij6HzW5akdH-iktCApeCrDBm4grWnZrNGoJBy5B0HVx5DpdIuqI6f/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>
မၿပီးေသးဘူးကိုယ့္လူအခု<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>
ေလးထည့္ေပးလိုက္ပါ။
ဒါကေတာ့ေနာက္ဆံုးအဆင့္<head> ကိုရွာပါ။ေတြ႔ရင္သူ႔ေအာက္ကပ္ရပ္မွာ
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
ထည့္ေပးလိုက္ပါ။ၿပီးရင္ Save Templated ႏွိပ္လိုက္ပါ။
ျပီးပါၿပီဗ်ာ။
No comments:
Post a Comment