Memasang Simple Share Button Responsif Untuk Blog

Lalu lintas yang ramai pada blog yaitu harapan semua blogger. kemudian bagaimana Tutorial menciptakan traffik blog meningkat? Selain artikel yang berkualitas dan backlink, kiprahan lalu lintas dari sosial media juga memiliki kiprah yang sangat vital. Bagi seorang blogger yang gres saja terjun di dunia per-blogan ini tidak akan langsung mendapatkan pengunjung organik begitu saja. Apa itu pengunjung organik? Pengunjung organik ialah pengunjung yang datang langsung dari Mesin Pencari.

Yap, sosial media akan menjadi pilihan lain sebelum para pengunjung blog tiba dari google, yahoo ataupu mesin pencari lainnya. Untuk itu anda memerlukan apa itu yang namanya “Share Button”

Share Button atau juka di terjemahkan dalam bahasa indonesi adalah Tombol Bagikan. Fungsi dari tombol bagikan ini ialah untuk membagikan/share artikel anda ke sosial media sehingga artikel anda akan dibaca pengunjung yang melihat artikel anda di sosial media.

Sayangnya dikala ini banyak sekali Share Button yang ada di Internet tidak Responsif. Sehingga share button yang dibuka dengan kiprahgkat lain akan hancur atau memiliki bentuk yang berbeda.
Selain itu, banyak juga share button yang tidak valid HTML.

Untuk itu, akan saya bagikan share button yang Super Simple dan Responsif sehingga akan menyesuaikan jikalau dibuka dengan berbeda perangkat selain itu, tentunya juga valid HTML.
Berikut ialah tampilan Share button yang akan aku bagikan.
Memasang Simple Share Button Responsif Untuk Blog
Kenapa saya menentukan Facebook, Twitter dan Google+? Tentunya karena ketiga sosial media ini mempunyai pengguna terbanyak sehingga akan memaksimalkan artikel yang ingin anda share untuk menerima pembaca.

Langsung saja, berikut adalah Tutorial memasang Share Button keren ini pada blog anda.

1. Masuk terlebih dahulu pada blog anda.
2. Pilih hidangan Template, pada dashbor, kemudian Klik “Edit HTML”

Memasang Simple Share Button Responsif Untuk Blog

3. Masukkan isyarat dibawah ini tepat di atas ]]></b:skin>
* Share Button */
#button-sharedisplay:block;text-align:center;margin: 5px 0 0;padding: 5px 0 0;
#button-share a color:#fff;position: relative;display:inline-block;font: normal 13px Verdana;text-transform:capitalize;margin:5px;padding:0;border-radius:3px
#button-share a.fb background:#3b5998;padding:7px#button-share a.tw background:#01BBF6;padding:7px#button-share a.gp background:#D54135;padding:7px#button-share a.lm background:#fb8938;padding:7px#button-share a.share background:#fff;color:#000;padding:7px
4. Setelh itu cari arahan di seperti dibawah ini <data:post.body/>

  • Kurang lebih tampilannya seolah-olah dibawah ini

<b:includable id='post' var='post'>
<article class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
.....
<data:post.body/>
.....
 </article>
</b:includable>
5. bila sudah ketemu, letakkan script HTML ini di atas instruksi tersebut bila anda ingin posisi share button di atas artikel atau dibawah jikalau anda ingin posisi share button di bawah artikel.
<div id='button-share'>
<span style='float:left;margin:10px 12px 40px 0px;font-weight:bold'>SHARE ON:</span>
<a class='fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share on Facebook'>Facebook</a>
<a class='tw' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' sasaran='_blank' title='Share on Twitter'>Twitter</a>
<a class='gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' sasaran='_blank' title='Share on Google+'>Google+</a></div>
6. Simpan template dan lihat akhirnya.

NOTE:
Jika anda ingin menggan ti Share Button usang anda, anda cukup menghapus script HTML pada kkajk dan menggantinya dengan isyarat HTML diatas.

Baca juga artike Apakah Ganti Template dapat membuat Blog Turun? biar pengetahuan anda perihal blog semakin bertambah. Selamat mencoba dan semoga bermanfaat.