Cara Membuat Like Page FB Tersembunyi di Samping Blog - Cara ini bisa sobat terapkan saat widget yang sobat pasang diblog sobat terlalu banyak. Widget ini tidak cuma untuk memasang Like FansPage Facebook tersembunyi saja, tetapi juga bisa sebagai penghias blog sobat.
Berikut Ini Adalah Contohnya:
Berikut Ini Cara Membuat Like Facebook Tersembunyi Di Samping Blog :
1. Masuk atau Login ke Blogger.
2. Pilih Tata Letak → Tambah Gadget → HTML / JavaScript.
3. Copy kode dibawah ini, dan letakkan di box HTML/JavaScript.
<script type="text/javascript">Note: Ganti kode yang berwarna merah dengan url Fans Page anda.
//<!--
$(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/AVvXsEjTcEn-tDIVvptyyirKEvAXAtc14Mt8xZS4ApPKBxLViNowYIt-N2UEBTe_iz33ZU7vmUTcZgXV44OEGKMsQLQvDaRJjpMoiYOxcJMta-KJhjaQAu0blzU4hEuyjBUd4iTrBlgCgNYe5m8/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=https://www.facebook.com/pages/King-Shu/1380847972150194?ref=hl&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></div></div>
4. Setelah itu Simpan, dan selanjutnya menuju ke Template → Edit HTML lalu carai kode </head>.
5. Copy kode dibawah ini, dan letakkan di atas kode </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"> </script>
0 Komentar:
Post a Comment