Cara Membuat Tombol Share Melayang di Blog

Cara Membuat Tombol Share Melayang di Blog
Cara Membuat Tombol Share Melayang di Blog - Jika anda seorang blogger pastinya anda tahu apa yang akan saya bahas disini. Pada postingan kali ini saya akan membahas mengenai "Cara Membuat Tombol Share Melayang di Blog". Tutorial ini saya persembahkan untuk para Newbie yang ingin belajar mengenai dunia blogging.

Seperti apa sih bentuk tombol sharenya?? teman-teman bisa liat di samping kiri blog 3IDE.OT ini. Apa manfaatnya jika pasang tombol share di blog ? ya seperti namanya tomblog share atau tombol untuk berbagi dengan memasang tombol share di blog kita setidaknya ada kemungkinan orang untuk membagikan setiap informasi yang berada pada blog kita. Dan ini merupakan salah satu cara untuk mendatangkan visitor ke blog. 

Sebetulnya tutorial kali ini tidaklah sulit untuk dikerjakan jadi untuk kalian yang masih Newbie jangan pernah memblok diri kalian dengan kata "Pasti susah". Toh sebetulnya tutorial ini sudah banyak yang gunai, kalau orang lain aja bisa apalagi kita newbie. Baiklah untuk mengefektifkan waktu kunjungan teman - teman kita langsung saja masuk ke cara membuat tombol share melayang di blog.

  1. Buka akun blog teman-teman terlebih dahulu
  2. Pilih Blog yang hendak di pasang Widget Share
  3. Kemudian Pilih Tata Letak > Tambah Gadget > HTML / JAPASCRIPT
  4. Lalu Copy Paste Kode dibawah ini Ke Gadget baru (HTML/JAPASCRIPT)
    <style>
    #pageshare {position:fixed; bottom:25%; left:5px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;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>
    <div class='sbutton' id='fb'></div></div>
  5. Jangan Lupa Simpan 

Setelah anda copy anda dapat melakukan pengaturan pada bagian CSS Jika mengerti . Baiklah akan saya jelaskan sedikit karena saya juga kebetulan belum terlalu paham mengenai CSS.

  1. Untuk merubah posisi button share menjadi sebelah kanan teman-teman dapat merubah pada bagian #pageshare { cari flot : left rubah menjadi right} 
  2. Untuk merubah background-color dari widget cari background-color:#eff3fa lalu rubah kode warna #eff3fa bagaimana untuk mengetahui warnanya teman-teman bisa googleing cukup mengetikan keyword "Kode warna" semuanya akan muncul.
  3. Masih banyak lagi yang teman-teman bisa pelajari, yang terpenting untuk saat ini sampai sana saja dulu di lain kesempatan kita bahas lagi.
Sekian dulu yang bisa saya sampaikan semoga apa yang saya tulis ini bisa bermanfaat bagi semua termasuk saya yang masih belajar tentang blog. Untuk memberikan dukungan agar 3IDE.OT tetap bisa berkembang dan terus memberikan yang terbaik silahkan isi kolom komentar dan Join this site. Terimakasih

8 Comments

Silahkan kirimkan komentar bijak anda disini.

  1. Bagus gan biar banyak yang share artikel kita, brarti kan bisa ningkatin pengunjung jg sebenernya ya gan :D

    ReplyDelete
    Replies
    1. iya gan salah satu cara menarik perhatian visitor

      Delete
  2. Bagus gan biar banyak yang share artikel kita, brarti kan bisa ningkatin pengunjung jg sebenernya ya gan :D

    ReplyDelete
  3. follow aku juga ya gan, gulalempeng.blogspot.com

    ReplyDelete
Previous Post Next Post