Cara Membuat Likebox Fanspage Facebook Auto Hide

Setelah kemarin SP share tentang Cara Membuat Likebox Fanspage Facebook di Blog (sidebar), Sekarang SP mau share tentang  Cara Membuat Likebox Fanspage Facebook Auto Hide, karena kebetulan ada permintaan dari salah satu teman SP di facebook yang mempunyai blog.

Untuk fungsi sebenarnya sama saja dengan likebox di sidebar, yang membedakan likebox auto hide ini tempatnya tersembunyi disisi kanan blog, tetapi jika kursor didekatkan likebox ini akan terbuka (jadi ada daya tarik tersendiri).

Bila sobat blogger tertarik untuk mengaplikasikannya, berikut langkah-langkahnya :

1. Login ke Blogger

2. Pilih Template

3. Klik Edit HTML

4. Cari kode </head>

5. Letakkan kode dibawah ini diatas kode </head>

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

6. Simpan.

Keterangan. Bila template sobat sudah terdapat kode tersebut, tidak usah di copas, langsung saja ikuti langkah berikut :

1. Pilih Tata Letak

2. Pilih Tambah Gadget

3. Pilih HTML/JavaScript

4. Masukan kode dibawah ini pada kolom HTML/JavaScript

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTk4TH-ylSoKkXMm6lTG5Y2HzyB9U3CVlM4sXbAe9KJ2vOPfoZSl6mhGjQ0_DIuUqCL6eks-ioGwT9hD-LGEZbLLahU1CXrceu0GOudxAyVAV6qOej-IhVKGNGAnanSoxjWEXuhmhZ9R0/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;
}
.floatinglikebox div{
border:none;position:relative;display:block;
}
.floatinglikebox span{
bottom: 20px;font: 20px tahoma,verdana,arial,sans-serif;position: absolute;right:1 6px;text-align: right;z-index: 99999;
}
.floatinglikebox span a{
color: #808080;text-decoration:none;
}
.floatinglikebox span a:hover{
text-decoration:underline;
}
</style>
<div class="floatinglikebox" style="">
<div>
<iframe src="//www.facebook.com/plugins/likebox.php?href= https://www.facebook.com/Henzapthea79?ref=hl&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:290px; height:258px;" allowtransparency="true"></iframe>

<div class="fb-like" data-href="https://www.facebook.com/profile.php?id=371524026202784" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>

</a>
</span>
</div>
</div>

Keterangan. Ganti tulisan yang berwarna merah dengan kode fanspage sobat, sedangkan tulisan yang berwarna biru, bisa diganti dengan URL gambar sobat.

5. Simpan Template

Demikian artikel SP tentang Cara Membuat Likebox Fanspage Facebook Auto Hide, semoga artikel ini bisa membantu dan bermanfaat, terimakasih atas kunjungannya.