Apa itu share button? Langsung aja liat demonya di Rouen's Blog. Ya, 3 tombol (Tweet, +1, dan Like) di samping kiri main-wrapper Rouen's Blog itulah yang saya maksud.
Cara membuatnya sangat mudah. Tombol-tombol bisa didapatkan dari sini:
Like Button
Tweet Button
+1 Button
Dan dengan sedikit CSS, kita bisa membuatnya melayang di samping main-wrapper. Seperti inilah kodenya setelah saya beri kode CSS:
Keterangan:
Cara membuatnya sangat mudah. Tombol-tombol bisa didapatkan dari sini:
Like Button
Tweet Button
+1 Button
Dan dengan sedikit CSS, kita bisa membuatnya melayang di samping main-wrapper. Seperti inilah kodenya setelah saya beri kode CSS:
<div id="sharebutton" style="width:55px; position:fixed; left:170px; top:200px; padding:10px 15px 10px 10px; border-radius:5px 0 0 5px; background:#B3B3B3;">
<center>
<a href="https://twitter.com/share" data-count="vertical" class="twitter-share-button">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>
<div class="g-plusone" data-size="tall"></div>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=211265582305364";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><div class="fb-like" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div>
</center>
</div>
Keterangan:
# kode berwarna ungu adalah Tweet Button
# kode berwarna merah adalah +1 Button
# kode berwarna biru adalah Like Button
# kode berwarna hijau adalah CSSnya;
- width:55px; artinya lebar wigdet adalah 55px
- width:55px; artinya lebar wigdet adalah 55px
- position:fixed; untuk membuat posisi widget melayang
- left:170px; artinya posisi widget dari tepi kiri halaman browser adalah 170px
- top:200px; artinya posisi widget dari tepi atas halaman browser adalah 200px
- padding:10px 15px 10px 10px; untuk memberi jarak tepi tombol (urutannya: top, right, bottom, left)
- border-radius:5px 0 0 5px; untuk memberi sudut lengkung pada sisi kiri atas dan kiri bawah sebesar 5px (urutannya: kiri atas, kanan atas, kanan bawah, kiri bawah)
- background:#B3B3B3; artinya warna background adalah #B3B3B3 (kode hex color untuk warna silver)
Pemasangannya sangat mudah,
Kalau sudah selesai, lihatlah hasilnya. Jangan lupa sesuaikan tata letak dan tampilan sesuai dengan template blog sobat, tinggal ubah-ubah kode CSSnya.
- border-radius:5px 0 0 5px; untuk memberi sudut lengkung pada sisi kiri atas dan kiri bawah sebesar 5px (urutannya: kiri atas, kanan atas, kanan bawah, kiri bawah)
- background:#B3B3B3; artinya warna background adalah #B3B3B3 (kode hex color untuk warna silver)
Pemasangannya sangat mudah,
1. masuk akun blogger blog sobat
2. klik Layout
3. klik add gadget, pilih HTML/JavaScript
4. copy paste kode di atas, SAVE
Atau kode di atas juga bisa ditumpangkan pada kode widget lain.
Kalau sudah selesai, lihatlah hasilnya. Jangan lupa sesuaikan tata letak dan tampilan sesuai dengan template blog sobat, tinggal ubah-ubah kode CSSnya.
