Membuat Tombol Share dibawah posting dan Valid HTML5 - Setelah Kemarin saya berbagi tombol share yang valid HTML5 selanjutnya saya akan memberikan tutorial cara menaruh tombol share di tepat bawah posting.
1. Cari kode berikut lalu letakan di atas kode ]]></b:skin> atau </style>
2. Cari Kode <body> (Jika tag body berbeda intinya codenya seperti ini <body ......> ) lalu copy dan pastekan kode berikut ini:
3. Cari kode <data:post.body/> atau bisa juga <div class='post-footer'> lalu copy dan pastekan kode berikut ini :
Nah itu dia cara membuat atau menampilkan tombol share tepat dibawah posting pada blogger sekian ,, salam labeltutorialcom
Demonya ada pada gambar :
Langkah-langkahnya :
1. Cari kode berikut lalu letakan di atas kode ]]></b:skin> atau </style>
/*SHARENYA LTB*/
.share-post {
background: #f6ebc1;
padding: 12px;
border-bottom: 5px solid #ecd57e;
position: relative;
}
2. Cari Kode <body> (Jika tag body berbeda intinya codenya seperti ini <body ......> ) lalu copy dan pastekan kode berikut ini:
<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/id_ID/all.js#xfbml=1&appId=352634211479923";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
3. Cari kode <data:post.body/> atau bisa juga <div class='post-footer'> lalu copy dan pastekan kode berikut ini :
<div class='share-post'>
<span style='float:left;font-size:16px;color: black; padding-right:15px'> Share Artikel :</span>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'/>
<script type='text/javascript'>
window.___gcfg = {lang: 'id'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<div class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='90' expr:data-href='data:post.url'/>
</div>
Info :
Jika sobat telah memasang script facebook dibawah tag body lewati saja langkah nomor 2, dan Kenapa harus menaruh kode script pada tag <body> ? karna untuk menghindari menggunakan iframe karna jika kita menggunakan iframe bisa kurang bagus pada SEO dan bisa saja menggunakan iframe tanpa menambahkan script dibawah kode tag <body> silahkan hapus script dibawah kode tag <body> (langkah nomor 2) kemudia selanjutnya ganti kode (tahap nomor 3) :
dengan kode dibawah ini :
Jika sobat telah memasang script facebook dibawah tag body lewati saja langkah nomor 2, dan Kenapa harus menaruh kode script pada tag <body> ? karna untuk menghindari menggunakan iframe karna jika kita menggunakan iframe bisa kurang bagus pada SEO dan bisa saja menggunakan iframe tanpa menambahkan script dibawah kode tag <body> silahkan hapus script dibawah kode tag <body> (langkah nomor 2) kemudia selanjutnya ganti kode (tahap nomor 3) :
<div class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='90' expr:data-href='data:post.url'/>
<iframe expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21"' style='border:none; overflow:hidden; width:90px; height:21px;'/>
Nah itu dia cara membuat atau menampilkan tombol share tepat dibawah posting pada blogger sekian ,, salam labeltutorialcom
