Skip to main content

Widget SHARE ,LIKE,G+ DI Blog


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


membuat share button like faceboo

Cara Membuat Share Button Like, Share dan Twitter Melayang di Sisi Kanan Blog - Untuk meningkatkan lalu lintas kunjungan ke blog kita, selain upaya optimasi SEO , perlu juga kiranya kita mengintegrasikan blog kita dengan media jejaring sosial populer seperti facebook dan twitter.

Jika kita meremehkan "kekuatan" share button / tombol berbagi ini, sama saja kita menyiakan-nyiakan peluang untuk menambah kunjungan ke blog kita.

Jika pada posting sebelumnya kita membuat share button di bawah posting, pada tutorial kali ini, Julak mau berbagi sama temen-temen bagaimana membuat salah satu widget share button melayang di sisi kanan blog. Widget kali ini dilengkapitombol suka dan share Facebook, Tweet, Digg, stumble Upon dan Google +1 termasuk perhitungannya alias berapa banyak pengunjung yang membagikannya. Cara pembuatannya sangat mudah, karena tidak perlu mengedit CSS atau menambahkan kode HTML.

1. Langkah pertama masuk ke akun blogger > Dasbor, > klik design/rancangan > Tata Letak

2. Klik Tambah Gadget, di bagian sidebar.

3. 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='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'><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://blogbelajar2.blogspot.com/2012/02/cara-membuat-share-button-like-share.html" target="blank"><font color="blue">[Get Widget]<font></font></font></a></div></div>

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


5. Simpan widget dan preview Blog Anda

Jika Anda sudah memiliki tombol google + di atas atau di bawah posting Anda, kemungkinan widget tersebut tidak muncul. Silakan hapus kode berwarna merah jika sobat mau menghapusnya, karena mungkin bisa mempercepat loading blog.

Jika Anda menggunakan template gelap / dark template, Silakan Anda dapat mencoba 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:#000000;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='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'><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://blogbelajar2.blogspot.com/2012/02/cara-membuat-share-button-like-share.html" target="blank"><font color="white">[Get Widget]<font></font></font></a></div></div>

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

Pengaturan lihat kode-kode warna merah:
  • angka 15% mengatur letak tinggi posisi share button dr sisi bawah blog, silakan dikurangi jika posisinya ingin diturunkan
  • angka 10 pixel adalah posisi dari tepi paling kanan blog, ditambah jika sobat ingin mengetengahkan.
  • sedangkan border: 1px solid black, adalah ukuran ketebalan batas kotak share button dan warna batas/garis share button itu sendiri.
SUMBER:http://blogbelajar2.blogspot.com/2012/02/cara-membuat-share-button-like-share.html?showComment=1337525275332#c7623983229636042251

Comments

Popular posts from this blog

FIX 4G MIUI 8 REDMI 3/Pro #rivvai

PATCH FIX 4G CAMERA FEATURE Fitur : * Fix 4G ( dial *#*#4636#*#* tersedia opsi network ) * Camera features ( opsi camera ,save ke SD tidak hilang,  LED aman , semua fitur normal ) Note : ** Cocok untuk yang tidak ingin root atau menggunakan Xposed. ** Menggunakan cara ini akan menghilangkan fungsi app lock menggunakan fingerprint, jika ingin app lock berfungsi gunakan metode fix menggunakan Xposed ( Cek postingan Fix 4G Xposed  ) DOWNLOAD FIX 4G Flash via TWRP tanpa Wipe. tidak perlu edit ini itu, semua bekerja otomatis. >>>>**********<<<<< File Pembantu >>>> Ramdisk permissive buat yg bootloop klo abis install SuperSu (Jika ada ) https://drive.google.com/file/d/0B5fZIdHA5gAhV2RaTER4bHhadWM/view?usp=sharing >>> SuperSu 2.68 https://drive.google.com/file/d/0B5fZIdHA5gAhRVA3NHgySmJLTzQ/view?usp=sharing Tested di MIUI 8.1.3.0 GLOBAL STABIL. untuk coba d...

Pengertian dan perkembangan FireWire

Pengertian dan perkembangan FireWire FireWire adalah merek dagang Apple sekaligus nama yang paling populer untuk standar kabel data antar-muka berseri IEEE 1394. Sony memperkenalkan IEEE 1394 dengan nama i.Link. Meski namanya berbeda-beda, ketiganya (FireWire, IEEE 1394 dan i.Link) sama-sama menunjuk pada jenis kabel data yang mampu mengirim data dengan kecepatan sangat cepat, sampai pada rata-rata 400 megabit per detik (Mbps). FireWire diklaim sebagai saluran penghantar data yang paling cepat dan stabil di antara saluran lain seperti USB. Perkembangan FireWire

Deteksi wajah dengan html5 dan javascript

pas artikel ini dibuat ane lg browsing2 gimana caranya buka kamera laptop plus pengen bikin face recognation atau pengenalan wajah. kebetulan nemu nih... tapi belum tak coba wkkwkwk barang kali mau nyoba ya munggoh.... link github : https://github.com/wesbos/HTML5-Face-Detection Demo Video:  http://www.youtube.com/watch?v=YYES9Qd094o&hd=1 Working Demo :  http://wesbos.com/demos/html5-face-detection/ Tutorial :  http://www.wesbos.com/html5-video-face-detection-canvas-javascript