Cara membuat Kotak Like Facebook Page Menempel di Sisi Blog (Nuryadi Blog's)

cara membuat kotak like halaman facebook disisi blog yang bisa keluar masuk blogbelajar2.blogspot.com

Kotak Like facebook page ini cukup keren dan cukup unik, karena facebook page atau halaman facebook akan muncul jika kursor pointer di arahkan ke kotak atau tulisan facebooknya, dan akan menutup kembali jika kursor mouse di arahkan ke tempat lain. Memang sudah banyak yang memakai widget ini, namun tidak ada salahnya jika saya kembali menuliskan artikel tentang cara bagaimana membuat widget facebook likebox yang menempel di sisi blog ini, siapa tahu ada sobat blogger yang belum tahu dan ingin membuat widget seperti ini.

Widget ini menurut saya sangat cocok diterapkan pada blog yang banyak widgetnya di sidebar. Sehingga tidak begitu banyak memakan tempat. Dari segi estetika keindahan tampilan blog juga cukup bagus. Cara memasangnya juga cukup mudah karena tidak perlu masuk ke edit HTML, hanya tinggal menambahkan gadget di sidebar.

Untuk live demonya bisa sobat lihat di sini
Oke langsung saja kita ikuti tutorial cara membuat kotak like facebook page menempel di sisi blog.

1. Masuk ke akun blogger > Rancangan > Tambah Gadget > pilih HTML/Javascript.
copy paste kode di bawah ini:

//<!--

$(document).ready(function() {$(".w2bslikebox").hover(function() 
{$(this).stop().animate({right: "0"}, "medium");}, function() 
{$(this).stop().animate({right: "-250"}, "medium");}, 500);});

//-->

</script><br />
<br />
<style type="text/css">

.w2bslikebox{background: 
url("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/s150/w2b_facebookbadge.pn")
 no-repeat scroll left center transparent !important;display: 
block;float: right;height: 270px;padding: 0 5px 0 46px;width: 
245px;z-index: 99999;position:fixed;right:-250px;top:20%;}

.w2bslikebox div{border:none;position:relative;display:block;}

.w2bslikebox span{bottom: 12px;font: 8px "lucida 
grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 
6px;text-align: right;z-index: 99999;}

.w2bslikebox span a{color: #808080;text-decoration:none;}

.w2bslikebox span a:hover{text-decoration:underline;}

</style><div class="w2bslikebox" style="">
<div>
<br />
<iframe 
src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FNuryadiBlog&width=245&colorscheme=light&show_faces=true&
 connections=9&stream=false&header=false&height=270" 
scrolling="no" frameborder="0" scrolling="no" style="border: medium 
none; overflow: hidden; height: 270px; width: 
245px;background:#fff;"></iframe><span>Widget by:<a 
href="http://surga-blog7.blogspot.com/2013/05/cara-membuat-kotak-like-facebook-page.html>Nuryadi Blogs</a></span></div>
</div>

2. Klik Pratinjau, lalu simpan template. Selesai.

Catatan:

Silahkan ganti kata NuryadiBlog dengan username halaman facebook sobat sendiri.

Nah bagaimana... sudah jadi khan... hehehe, Happy Blogging !!!

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

Sobat sedang membaca artikel tentang Cara membuat Kotak Like Facebook Page Menempel di Sisi Blog (Nuryadi Blog's). Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

<a href="http://surga-blog7.blogspot.com/2013/05/cara-membuat-kotak-like-facebook-page.html" target="_blank">Cara membuat Kotak Like Facebook Page Menempel di Sisi Blog (Nuryadi Blog's)</a>

:: Get this widget ! ::