Yang cukup membanggakan bagi para Blogger adalah kedua situs jejaring sosial ini telah memfasilitasi kepentingan tersebut dengan menyediakan berbagai macam widget yang dapat dipasang pada Blog/Web Sampeyan semua. Sebut saja beberapa widget yang disediakan oleh Facebook yang cukup membantu para penggunanya untuk memperkenalkan atau mempromosikan Web/Blog. Facebook banyak memberikan widget yang sangat bermanfaat untuk para Blogger seperti misalnya, Buton Like, Recomendation page, facebook juga menyediakan Fanpage untuk para penggunanya agar dapat mempublikasikan aktifitas Bloggingnya lewat Facebook.
Tak mau kalah dengan Facebook, situs jejaring Sosial Twitter juga melakukan hal yang sama, walaupun widget yang disediakan olehnya tak selengkap widget yang diberikan oleh Facebook. Terlepas dari kelebihan masing-masing situs jejaring sosial tersebut, yang pasti keduanya sangat membantu untuk meningkatkan jumlah pengunjung dalam sebuah Blog.
Dalam tutorial Blogger kali ini saya akan berbagi trik yaitu tentang cara membuat Button (tombol) Share Facebook dan Twitter yang dapat dipasang pada Blog Sampeyan semua. Kehebatan tombol Share kali ini tidak hanya untuk Facebook dan twitter saja, namun sudah dilengkapi dengan dengan tombol Share untuk Google+, Stumbel upon dan Digg. Dengan widget tombol share ini, artikel dapat di bagikan kepada 5 situs tersebut. So pasti artikel Sampeyan akan tersebar kemana-mana. Hebatnya lagi tampilan dari widget ini cukup menarik karena akan tetap tinggal ditempat walaupun mouse digulir keatas ataupun kebawah, jadi pengunjung Blog Sampeyan akan tetap melihat widget ini. Kalau Mau lihat demo-nya KLIK DISINI Bagaimana, hebat kan?
Berikut ini cara pemasangan Widget ini pada Blog Sampeyan.
1. Log in ke akun Blog yang Sampeyan miliki
2. Masuk Ke Dashbor ===> Pilih Tata Letak ===> Pilih Tambah Gadget ===> Pilih HTML/Java Script
3. Setelah terbuka kotak pengisian HTPL Copy kode HTML di bawah ini dan Paste-kan didalamnya.
<!--Widget Share like FB tweet google plus digg Button Melayang Start-->
<style>
#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px
0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="bagikan ke teman anda">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div><div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div><div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div><div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 8px;text-align:center;"><a href="http://www.super-gaptek.com/2012/02/cara-membuat-blog-di-blogspot.html" target="blank"><font color="blue">Cara Membuat<font></font></font></a></div></div>
<!--Widget Share like FB tweet google plus digg Button Melayang End-->
4. Setelah itu impan widget dan lihat hasilnya pada Blog Sampeyan
Untuk tambahan info Jika Sampeyan sudah memiliki tombol google + di atas atau di bawah posting Sampeyan, kemungkinan widget tersebut tidak muncul. Silakan hapus kode berwarna merah jika Sampeyan mau menghapusnya, karena mungkin bisa mempercepat loading blog.
Jika Sampeyan menggunakan template berwarna gelap, saya rekomendasikan untuk menggunakan Script di bawah ini.
<!--Widget Share Button Melayang Start-->
<style>
#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#000000;padding:0 0 2px
0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Bagikan ke teman anda">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 8px;text-align:center;"><a href="http://www.super-gaptek.com/2012/02/cara-membuat-blog-di-blogspot.html" target="blank"><font color="white">Cara Membuat<font></font></font></a></div></div>
<!--Widget Share Button Melayang End-->
Tutorial Edit HTML:
- Angka 15% adalah untuk mengatur letak tinggi posisi share button dari sisi bawah blog, Sampeyan bisa mengurangi atau menambah tergantung keinginan Sampeyan, kalau sudah cocok dengan posisi yang ada ya tidak usah dikotak-katik.
- Angka 10 pixel adalah posisi dari tepi paling kanan blog, Sampeyan dapat menambahkannya jika menghendaki posisi agak ke tengah.
- Kode border: 1px solid black, adalah ukuran ketebalan batas kotak share button dan warna batas/garis share button itu sendiri.
Oke Sohib, demikian sedikit tutorial yang dapat saya bagikan kepada Sampeyan semua. Semoga bermanfaat untuk semakin meningkatkan Blog Sampeyan.
Bagi Sohib yang berminat mengcopy artikel dengan bahasa kampungan ini untuk di reposting, mohon jangan dirubah redaksinya dan mohon juga disertakan linknya.
0 comments:
Post a Comment