Cara Mudah Menambahkan Facebook Auto Hide Dengan Gambar Sendiri Di Blog

Setelah sekian lama saya mencari artikel Cara Mudah Menambahkan Facebook Auto Hide Dengan Gambar Sendiri Di Blog akhirnya tidak ketemu juga :D. 

Akhirnya saya belajar dengan cara saya sendiri agar bisa menambahkan Facebook Auto Hide Dengan Gambar Sendiri. Karena saya bukanlah seseorang yang hebat dalam membuat kata pembuka jadi langsung saja:

Tahap 1

1. Login di blog, klik Rancangan > Edit HTML > Cari kode </head>
2. Letakkan kode berikut TEPAT DIATAS kode </head> tadi.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

3. Klik simpan

Tahap 2

1. Klik Elemen laman > Tambah Gadget > Pilih HTML/Javascript

2. Masukkan kode berikut didalam kotak yang telah disediakan:

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") 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>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/RiyadisBadDay&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="http://goo.gl/XlMoi">.: Pasang Widget :.</a></span></div></div>

Catatan:
Tulisan merah: ganti dengan url dibawah

 Gambar dengan tulisan nama blog kalian juga bisa direquest disini atau bisa juga langsung request di kotak komentar.

Tulisan orange: ganti dengan url fanspage facebook kalian.

3. Klik simpan, dan lihat hasilnya

Semoga tutorial diatas bisa bermanfaat bagi kita semua.

Baca Juga: Cara Cepat Menghilangkan Tulisan Diberdayakan Oleh Blogger

Anda baru saja membaca artikel yang berkategori Tips & Trik dengan judul Cara Mudah Menambahkan Facebook Auto Hide Dengan Gambar Sendiri Di Blog. Anda bisa bookmark halaman ini dengan URL http://zonapelajaran.blogspot.com/2013/03/cara-mudah-menambahkan-facebook-auto.html. Terima kasih!

Ditulis oleh: Filezone - Selasa, 30 Juli 2013