Facebook like dan View Counter Box di Posting Blogger
Berikut cara membuat Facebook like dan posts view counter di postingan blog
Pasang script jquery diatas kode </head> bila code ini sudah ada bisa dilewati saja
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
kode CSS pasang diatas kode </head> juga
<style type='text/css'>
/* FB and View count */
#tzbl{clear:both;height:35px;background-color:#373737;text-align:right;line-height:35px;width:100%;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOamzfrltNMlKVOoHVbsj9YDgO9KELkRT00MxL3qd0TGfC7xPd5OOElndypLRtVQtlaL2Wh3z4QHUDmQDMbB_G-nxV1GVr3GjteQazD5goDOs6mG-d8h4txsI8rCj2gFmnsNW_Bj671f0/s1600/nen_watch.png);margin-top:5px;margin-bottom:5px}
#tzbl .fb-like{float:left;background-color:#292929;line-height:21px;margin:0 5px;border-radius:4px;-moz-border-radius:50px;box-shadow:0 1px 0 0 #454545;cursor:pointer;margin-top:4px;padding:3px}
.viewcount{color:#c1bebe;cursor:default;font-size: 12px;transition:all .3s ease-out;float:right;padding-right: 10px;}.viewcount .loading{display:inline-block;width:20px;height:20px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgko0UlhQS5VKgLI-CAzVgvWv-XBYEEf1CkFRC_tlcBbbEJFdYwkTnRbAKgdnezu5uLXXfg4chxfWYzX9qd-FqAYOH6kYOKg831e3VFjae1GbZzi67KCtAbb3VawbWKxV5EViU4jxoVCrQi/s1600/loader.gif) no-repeat 0 0;vertical-align:middle}
</style>
Facebook script dipasang dibawah kode <body>
<div id='fb-root'/>
<script>//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_EN/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]></script>
<div class='clear'/>
View counter cript dipasang diatas kode </body>
<script src='//cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// View counter
$(function(){var a=$(".viewcount");a.each(function(){var n=$(this).attr("id"),e=new Firebase("https://amber-heat-9068.firebaseio.com/"+n);e.once("value",function(n){var i=n.val();null==i?i=1:"/"!=window.location.pathname&&i++,e.set(i),a.children("span").removeClass("loading").html(i)})})});
//]]>
</script>
sekarang cari kode <div class='post-header-line-1'> yang berada dibawah kode <b:includable id='post' var='post'> dan pasang kode berikut dan sesuaikan seperti kode dibawah
<div class='post-header-line-1'>
<b:if cond='data:blog.pageType == "item"'>
<div id='tzbl'>
<div class='fb-like' data-action='like' data-colorscheme='light' data-layout='button_count' data-send='true' data-show-faces='true' expr:data-href='data:post.url'/>
<span class='viewcount' expr:id='"obs-" + data:post.id'>Views: <span class='loading'/></span>
</div>
</b:if>
</div>
Demo bisa dilihat dibagian atas postingan ini
Tidak ada komentar: