Kalo kemarin saya posting cara pasang tombol share floating slider-melayang, sekarang akan saya bahas cara pasang widget floating tombol share-berbagi via media sosial di samping kiri atau samping kanan halaman blog, cara ini adalah cara paling mudah dan sederhana seperti anda biasa memasang atau menambah kode html/script di bagian sidebar.
Ok, langsung aja login ke blog anda, Design > Page Elements > Add a Gadget / HTML-Javascript.
Kemudian copy kode di bawah ini, dan simpan di bagian manapun yang anda inginkan, Widget floating share button ini akan tampil di samping kiri atau kanan blog anda seperti yang saya gunakan sekarang.
Terlebih dulu tentu anda harus sisipkan kode tombol media sosial anda di bagian yang berwarna merah, anda bisa menambah tombol berapapun yang anda butuhkan.
Update : Maaf, anda bisa Copy kodenya disini
Untuk merubah posisi widget floating, anda bisa ubah huruf berwarna biru.
Kode yang anda lihat sekarang untuk di samping kiri tengah, kalo mau di samping kanan ganti aja dengan right.
Mungkin anda juga ingin menyesuaikan warna latar widget floating dengan template blog, silahkan ubah kode warna yang berwarna hijau. Gunakan HTML Color Codes
Setelah beres mengedit atau menambah kode nya, lalu simpan/Save. Dan lihat hasilnya, mudah, cepat dan sederhana kan??
Oke, cara ini memang cara pasang widget floating share button media sosial paling mudah cepat dan sederhana, tapi hasilnya sangat baik. Selamat mencoba.
Widget Floating Share Button |
Ok, langsung aja login ke blog anda, Design > Page Elements > Add a Gadget / HTML-Javascript.
Kemudian copy kode di bawah ini, dan simpan di bagian manapun yang anda inginkan, Widget floating share button ini akan tampil di samping kiri atau kanan blog anda seperti yang saya gunakan sekarang.
Terlebih dulu tentu anda harus sisipkan kode tombol media sosial anda di bagian yang berwarna merah, anda bisa menambah tombol berapapun yang anda butuhkan.
<style> #floatingbuttons { background: #aaa; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f2f2f2), color-stop(1, #aaa)); background: -moz-linear-gradient(top, #f2f2f2, #aaa); border: 1px solid #808080; color: #fff; float: left; font-weight: normal; font-size: 13px; padding:0 0 3px 0; position: fixed; text-decoration: none; bottom:30%; left:0; z-index:10; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); } #floatingbuttons .floatbutton { float:left; clear:both; margin:5px 4px 0 4px; } .addbuttons { clear:both; color:#fff; font-size:9px; text-align:center; padding-top:3px; font-family:tahoma, verdana, helvetica, arial, sans-serif; font-weight:bold; line-height:1.4; } .addbuttons a { color:#fff; background:none; } .addbuttons a:hover { color:#fff; background:none; } .sharebuttons { font-size:8px; } </style> <div id='floatingbuttons' title="Share this post!">
<div class='floatbutton' id='facebook'> Kode tombol Like Facbook Anda </div>
<div class='floatbutton' id='sharefb'> Kode tombol Share Facebook anda </div>
<div class='floatbutton' id='twitter'> Kode tombol Twitter Anda </div>
<div class='floatbutton' id='google+1'>
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'id'}
</script>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall"></g:plusone> </div> </div>
Update : Maaf, anda bisa Copy kodenya disini
Untuk merubah posisi widget floating, anda bisa ubah huruf berwarna biru.
Kode yang anda lihat sekarang untuk di samping kiri tengah, kalo mau di samping kanan ganti aja dengan right.
Mungkin anda juga ingin menyesuaikan warna latar widget floating dengan template blog, silahkan ubah kode warna yang berwarna hijau. Gunakan HTML Color Codes
Setelah beres mengedit atau menambah kode nya, lalu simpan/Save. Dan lihat hasilnya, mudah, cepat dan sederhana kan??
Oke, cara ini memang cara pasang widget floating share button media sosial paling mudah cepat dan sederhana, tapi hasilnya sangat baik. Selamat mencoba.