Sobat blogger, sekarang saya akan share artikel mengenai Cara Membuat Like Box Facebook Auto Hide Pada Blog. Karena adanya permintaan dari sobat blogger yang menanyakan bagaimana cara membuat like box facebook auto hide, berikut saya kasih langkah-langkah bagaimana cara membuatnya.
Sebelum masuk ke langkah-langkah pembuatannya ada baiknya saya jelaskan sedikit mengenai like box facebook auto hide ini. Mungkin dari sobat blogger ada yang bertanya apa manfaat dan kegunaan like box facebook ini. Kegunaannya selain dapat menambah jumlah pengikut pada blog sobat, like box facebook ini juga bermanfaat untuk mengefisienkan halaman blog sobat agar lebih terlihat menarik dan tertata rapi, hanya itulah yang bisa saya jelaskan. berikut langkah-langkah membuatnya :
- Masuk ke akun blog sobat.
- Pilih Template > Edit HTML
- Cari kode </head> Biar cepat gunakan Ctrl+F di kotak Edit HTML.
- Copy kode dibawah ini > Paste kode di diatas kode </head>
- Kemudian "Simpan Tempalate"
- Pilih Tata Letak.
- Kemudian Pilih Add Gedget / Tambah Gedget.
- Pilih HTML/Javascript.
- Kemudian Copy kode dibawah ini
//<!--
$(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/AVvXsEgWeVeMg0ikzIPR8D4HBxpWQhuJlS2NnC0NZmix6RcGQZxV-HpDuoHEiB-Ea_PqZoe0dR-b18DEwTbz1yzTwA68p67uX9taE8p0Xqa3PWjcuCqKwPCU8oqyv7QkrYDMcOSy-ZDVs_ZlTXc/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: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 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=URL FANSPAGE FACEBOOK SOBAT &width=251&height=270&colorscheme=light&show_faces=true&border_color=%23cccccc&stream=false&header=false&appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://mari-berbagi244.blogspot.com/2013/04/cara-membuat-like-box-facebook-slide.html" target="_blank">.:Get Widget:.</a>
</span>
</div>
</div>
- Paste Kode diatas ke widget HTML/Javascript.
- Ganti kode yang berwarna Merah dengan URL Fanspage Facebook sobat.
- Simpan dan lihat hasilnya.
Tidak ada komentar:
Posting Komentar