Loading...

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 melayang
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.

/fa-thumbs-up/ RELATED$type=list-tab$hide=home

Name

Android,5,Blogging,108,CorelDRAW,14,Desain Grafis,24,Facebook,22,Foto Sampul,34,Gambar,54,Info,18,Internet,31,Kata Mutiara,26,Kesehatan,31,Komputer,25,Microsoft Word,12,Office,12,PhotoScape,10,Resep,6,SEO,10,Sosial media,21,Tutorial,36,Wallpaper,20,
ltr
item
Bangiz: Cara Membuat Tombol Share Sosial Media Melayang Dengan HTML
Cara Membuat Tombol Share Sosial Media Melayang Dengan HTML
Cara Membuat Tombol Share keren di blogger, Membuat Tombol Share Melayang, Tombol Share Melayang di Kanan, Tombol Share Melayang di Kiri, membuatTombol Share dengan HTML, bikin tombol Share unik terbaru buat blogspot..
https://1.bp.blogspot.com/-RLvoY9jDWVc/UX9JZO95vhI/AAAAAAAADyw/1qEEtJzdvRg/s320/share+melayang.jpg
https://1.bp.blogspot.com/-RLvoY9jDWVc/UX9JZO95vhI/AAAAAAAADyw/1qEEtJzdvRg/s72-c/share+melayang.jpg
Bangiz
https://bangiz.blogspot.com/2013/04/Tombol-Share.html
https://bangiz.blogspot.com/
https://bangiz.blogspot.com/
https://bangiz.blogspot.com/2013/04/Tombol-Share.html
true
5131493432912556385
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy