Pada kesempatan ini aku akan ngebahas apa itu widget floating share melayang. Floating yaitu sebuah sajian yang posisinya absolute dan selalu tampil di tengah-tengah atau melayang, Floating ini juga terkadang mengikuti scroll dari browser sesuai dengan variasinya. Kaprikornus yang bakal kita jadiin floating yaitu Widget Share (Twitter, Facebook, dan Google +1).
Nanti di blogmu bakal nampak ibarat gambar dibawah:
Nanti di blogmu bakal nampak ibarat gambar dibawah:
Langkah-langkah pemasangan sebagai berikut:
- Seperti biasa kau harus Login ke dashboard blogger kamu.
- Pilih Rancangan > Elemen Laman > Add gadget/Tambah Gadget > Pilih yang HTML/JavaScript.
- Kalo yang baru Tata Letak > Add gadget/Tambah Gadget > Pilih yang HTML/JavaScript.
- Copy script dibawah ini, Lalu pastekan pada gadget
<style> #floatdiv { position:fixed; bottom:15%; margin-left:-70px; z-index:10; float:left; padding-bottom:2px; } #mbtsidebar { background:#fff; border-top:1px solid #ddd; border-left:1px solid #ddd; border-bottom:1px solid #ddd; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding-left:5px; width:60px; margin:0 0 0 5px; } .fb_share_count_top {width:52px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-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="floatdiv"> <div id="mbtsidebar"> <table cellpadding="1px" cellspacing="0"> <tr> <td style="padding:5px 0px 0px 0;"><a href="https://twitter.com/share" class="twitter-share-button" data-via="NAMA TWITTER KAMU" data-lang="en" data-related="anywhereTheJavascriptAPI" data-count="vertical">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </td> </tr> <tr> <td style="padding:5px 0 2px 0;"> <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </td> </tr> <tr> <td style=" padding:5px 0px 0px 0px;"> <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script> <g:plusone size="Tall" expr:href="data:post.url"> </g:plusone></td> </tr> <tr> <td> <p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#000;" href="harus di isi/search?q=widget-floating-share-melayang"><blink>Get This</blink></a></p></td></tr></table></div></div>
Keterangan:
- Untuk teks yang berwarna merah, silakan ubah/ganti sesuai cita-cita kamu.
-70px : Ini yaitu ukuran, dimana biasanya menyesuaikan lebar konten. jadi kau dapat mengubahnya apabila widget floating share melayang ini malah menutupi postingan. contohnya dari yang -70px menjadi -110px. pokoknya semoga posisi widget ini pas.
NAMA TWITTER KAMU : Ubah pake nama twitter kau atau twitter blog kam. - Setelah dipaste, kemudian kau save/simpan tanpa judul.
- Dan lihat hasilnya.