Share Button Melayang dengan CSS

Minggu, 21 Oktober 2012 | comments (2)

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:

<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
   - 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,
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.
Share this article :

2 komentar:

  1. nice share sob :)
    sob link kamu sudah nongol di hompegame blog saya sob , ditunggu ya link ane nongol di blog kamu :)

    BalasHapus

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Live It Now! - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger