Cara Membuat Tombol Share Facebook Twitter Google Plus Valid HTML5

Bagi saya keberadaan tombol share sosial media yang biasanya terletak di bawah postingan cukup penting untuk mempromosikan blog kita. Meskipun sebagian besar visitor blog saya dari google tapi saya tetap menggunakan tombol ini untuk menambah visitor. Ketika ada pengunjung yang merasa artikel kita bagus atau bermanfaat, maka mereka akan membagikan ke media sosial yang pastinya akan menguntungkan blog kita. Setiap mempublikasikan artikel saya selalu share artikel ke tiga media sosial media yaitu facebook, twitter, dan google plus. O iya, Saya pernah membaca dari blog seoarang master seo, sebaiknya cek dulu di google artikel kita sudah terindex sama mbah google apa belum. Kalo belum tunggu sampai terindex baru share, kalo sudah langsung aja dibagikan. 

Tutorial ini saya dapat dari mas andes di mas-andes.blogspot.com dengan judul kombinasi CSS Button Flat UI dengan Font Awesome. Mas andes ini salah satu blogger yang membahas mengenai tutorial valid HTML5 maupun CSS3. Sebelum melakukan langkah memasang tombol share anda harus memasang font awesome di dalam template. Jika anda tidak mengerti apa itu font awesome silahkan menuju ke mas-andes.blogspot.com/2013/12/list-icon-font-awesome-dan-css-value.html. Kalo dalam template sudah ada font awesome, tidak perlu di tambah lagi. Cara pemasangan font awesome ada di langkah ke 3.

Berikut ini cara membuat tombol share valid HTML5:

1. Login dulu ke akun blogger

2. Pilih template, Edit HTML
3. Untuk pemasangan font awesome, letakkan kode berikut di atas kode </head>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

3. Langkah selanjutnya pemasangan share button, cari kode ]]></b:skin> untuk cepatnya Ctrl + F

4. Copy kode CSS berikut di bawah kode ]]></b:skin>

#button-share{background:#34495e;color:#fff;line-height:40px;padding-left:60px}
#button-share h4{font-size:18px;line-height:40px;margin:0;text-transform:uppercase;display:inline}
#button-share h4 span{background:#2c3e50}
#button-share a{position:relative;font:normal 16px/20px 'Yanone Kaffeesatz',sans-serif;color:#fff;text-transform:uppercase;padding:7px 10px 7px 50px;box-shadow:1px 1px 1px #222}
#button-share a:hover{background:#222}#button-share a:hover span{color:#222}
#button-share a span{line-height:20px;width:40px;padding:6px 0;top:0}
#button-share a span.fb{background:#2884f6}.fb{background:#1e90ff}
#button-share a span.tw{background:#45B0E3}.tw{background:#00bfff}
#button-share a span.gp{background:#e00}.gp{background:#f83124}
#button-share a span.me{background:#f39c12}.me{background:#f1c40f}

5. Cari kode <data:post.body/> 
6. Copy kode HTML berikut di bawah kode <data:post.body/> 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='button-share'>
<h4><span><i class='fa fa-external-link'/></span> Share artikel ke :</h4>
<a class='fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Facebook'><span class='fb'><i class='fa fa-facebook'/></span> Facebook</a>
<a class='tw' expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Twitter'><span class='tw'><i class='fa fa-twitter'/></span> Twitter</a>
<a class='gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Google+'><span class='gp'><i class='fa fa-google-plus'/></span> Google+</a>
<script>
//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a class='me' href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' title='Share ke Lintasme' rel='nofollow'><span class='me'><i class='fa fa-plus'></i></span> Lintasme</a>");
//]]>
</script>
</div>
</b:if>

Untuk kode <data:post.body/> tiap template berbeda-beda, biasanya ada 2 sampai empat, dicoba satu-satu saja., biasanya <data:post.body/> yang ke tiga. Seperti biasa sebelum melakukan langkah-langkah di atas, jangan lupa backup template dulu ya.

Sekian postingan kali ini dengan judul "Cara Membuat Tombol Share Facebook Twitter Google Plus Valid HTML5". Semoga berhasil. Dan jangan lupa klik tombol share sosial media di bawah ya sob. Terimakasih dan mohon maaf.

Share artikel ke :

Facebook Twitter Google+