Menyembunyikan Facebook Fan Page Box Dengan Smooth Jquery Hover Effect

Menyembunyikan Facebook Fan Page Box Dengan Smooth Jquery Hover Effect - Assalamu'alaikum Wr. Wb. Kesempatan hari ini saya akan memberikan sebuah tutorial blog untuk sahabat tentang Hidden Facebook Fan Page di Blog dengan Smooth Jquery Hover Effect. Tutorial ini sangatlah mudah untuk dipraktekkan dan dipasang di blog sahabat...#maaf bila *ngawur ngomongnya..hehe*

View Demo bisa dilihat di Homepage saya
Kita langsung saja pada pembahasanya....

Langkah Pertama (Tambah Jquery JavaSript Plugin):

Login ke Blogger >> setelah itu nanti akan masuk ke Dasbor seperti gambar berikut:

Lalu setelah itu ikuti gambar seperti ini dan Pilih dengan tulisan Template

Setelah itu anda akan dibawa ke tampilan seperti gambar di bawah ini
Lalu Klik Edit HTML >> Lanjutkan

Terkhir, Klik Tombol Keyboard CTRL+F
Cari kode </head>
Lalu Pastekan code script berikut di atas </head>:

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

Setelah itu Simpan Deh....

Langkah Kedua:
Pilih Tata Letak seperti Gambar di bawah ini

Klik Tambah Gadget >> Pilih HTML/Javascript

Lalu Copykan code di bawah ini ke dalam HTML/Javascript tadi

<div class='widget-content'> <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/-ZNl7yu58t4I/TvFFG5boY_I/AAAAAAAABbI/ZuG4RH_RWH4/s1600/rumahimajinasi.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%3A%2F%2Ffacebook.com%2FRumahImajinasi&amp;width=245&amp;colorscheme=light&amp;show_faces=false&amp; connections=9&amp;stream=false&amp;header=false&amp;height=102" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 102px; width: 245px;background:#fff;"></iframe> 

             </div>
    </div>
</div>

Lalu tulisan yang berwarna biru diganti dengan Facebook Fan Page Box Sahabat ...
Terakhir, Save deh...