Cara Membuat Tombol Share Sosial Media Melayang Dengan HTML

Bangiz - Hidup itu perlu perubahan sob, salah satu caranya yaitu kita harus bisa mengikuti zaman. Saat ini zamannya teknologi, jadi kita juga harus tahu hal-hal apa yang terbaru. Karena kalau kita tidak bisa mengikuti maka kita akan ketinggalan zaman.

Minimalnya kita tahu dulu internet, karena dengan berinternet kita bisa mencari informasi atau berita yang bukan hanya dari dalam negeri tapi juga bersifat global tentunya. Apalagi sekarang banyaknya sosial media yang memudahkan kita untuk berkomunikasi di dunia maya dengan orang lain.

Tombol Share Sosial Media

Daripada bicaranya lebih mendalam, langsung saja pada pembahasannya yaitu tentang membuat tombol share sosial media melayang yang ada di blog saya ini. Berikut cara-caranya:

1. Masuk dasbor Blogger > Pilih Blog > Tata Letak.

2. Pilih Tambahkan Gadget > HTML/Javascript.

3. Di sini ada dua pilihan kode, yaitu untuk tema berlatar gelap dan terang. Untuk latar terang atau putih gunakan kode bertama, sedangkan untuk tema dengan latar gelap sebaiknya gunakan kode kedua. Copy paste kode pada kolom konten.

Kode untuk tema terang:

<!–bangiz-tombol sosial media melayang–>
<style>
#pageshare {position:fixed; bottom:15%; right:30px; float:right; border: 0px solid black; border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#eff3fa;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:3px 3px 0 3px;}
.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='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>
<br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://bangiz.blogspot.com/search/label/Blogging" target="blank"><font color="black">[Get Other]<font></font></font></a></div></div>
<!– bangiz-tombol sosial media melayang –></!–></!–bangiz-tombol>

Kode untuk tema gelap:

<!– bangiz-tombol sosial media melayang –>
<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="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='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>
<br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="
http://bangiz.blogspot.com/search/label/Blogging" target="blank"><font color="black">[Get Other]<font></font></font></a></div></div>
<!– bangiz-tombol sosial media melayang –>

3. Terakhir jangan lupa Simpan, lalu lihat hasilnya

Begitulah cara membuat tombol sosial media melayang dengan menggunakan kode HTML versi Bangiz. Untuk berbagi silahkan gunakan tombol jejaring sosial di bawah. Happy blogging.