Tutorial Membuat Tombol Share pada Postingan/Artikel Blog
Untuk meraih banyak visitor pada blog kita ada banyak cara untuk meraihnya, salah satunya dengan men-share hasil postingan kita ke jejaring sosial yang biasanya dilakukan oleh pengunjung blog kita apa mereka menyukai artikel yang mereka baca.
Nah, pada kesempatan ini saya akan menulis bagaimana cara memasang tombol share facebook, twitter pada halaman postingan blog kita. Untuk mempersingkat artikel langsung saja ikuti langkah-langkahnya berikut ini :
1. Login akun blogger Anda.
2. Pilih Template > Edit HTML > letakkan kursor pada area kode HTML.
3. Cari kode <data:post.body/> dengan menggunakan Ctrl + F.
4. Letakkan kode berikut ini dibawah kode <data:post.body/> jika ingin memasang tombol share dibawah postingan atau letakkan diatas <data:post.body/> jika ingin memasang diatas postingan.
<b:if cond='data:blog.pageType == "item"'>
<div style='text-align: left; font: 11px Arial; color: #000; margin: 20px auto; padding: 10px 5px;width: 600px;'>
<div style='float:left;padding:1px;margin-right:15px;font:bold 13px Arial;'>
<strong>Share this article</strong> :
</div>
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
<a class='addthis_button_pinterest_pinit'/>
<a class='addthis_counter addthis_pill_style'/>
</div>
<script type='text/javascript'>var addthis_config = {"data_track_addressbar":true};</script>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4fea027b6493fe59' type='text/javascript'/>
<!-- AddThis Button END -->
</div>
</b:if>
<div style='text-align: left; font: 11px Arial; color: #000; margin: 20px auto; padding: 10px 5px;width: 600px;'>
<div style='float:left;padding:1px;margin-right:15px;font:bold 13px Arial;'>
<strong>Share this article</strong> :
</div>
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
<a class='addthis_button_pinterest_pinit'/>
<a class='addthis_counter addthis_pill_style'/>
</div>
<script type='text/javascript'>var addthis_config = {"data_track_addressbar":true};</script>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4fea027b6493fe59' type='text/javascript'/>
<!-- AddThis Button END -->
</div>
</b:if>
5. Kemudian terakhir Simpan Template.
Ket. Apabila template telah disimpan dan kita reload tetap tidak muncul tombol share, maka ulangi langkah tersebut, :
1. Cari kode yang kita letakkan tadi lalu hapus, atau dengan cara CTRL+Z saja.
2. Kembali CTRL+F cari <data:post.body/> lalu tekan enter, nanti akan muncul beberapa kode tersebut dan silahkan anda coba satu persatu meletakkan kode Tombol Share diatas tepat dibawah kode <data:post.body/> . Jika belum berhasil letakkan pada kode <data:post.body/> lainnya.
3. Cara ini memang sedikit ribet tetapi pasti berhasil karena saya telah mencoba di beberapa Blog.
Oke demikian postingan Tutorial Membuat Tombol Share pada Postingan/Artikel Blog, terima kasih telah menyimak.
Oke demikian postingan Tutorial Membuat Tombol Share pada Postingan/Artikel Blog, terima kasih telah menyimak.
Tidak ada komentar: