Cara membuat Kotak Like Facebook Page Keren Auto Hide di Sisi Blog



Tau gak sahabat Uzumaki Popey Blog, Kotak Like facebook page ini cukup ampuh 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 uzzumaki popey ngasih tips ini untuk sahabat semua.

Widget ini menurut uzumaki popey, 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. caranya begini sahabat uzumaki :





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



 <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><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%2FUzumakiPopeyBlog&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://www.uzumaki-popey.com>Uzumaki-popey</a></span></div>
</div>



2. Klik Pratinjau, lalu simpan template. Selesai.

  • Catatan:
Silahkan ganti kata UzumakiPopeyBlog dengan username halaman facebook sobat sendiri. Semoga bermanfaat yak sahabat uzumaki.



thumbnail Title: Cara membuat Kotak Like Facebook Page Keren Auto Hide di Sisi Blog
Posted by:Noval Nawawi
Published :2013-09-03T16:36:00+07:00
Rating: 4.5
Reviewer: 5 Reviews
Cara membuat Kotak Like Facebook Page Keren Auto Hide di Sisi Blog