Tujuan Blogger memasang sebuah fans page facebook di blog biasanya agar banyak mendapatkan LIKE oleh pengunjung blog tersebut. ada banyak tipe memasang fans page di blog salah satunya dengan membuat fans page melayang di tengah-tengah blog atau hanya memasang widgetnya saja di navigasi blog.
pada kesempatan kali ini saya akan berbagi tutorial cara membuat auto hide fans page facebook di samping kanan blog, untuk lebih jelasnya lihat contoh gambar di bawah ini.
dengan memasang fanspage Hide facebook di samping blog itu akan membuat blog anda semakin keren, cara kerjanya cukup simpel ketika pengunjung mengarahkan mouse/kursor ke arah logo facebook yang menempel di side bar sebelah kanan maka secara otomatis fans page facebook anda akan tampil.
Cara memasangnya cukup Mudah :
1. copy kode di bawah ini
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".likebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.likebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") no-repeat scroll left top transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:44%;}
.likebox div{border:none;position:relative;display:block;}
.likebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 99999;}
.likebox span a{color: gray;text-decoration:none;}
.likebox span a:hover{text-decoration:underline;}
</style>
<div class="likebox" style="">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/komunitasbloggerIndonesiaa&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><b><a target="_blank" href="http://otowebsite.blogspot.com/2012/04/cara-membuat-facebook-like-auto-hide-di.html">Get this widget</a></b></span>
</div>
</div>
keterangan : ganti yang berwarna merah dalam kode di atas dengan Url fans page facebook anda
2. login di blogger[dot]com
3. tambah gadget
4. pilih HTML/javascript dan pastekan kode yang anda copy tadi kemudian klik simpan
Sekian Tutorial Blogger yang dapat saya berikan pada kesempatan ini semoga bermanfaat dan sampai ketemu lagi di postingan selanjutnya.
0 komentar:
Posting Komentar