Thursday, June 14, 2012
Merapikan Tombol Share dan Like Melayang
Tombol like akan memberikan kesan tersendiri bagi para pengunjung. Mereka akan tertarik dengan artikel di blog / web anda ketika melihat banyaknya orang lain yang suka dengan artikel yang anda tulis. Ini juga akan menari pengunjung turut serta menyukai artikel anda dengan mengklik tombol like facebook di blog / website anda.
Ada satu tombol lagi yang cukup penting untuk anda sematkan di blog / website anda, yaitu tombol share. Tombol ini akan memudahkan pengunjung untuk membagikan artikel yang disukainya kepada sahabat-sahabatnya melalui jejaring social semacam facebook, twitter, google plus, berbagi dengan e-mail, yahoo, dan lainnya. Seringkali saya menjumpai blog yang terlihat begitu wah, namun ada hal yang mengganggu. Kadang pemasangan tombol like atau share ini menutupi bagian dari halaman utama yang seharusnya mudah dibaca. Sehingga, pengunjung kesulitan untuk membaca artikel yang ada disana dan jadi tidak menarik lagi walaupun sebenarnya itu artikel yang sangat bagus.
Sobat, kali ini saya akan memberikan trik agar tombol like dan share itu menarik dan mudah dilihat. Tentu saja tidak menutupi bagian dari halaman posting atau widget yang memang seharusnya nampak. Salah satu hal yang dapat dilakukan adalah membuat tombol like ataupun share itu melayang, ketika digulir ke atas ataupun ke bawah tetap nampak pada posisinya. Dengan demikian akan memudahkan pengunjung untuk menyatakan kesukaannya dengan mengklik tombol like/suka facebook ataupun membagikan/ share ke status facebook, tweet, google plus dan lainnya.
Ada beberapa hal yang harus diketahui dalam membuat tombol like ataupun share. Sebenarnya ini bisa anda dapatkan dari site Addthis dot com, namun di sini akan sedikit saya variasikan agar lebih menarik.
Beberapa hal yang perlu anda ketahui sebelum saya berikan kode script untuk memasang widget tombol share dan like melayang. Berikut ini beberapa tag HTML dasar yang akan saya rangkai pada script yang bisa anda copy nanti di bagian paling akhir tutorial ini.
Tombol like facebook dengan count box:
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
Tombol Share facebook dengan count box:
<a class="addthis_button_facebook_share" fb:share:layout=box_count" href="http://www.facebook.com/sharer.php"></a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
Tombol Tweet dengan count box :
<a class="addthis_button_tweet" tw:count="vertical"></a>
Tombol Google plus dengan count box :
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
Box count untuk seluruh share button :
<a class="addthis_counter"></a>
Tombol pilihan untuk share button lainnya :
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4fd9760805d1d35c"></script>
Kemudian kita akan meletakkan tombol tersebut melayang berbentuk vertikal di pinggir kiri dari halaman, yaitu dengan menambahkan tag html sbb:
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:10px;bottom:50px;background:snow; border:5px solid silver">
...
...
</div>
Nah, dari beberapa tag HTML di atas jika digabungkan menjadi script seperti di bawah ini. Dan anda bisa langsung pake script di bawah ini, copy kemudian paste (pasang) di widget HTML pada blog anda di mana saja. Untuk pengguna blogspot, tinggal masuk ke acount anda dan add gadget - pilih gadget HTML- pasang script yang akan saya berikan di bawah ini. Posisi widget di mana saja. Dan pada bagian Widget Title tidak usah diisi, biarkan kosong saja ya.... Oke ini script yang bisa langsung anda pake...
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style"
style="left:10px;bottom:50px;background:snow; border:5px solid silver">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_facebook_share" fb:share:layout=box_count"
href="http://www.facebook.com/sharer.php"></a><script
src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
<script type="text/javascript">var addthis_config =
{"data_track_addressbar":true};</script>
<script type="text/javascript"
src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4fd9760805d1d35c"></script>
<a href="http://goo.gl/frlqh" target="_blank"><img src="http://goo.gl/paXq0" border="0" alt="Add box" /></a>
</div>
<!-- AddThis Button END -->
Keterangan :
- Mungkin saja di paling bawah akan ada tambahan Sumber: http://www.bloggtutorial4u... karena blog saya ini memang saya pasang automatisasi pasang sumber bila dicopy, dengan tujuan agar memudahkan pembaca yang mengcopy melihat sumbernya dan mudah bila akan mengunjungi site ini kembali. Nah, sebelum anda memasang sebaiknya anda paste di Notepad atau Wordpad terlebih dahulu dan hapus di bagian Sumber:... yang saya sampaikan tadi. Kemudian anda pasang scriptnya di widget HTML dengan cara yang telah saya paparkan sebelumnya.
- Pada bagian div style yang berada di bawah tulisan --AddThis Button BEGIN-- Warna merah dan biru bisa anda variasi sesuai dengan keinginan anda.
- left :10px menunjukkan posisi dari batas kiri layar, di situ saya buat 10 px agar tidak terlalu ke kiri dan tidak terlalu ke kanan. Sehingga tampak menarik dan tidak menutupi bagian utama halaman blog / web.
- bottom:50px menunjukkan jarak tombol dari batas bawah layar.
- background:snow adalah warna latar belakang tombol. Untuk kode warna bisa agan lihat pada daftar kode warna.
- border:5px solid silver adalah garis tepi dari kotak background yang melingkupi tombol. Anda bisa membuat variasi border lihat di Tutorial Style Border.
Semoga Berhasil
Salam-Admin
Info Kontes - Kompetisi Tingkat Nasional-International
Subscribe to:
Post Comments (Atom)
TIPS SEO HARI INI
Anda punya Blog? Atau website ingin meningkatkan Page Rank di Search Engine?
Klik logo-logo di bawah ini untuk melihat caranya :
8 komentar:
Mantap gan.... artikel dan social share melayang nya :).. salam dari http://putupunyablog.blogspot.com/ .
kunjungi balik....
Mirip kayak tombol share punya ane yah gan, hehehe
cuma itu penamban share lengkap dari addthis nya ya..
mantap cuy,,
salam kenal...
http://mankita.blogspot.com/2012/06/cara-buat-widget-share-melayang-di-sisi.html
thanks kunjung baliknya gan
agak mirip ya, emang awalnya dari addthis cuman saya modif dikit, biar yang mo pake mudah menyesuaikan dengan tampilan sesuai warna tema blognya dah.
wah thanks for share... bisa dijadikan inspirasi ini ^_^
from:http://jalz-cassieast.blogspot.com/
bagus gan widget sharenya, nampak lebih rapi
wow keren Mas Maru... hehe Mantep dah Mau Jadi member ah ke Blog Ini , Eh mas menurutmas Blog ane gimana ?? qq , http://Umar-kun.blogspot.com/
yup seperti blognya yang rapi..salam kenal
maknyus gan siiip bangeeet
Post a Comment
Silahkan tinggalkan komentar dan share / like halaman ini. Terima Kasih