DomaiNesia
› › › › › ›

Membuat Tombol Google +1, Twitter, dan Facebook Valid HTML5

Ditulis oleh 19.47.00 15 Komentar
Membuat Tombol Google +1, Twitter, dan Facebook Valid HTML5 - Ficri Pebriyana
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: &#39;id&#39;};
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[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

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.

Sekian artikel mengenai Membuat Tombol Google +1, Twitter, dan Facebook Valid HTML5. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

15 Komentar untuk "Membuat Tombol Google +1, Twitter, dan Facebook Valid HTML5"

Jika Ingin Memasukan Kode Script (CSS, HTML, JavaScript) Silahkan Gunakan Kode Dibawah ini :

1. Untuk Menyisipkan Kode Panjang Gunakan <i rel="pre">Kode Disini</i>
2. Untuk Menyisipkan Kode Pendek Gunakan <i rel="code">Kode Disini</i>
3. Untuk Menyisipkan Quote Gunakan <b rel="quote">Catatan Anda</b>
4. Untuk Menyisipkan Gambar Gunakan <i rel="image">URL Gambar</i>
5. Untuk Menyisipkan Video Gunakan <i rel="youtube">URL Video Youtube</i>

Langganan: Posting Komentar (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Fast Hosting