Recents in Beach

header ads

Cara membuat tombol share stylish dibawah postingan


Cara membuat tombol share stylish dibawah postinganSetiap blogger ingin meningkatkan traffic blog-nya. Mereka gunakan segala cara untuk meningkatkan traffic blog mereka danjejaring sosial juga merupakan salah satu cara terbaik untuk meningkatkan traffik blog kita. Tahukah anda bahwa penduduk atau orang terbanyak didunia berada di negara mana? Jawabannya: negara pertama adalah negara Cina dan selanjutnya disusul oleh negara Facebook..? loh ko Facebook?. Ya iyalah, setiap orang baik tukang becak, tukang las, dan sebagainya sekarang sudah mempunyai facebooknya sendiri. orang yang terdaftar sebagai pengguna facebook melebihi penduduk asli suatu negara. Bahkan Indonesia juga kalah dengan penduduk facebook. haha

Jadi, kesimpulannya, jika kita menshare atau memberitahukan orang-orang di facebook tentang artikel atau posting blog kita. Itu akan menjadikan sebuah keuntungan bagi blog kita. Kalo nggak salah twitter ada di posisi ke 5. Sudah sudah jangan banyak cingcong lagi, mari kita menuju ke topik pembahasan. Setelah sebelumnya saya memposting tentang Cara Membuat Daftar Isi otomatis dengan desain Keren. Sekarang saya ingin menshare tentang  cara membuat tombol share stylish dibawah postingan. Kalo anda mengikuti tutorial dibawah dengan baik dan benar, nanti hasil screenshotnya akan mirip seperti gambar dibawah ini:

widget-sharing-stylish

Bagaimana menurut anda? baguskah atau biasa-biasa saja? Didalam widget ini terdapat beberapa tombol share seperti Facebook share button, Facebook like buttton, Tweet button, Pinterest button, Digg button, Stumbleupon button. Serta disertai jumlah orang yang mensharing artikel kita. Jika anda ingin memasangnya anda dapat mengikuti step by stepnya dibawah ini:

Pembahasan topik

1. Pertama-tama masuk dulu kedalam akun blogger anda
2. Selanjutnya masuk ke-tab Template .
3. Lalu Edit HTML.
4. Cari kode </head> dengan menekan tombol CTRL + F.
5. Simpan kode dibawah ini tepat diatas kode </head> 
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type='text/javascript'>stLight.options({onhover:false , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
6. Lalu cari kode <data:post.body/> dengan menekan tombol CTRL + F.
7. Simpan kode dibawah ini tepat dibawah kode <data:post.body/> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.doncaprio-share-buttons{-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;border:1px solid #BBBBBB;background-color:#FFFFFF;-webkit-box-shadow: #B3B3B3 5px 5px 5px;-moz-box-shadow: #B3B3B3 5px 5px 5px;box-shadow: #B3B3B3 5px 5px 5px;padding: 5px;margin: 10px;}
</style>
<p align='center' class='doncaprio-share-buttons'>
<span class='st_facebook_hcount' displayText='Facebook'/>
<span class='st_plusone_hcount' displayText='Google +1'/>
<span class='st_twitter_hcount' displayText='Tweet'/>
<span class='st_pinterest_hcount' displayText='Pinterest'/>
<span class='st_digg_hcount' displayText='Digg'/>
<span class='st_stumbleupon_hcount' displayText='StumbleUpon'/>
<span class='st_fblike_hcount' displayText='Facebook Like'/>
</p></b:if>

Note
  • Huruf yang berlatar kuning adalah kode pemanggil tombol share, anda dapat menghapus tombol share yang tdak diinginkan. Anda tinggal membaca kata terakhirnya seperti “ facebook”  atau “ tweet” atau “ pinterest”.
  • Anda akan menemukan banyak kode yang mirip seperti <data:post.body/>.      Satu-satunya cara untuk mengetahui yang mana yang benar adalah dengan mencoba kode tersebut satu-satu.
8. Langkah terakhir adalah SAVE Your Template.. :) now look your post, more amazing

Post a Comment

0 Comments