Biar gak penasaran silahkan melihat live demo nya di sini.
Untuk membuat Widget Facebook Like Box Dengan Tombol Melayang, ikuti langkah-langkah berikut ini.
1. Login ke Blogger -> Tata letak -> Tambah Gadget
2. Kemudian pilih HTML/JavaScript
3. Lalu pasang kode di bawah ini pada kolom HTML/JavaScript
<style type="text/css">4. Dan terakhir klik Simpan, lihat hasilnya.
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #999;
background: #ffffff;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
-moz-box-shadow: 0px 2px 5px 0px #f8f9b9;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="left">
<div style="background:#ffffff;">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/mainbom&width=292&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowTransparency="true"></iframe>
</div>
</div>
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvrvcqTFXN6EJ3pskAM3rmkebrZnvpLVYrCK2ip97W4CFKZHKe6FylSMKbScQ8BId9BTiCzFIxZQCd_WQsrLNI7dHJwbmMm_ANphEinuvmwG3vHgYJSr3pIdhRQWy-lHekoYJrJ6RRh51O/s128/Close-32.png" alt="close" title="Click here to Close Box" /></a></div>
</div></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>
<div style='display:scroll; position:fixed; top:50%; left:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzyIgW7OKWaMe6mW3AghFisKDghOk-VuAN9OD32cImQU1TyZGESDUaY7h3r53VHLC0p1CuQn4_jTNMeJMasYVYraKBxyC03I-IMFK1kovdiy8PCisGJDCuLU70_TU2Hpbx2DK_wMdMvAjE/s128/Drink-Facebook.png" /></a>
</div>
Catatan:
- Ganti http://www.facebook.com/mainbom dengan URL Fans Page Facebook Anda.
- Jika ingin memasang tombol icon facebook di sebelah kanan, ganti left:0px; dengan right:0px;
ga mau tanya, kok link di sini bisa "www.mainbom.com" padahal kan pake blogger. cara ganti kayak gitu gimana caranya?, namun saya beri tahu dulu bila mengganti apa akan mempengaruhi rank di google?
BalasHapusTerima kasih.:p:
cara bikin langganan artikel seperti di blog ini gmn kk caranya, kalo bisa buatin tutor nya.
BalasHapus>>>SUBSCRIBE<<<
Ok di tunggu ya..
Hapuscek dimari gan http://www.mainbom.com/2012/06/cara-membuat-langganan-artikel-via.html
HapusSangat membantu bagi blogger pemula seperti saya,mampir juga gan ke blog ane y.
BalasHapushttp://www.intips.cu.cc
keren mas, templatenya juga keren, kasih jempol dah
BalasHapus:m:
BalasHapusIkut nyimak gan... makasih dah share :D
BalasHapusTerima kasih gan,, saya udah nyoba,, n berhasil
BalasHapus:n:
:e:
BalasHapus:x:
BalasHapusthank gan , ane berhasil
BalasHapusthanks sob sharenya ...
BalasHapus:t: http://mat3riku.blogspot.com/
mantap gan!!!
BalasHapuskunjungi juga game-software.info
makash kawan, sangat membantu :v:
BalasHapusjgn lpa berkunjung di http://agrotekaceh.blogspot.com/
nice infonya..
BalasHapusfollow back blog ane ya gan
Luar biasa ilmunya,
BalasHapuspraktisss..sangat praktis!
Thanks gan.
http://leicaku.blogspot.com/
Langsung ke TKP gan
BalasHapus:)
makasih atas infonya :)
BalasHapusthanks...bermanfaat bgt bro !!!!!!!!!!
BalasHapuscara mengganti tulisan seperti home, news, tutorial ato yg lain. sama cara ngrubah isinya. makasih
BalasHapusmakasih tutorialnya, saya coba dulu :)
BalasHapusora dadi um
BalasHapus:q:
Kereeen, :t:
BalasHapuscoba dulu gan, mudah"an berhasil
BalasHapuspas d ganti left menjadi right kok jdi gk jlan bro?
BalasHapusmohon pencerahan terimakasih
kalo url fb nya di ganti ama account biasa gimana ?? saya gak punya fans , jadi saya gak bikin Fansn Page
BalasHapusMakasi bgt gan..
BalasHapusmampir ke blog ane http://bengkelandri.blogspot.com/
Siiiip...bisa jadi referensi.....
BalasHapustak coba dulu gan.
BalasHapusWah, mantaps sekali. Jalan lancar di blogku. Trims banyak ya.. Membantu sekali.
BalasHapusthnks gan sudah berbagi ilmu dengan kita-kita,,,salam kenal aja
BalasHapusmksih gan krenn info nya
BalasHapus:y:
BalasHapustutorial yang baguss gannn..... di coba ya
BalasHapusLangsung aq coba gan..
BalasHapustrims.
trims.. sekali terapkan langsung sukses..
BalasHapusdi coba ah...langsung ke TKP
BalasHapusdi tunggu kunjungan baliknyake:
http://bloggerasmuri.blogspot.com/
mantaf gan
BalasHapustengkiyu gan ...
BalasHapusinfonya manfaat bgt...
dicoba dulu gan :)
BalasHapusKeren gan Thank you... mampir juga ya di www.diamondbekasi.blogspot.com :)
BalasHapuskenapa halaman facebooku tdk bisa tampil diblog, jika aku logout dari facebook
BalasHapussip keren. terimakasih banyak bos tutorialnya. setelah saya tertapkan akhirnya berhasil. ternyata tidak sesuliat yang saya bayangkan.
BalasHapussangat bermanfaat gan,,
BalasHapusmampir juga di http://planetsphp.blogspot.com
sudh nyoba juga,, jos, trims
BalasHapusMakasih ya, berhasil di pasang blog saya http://www.bmatindas.com/
BalasHapusterimaksaih bung, sy uda mencobanya dan sukses
BalasHapustanks yaa