Cara membuat tombol Share di bawah artikel

Portal Tricks - Cara membuat tombol Share di bawah artikel

Tombol “share” adalah tombol-tombol yang apabila dipencet akan otomatis membagikan artikel terkait ke media sosial. Tombol tersebut dirasa sangat penting, sebab saat ini ada jutaan pengguna media sosial yang bisa menjadi target dari postingan blog kita. Apabila artikel yang kita bagikan menarik, maka bukan tidak mungkin ada banyak orang yang membagikan kiriman kita. Maka secara tidak langsung akan menyebabkan banyak klik mengarah ke blog kita. 

Ada banyak media sosial yang bisa kita gunakan untuk share artikel, diantaranya facebook, twitter, google+, linkedin, technorati, digg, dan lintasme. Pengguna media sosial tersebut tentu sangat banyak jumlahnya, oleh sebab itu, rugi jika kita tidak memasang tombol share yang cantik ini.

Oiya, sebenarnya tanpa memasang tombol share ini, sebenarnya blogger juga sudah menyediakan widget tombol share, namun apa daya karena tombol share default blogger tersebut tidak valid HTML5 jadi ada baiknya apabila kita modifikasi agar tombol share yang terletak di bawah posting blog agar bisa lolos dari validator W3C dan bisa valid HTML5. Untuk membuat tombol share ini hanya menggunakan CSS saja tanpa menggunakan gambar, sehingga tampilan dari tombol share ini lebih sederhana dan minimalis dengan di sertai warna-warna yang menarik. Untuk memasang tombol share di bawah posting blog juga cukup mudah, hanya dengan menambahkan sedikit kode saja yang terdapat dibawah ke dalam Edit HTML template blog maka hasilnya seperti yang tertera pada contoh gambar.

Oke langsung saja bos kita simak tutorial berikut:

Cara membuat tombol Share di bawah artikel agar valid HTML5 dan full color.

1. Login ke akun blogger kamu

2. Masuk ke Template lalu pilih Edit HTML.
3. Copy kode berikut ini, kemudian letakkan di atas kode ]]></b:skin>

.widgetshare {font:bold 12px/20px Tahoma !important; background: #333;border: 1px solid #444; padding: 5px 4px; color: #fff !important; margin-top: 10px;}

.widgetshare a{font:bold 12px/20px Tahoma !important; text-decoration: none !important; padding: 5px 4px; color: #fff !important; border: 1px solid #222; transition: all 1s ease;}

.widgetshare a:hover {box-shadow: 0 0 5px #00ff00; border: 1px solid #e9fbe9;}

.fcbok { background: #3B5999; }

.twitt { background: #01BBF6; }

.gplus { background: #D54135; }

.digg { background: #5b88af; }

.lkdin { background: #005a87; }

.tchno { background: #008000; }

.ltsme { background: #fb8938; }

4. Belum selesai bos, selanjutnya copy kode berikut, lalu letakkan di bawah kode 
<data:post.body/> atau bisa juga <div class='post-footer'>

<div class='widgetshare'>

Share artikel ke:

<a class='fcbok' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'>Facebook</a>

<a class='twitt' expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Twitter</a>

<a class='gplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Google+</a>

<a class='lkdin' expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Linkedin</a>

<a class='tchno' expr:href='&quot;http://technorati.com/faves?sub=addfavbtn&amp;add=&quot; + data:post.url' rel='nofollow' target='_blank'>Technorati</a>

<a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Digg</a>

<script>

//<![CDATA[

var uri = window.location.href;

var ttle = document.title;

document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' class='ltsme'>Lintasme</a>");

//]]>

</script>

</div>

5. Langkah terakhir tinggal Simpan template lalu lihat hasilnya.

Oke bos, demikianlah cara membuat tombol Share di bawah artikel yang keren dan cantik full colour. Tapi perlu diperhatikan dalam langkah pemasangannya, biasanya didalam template blog terdapat beberapa kode <data:post.body/> dan <div class='post-footer'> jadi tergantung sama template yang kamu gunakan. []