Seni Blogger Pemula
4 komentar

Cara Membuat Share Button Like, Share dan Twitter di Sisi Blog atau Postingan

Cara Membuat Share Button Like, Share dan Twitter Melayang di Sisi Kanan Blog/Postingan - Untuk meningkatkan pengunjung ke blog kita, kita perlu mengintegrasikan blog kita melalui media jejaring sosial populer seperti facebook dan twitter. (lihat gambar disamping)
Pada postingan sebelumnya yaitu Cara Membuat Widget/Gadget Mashable Style Social Subscription yang juga widget/gadget share like dan twitter tapi tidak melayang, Nah pada tutorial kali ini, Putra batak mau berbagi sama sobat-sobat bagaimana membuat salah satu widget Share Button Like, Share dan Twitter Melayang di Sisi Kanan Blog/Postingan. Widget kali ini dilengkapi tombol suka dan share Facebook, Tweet, Digg, stumble Upon dan Google+ (G-plus) Cara pembuatannya sangat mudah, karena tidak perlu mengedit CSS atau menambahkan kode HTML. Langsung saja, berikut langkah-langkahnya :
  1. Langkah pertama masuk ke akun blogger > Dasbor  > klik design/rancangan > Tata Letak 
  2. Klik Tambah Gadget, di bagian sidebar.
  3. lalu pilih HTML/Javascript, kemudian masukkan kode di bawah ini:

<!--Widget Share Button Melayang Start-->

<style>

#pageshare {position:fixed; bottom:15%; right:10px; 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="bagikan ke teman anda">
<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='fb'><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></div><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://karaokebatak.blogspot.com" target="blank"><font color="blue">[Get Widget]<font></font></font></a></div></div>

<!--Widget Share Button Melayang End-->

5. Klik Save/Simpan. Lihat blog sobat.

Untuk pengaturan lihat kode warna merahubah sesuai yang sobat inginkan :

  • angka 15% mengatur letak tinggi posisi share button dr sisi bawah blog, silakan dikurangi jika posisinya ingin diturunkan dan ditambahi jika ingin dinaikkan.
  • angka 10px adalah posisi dari tepi paling kanan blog.
  • sedangkan border: 1px solid black, adalah ukuran ketebalan batas kotak share button dan warna batas/garis share button itu sendiri.

4 komentar:

Anti mengatakan...

Link aktifnya mana Mas?

KARAOKE BATAK mengatakan...

@Anti
Opss maaf lupa mbak naro nya.
udah tuh...

NABILA SHOP mengatakan...

TOKO HANDPHONE TERBESAR TERLENGKAP TERMURAH TERPERCAYA NABILA SHOP Produk dijamin asli orginal.Dapatkan harga promo Nabila Shop Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Ada Garansi Resmi Distributor dan Garansi TAM 2 bebas resiko bebas penipuan.
Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
BERMINAT HUB-SMS 085-757-299-675 ATAU KLIK WEBSET RESMI KAMI http://nabilashop77.blogspot.com
Ready Stock! Samsung Galaxy S4 Mini Rp.2,500.000
Ready Stock! Apple iPhone 5 Rp.2,700.000
Ready Stock! BlackBerry 9380 Orlando - Black.Rp.900.000,-
Ready Stock! BlackBerry Curve 8520 Gemini.Rp.500.000,-
Ready Stock! BlackBerry Bold 9780 Onyx 2.Rp.800.000,-
Ready Stock! Blackberry Curve 9320.Rp.700.000,-
Ready Stock! Samsung Galaxy Note 10.1.Rp.2,500.000.
Ready Stock! Samsung Galaxy Tab 2 (7.0).Rp. 1.000.000
Ready Stock! Samsung Galaxy S III Mini.Rp.1.800.000.
Ready Stock! Samsung Galaxy Nexus I9250 - Titanium Si.Rp.1.500.000,-
Ready Stock! Samsung Galaxy Note N7100.Rp.2.500.000.
Ready Stock! Samsung Galaxy Note N7000 - Pink.Rp.1.700.000.
Ready Stock! Samsung Galaxy Y S5360 GSM - Pure White.Rp.500.000

NABILA SHOP mengatakan...

TOKO HANDPHONE TERBESAR TERLENGKAP TERMURAH TERPERCAYA NABILA SHOP Produk dijamin asli orginal.Dapatkan harga promo Nabila Shop Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Ada Garansi Resmi Distributor dan Garansi TAM 2 bebas resiko bebas penipuan.
Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
BERMINAT HUB-SMS 085-757-299-675 ATAU KLIK WEBSET RESMI KAMI http://nabilashop77.blogspot.com
Ready Stock! Samsung Galaxy S4 Mini Rp.2,500.000
Ready Stock! Apple iPhone 5 Rp.2,700.000
Ready Stock! BlackBerry 9380 Orlando - Black.Rp.900.000,-
Ready Stock! BlackBerry Curve 8520 Gemini.Rp.500.000,-
Ready Stock! BlackBerry Bold 9780 Onyx 2.Rp.800.000,-
Ready Stock! Blackberry Curve 9320.Rp.700.000,-
Ready Stock! Samsung Galaxy Note 10.1.Rp.2,500.000.
Ready Stock! Samsung Galaxy Tab 2 (7.0).Rp. 1.000.000
Ready Stock! Samsung Galaxy S III Mini.Rp.1.800.000.
Ready Stock! Samsung Galaxy Nexus I9250 - Titanium Si.Rp.1.500.000,-
Ready Stock! Samsung Galaxy Note N7100.Rp.2.500.000.
Ready Stock! Samsung Galaxy Note N7000 - Pink.Rp.1.700.000.
Ready Stock! Samsung Galaxy Y S5360 GSM - Pure White.Rp.500.000

Best viewed on firefox 5+

Entri Populer

Daftar Isi