Solusi Membuat Tombol Google +1, Twitter, dan Facebook Valid HTML5
Membuat Tombol Google +1, Twitter, dan Facebook Valid HTML5 – Memasang tombol share social media seperti Google +1, Twitter, dan Facebook di bawah postingan memang sangat membantu untuk kepopularitasan artikel kita, meski cara ini tidak secara keseluruhan akan berhasil menjadi populer. Karena tergantung dari pengunjung atau pembaca blog itu sendiri, mau menekan tombol share ini atau tidak. Cara memasang tombol social media seperti Google Plus, Share Twitter, dan Facebook Like Button memang sudah sangat banyak dibagikan oleh para Blogger, namun kali ini saya akan membagikannya secara Valid HTML5. Sebelumnya saya pernah membagikan Facebook Like Box Button dan Facebook Follow Button dan kedua cara itu sudah termasuk valid html5 dan tidak akan menimbulkan error ketika memvalidasi html5 pada blog Anda. Lalu bagaimana cara membuat tombol google plus +1, twitter dan facebook valid html5 pada blog? Silahkan baca tutorialnya dibawah ini :
1. Kode Script Google Plus HTML5
<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>
2. Kode Script Twitter Share Valid HTML5
<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'/>
3. Kode Script Facebook Like Valid HTML5
<div class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='90' expr:data-href='data:post.url'/>
Lalu simpan kode script berikut 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/id_ID/all.js#xfbml=1&appId=352634211479923";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
Cara Pemasangan :
1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode <data:post.body/>
4. Lalu paste semua kode ke 1-3 tepat dibawah kode <data:post.body/>
5. Jika sudah, cari kode <body>
6. Paste kode ke 4 tepat dibawah kode <body>
7. Jika sudah, klik Simpan Template
1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode <data:post.body/>
4. Lalu paste semua kode ke 1-3 tepat dibawah kode <data:post.body/>
5. Jika sudah, cari kode <body>
6. Paste kode ke 4 tepat dibawah kode <body>
7. Jika sudah, klik Simpan Template
Catatan :
Biasanya kode <data:post.body/> lebih dari 1 dan kemungkinan ada 3 kode tersebut, jika tidak bisa di kode pertama, silahkan di coba di kode kedua atau ke tiga.
Biasanya kode <data:post.body/> lebih dari 1 dan kemungkinan ada 3 kode tersebut, jika tidak bisa di kode pertama, silahkan di coba di kode kedua atau ke tiga.
0 comments:
Post a Comment