Membuat Tombol Facebook, Twitter,
Google Plus Melayang di Samping-Mungkin
agak lama saya membaut postingan baru. Ini tidak lepas karena banyaknya juga
rutinitas di dunia nyata. Hehehe. Tidak selamanya hidup berada di dunia maya,
dunia nyata juga butuh perhatian.
Membuat Tombol Facebook, Twitter Melayang di Samping,
adalah judul dari postingan saya yang ingin saya share kepada Anda. Walaupun saya tahu ini postingan atau tutorial yang sudah umum Anda dapatkan di
blog-blog yang sejenis dengan blog saya, tetapi bagi yang belum tahu caranya
buat hal demikian dapat membantu Anda, minimal Anda tahu dan juga mau share
kepada yang lain.
Menurut saya, tombol share atau like facebook di blog itu penting, juga tidak kalah penting dengan tombol share ke twitter, tombol follow atau mengikuti di Account Google Plus tambahan lain seperti di StumbelUpon dan Digg, ini penting agar menambah pengunjung bagi blog Anda. Anda dapat membayangkan sendiri, jika postingan Anda banyak yang like dan share di berbagai macam social media, berapa kira-kira pengunjung baru terhadap postingan blog Anda.
Berkut saya sajikan buat Anda
tutorial blog bagaimana cara membuat tombol facebook, twitter, Google plus,
StumbleUpon dan Digg melayang di samping blog Anda.
1. Seperti biasa, Anda log in dulu lah ke blog Anda.
2. Setelah masuk, langsung tuju saja
bagian Tata Letak
3. Tambahkan Gadget
(di bagian apa saja), kemudian tambah HTML/Javascript
4. Copy kode HTML berikut :
<!--SideBar Floating Share
Buttons Code Start-->
<style>
#pageshare {position:fixed;
bottom:15%; left: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="Share
This With Your Friends">
<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='fb'><a name="fb_share" type="box_count"
href="http://timikaonlineshop.blogspot.com/"></a><script
src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript"></script>
</div></div>
Atau Copy/paste Skript dibawah ini :
<div class="addthis_bar addthis_bar_vertical
addthis_bar_large" style="background:#FFFFFF; border: 0px solid
#000000; top:120px;left:80px;"><div class="addthis_toolbox
addthis_default_style"><span><a
class="addthis_button_facebook_like"
fb:like:layout="box_count"></a></span><span><a
class="addthis_button_tweet"
tw:count="vertical"></a></span><span><a
class="addthis_button_google_plusone"
g:plusone:size="tall"></a></span><span><a
class="addthis_counter"></a></span><span><div
style='border: 0px; padding: 0px; background-color: none; text-align: center; font-size:9px;'>
<a href='softsharest.blogspot.com/2012/11/cara-membuat-tombol-share-button.html'
target='_blank'>Get
Widget</a></div></span></div></div> <script
type="text/javascript"
src="http://s7.addthis.com/js/300/addthis_widget.js"></script>
5. Jika
sudah, klik Save, kmudian lihat dulu di pratinjau untuk melihat, apakah
tutorial ini berhasil Anda lakukan. Mudahkan, semoga bermanfaat dan berhasil.
