CARA MEMBUAT TOMBOL SOCIAL MEDIA STATIC PADA BLOG

Unknown

Jumat, 17 Juni 2016

Bagikan :

Tweet

Anda seringkali melihat tombol widget sosial  media yang terdapat pada pinggir template  blog dan ada pada setiap halaman. Tujuan dari pemasangan widget sosial media ini adalah untuk memudahkan pengunjung  mengklik tombol like sosial media ini. Penempatan tombol media sosial ini disamping mempermudah pengunjung, juga penempatannya tidak mengganggu pengunjung blog karena posisi media sosial ini adalah Static. Untuk menerapkan tombol sosial media ini silahkan ikuti tutorial saya dibawah ini dan semoga bisa bermanfaat buat Sobat blogger semua.

Langkah-langkah penerapan Widget Media Sosial tersebut  adalah Sbb:

1. Masuk ke akun Blogger Sobat

2. Pilih Tata Letak

3. Add Gadget

4. Klik HTML/Java Script

5. Copas Code Script dibawah ini 

6. Klik Save.


Silahkan Copas Script Code dibawah ini :

<!--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='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='fb'><a name="fb_share" type="box_count" href="#"></a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div></div>

Tag : Tutorial