Cara Menciptakan Pop Up Facebook Melayang Di Samping
Tutorial sebelumnya kita sudah tahu cara menciptakan Pop Up Facebook like box dimana itu akan tampil di tengah-tengah halaman dilengkapi dengan tombol close. Dalam tutorial ini, saya akan mengatakan cara menciptakan pop up Facebook keren melayang dan slide ke kiri pada ketika mouseover.
Demo: Anda sanggup melihat pop up Facebook melayang di sisi kanan blog ini:
 |
| Demo |
Membuat Pop Up Facebook Melayang di samping
Langkah 1. Masuk ke akun Blogger anda, pergi ke tab "Template" dan tekan tombol "Edit HTML".
 |
| Tab Template on blogger |
Langkah 2. Klik di mana saja di dalam area isyarat dan tekan tombol CTRL + F untuk membuka kotak pencarian:
 |
| Buka search box on blogger |
Langkah 3. Cari (CTRL + F) untuk tag ini:
</ Head>
Langkah 4. Tambahkan isyarat berikut sebelum tag di atas </ head>:
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </ script>
Langkah 5. Simpan Template
Langkah 6. Pergi ke Layout > Add a Gadget gres > pilih 'HTML / JavaScript' gadget dan paste isyarat di bawah ini pada kotak HTML:
<style type="text/css">#fbplikebox { display: block; padding: 0; z-index: 99999; position: fixed; background: #ffffff;}
.fbplbadge { background-color: #3B5998; display: block; height: 150px; top: 50%; margin-top: -75px; position: absolute; left: -47px; width: 47px; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi67-rHtzajjFvH7vrJLhSKffN7HPX2C85WzITqmn19vstTrso7Otgsy5gCzW62Vy1uzrLGmRaxgY1-Pw0m1aCtz4Qo_a3eZwqPiufmUQjl4fgddXVKffYY03jGe_GmMpDvjds4VwVOgqs/s1600/vertical-right.png"); background-repeat: no-repeat; overflow: hidden; -webkit-border-top-left-radius: 8px; -webkit-border-bottom-left-radius: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-bottomleft: 8px; border-top-left-radius: 8px; border-bottom-left-radius: 8px;}</style><script type="text/javascript">/*<![CDATA[*/ (function(w2b){ w2b(document).ready(function(){ var $dur = "medium"; // Duration of Animation w2b("#fbplikebox").css({right: -250, "top" : 100 }) w2b("#fbplikebox").hover(function () { w2b(this).stop().animate({ right: 0 }, $dur); }, function () { w2b(this).stop().animate({ right: -250 }, $dur); }); w2b("#fbplikebox").show(); }); })(jQuery);/*]]>*/</script><div id="fbplikebox" style="display:none;"> <div class="fbplbadge"></div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=YOUR-FACEBOOK-PAGE&width=250&height=250&colorscheme=light&show_faces=true&border_color=%23C4C4C4&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;" allowtransparency="true"></iframe></div>
Langkah 7. Ganti teks YOUR-FACEBOOK-PAGE dengan Url fanspage facebook anda. Kemudian, Anda akan harus mengganti aksara berikut di URL, sebagai berikut:
Ganti simbol : dengan:
%3A
Ganti simbol / dengan:
%2F
Misalnya, fan page Facebook dari blog ini:
https://www.facebook.com/duniatutorials
Setelah mengganti simbol di atas, fanspage Facebook akan terlihat menyerupai ini:
https%3A%2F%2Fwww.facebook.com%2Fduniaturorials
Pengaturan lanjutan (opsional):
- Untuk mengubah warna latar belakang dari kotak kipas, ganti #ffffff yang berwarna merah. anda sanggup menentukan warna favorit memakai ini Color Code Generator .
- Untuk mengubah warna lencana Facebook, ganti isyarat hex yang berwarna #3B5998 dengan isyarat anda sendiri.
- Untuk mengubah lebar dan tinggi kotak Facebook, mengubah nilai-nilai warna merah ( 250)
Langkah 8. Sekarang Simpan gadget/widget fanspage Facebook like boxini dengan menekan tombol 'Simpan'.
GOOD LUCK!!!
Recommend: 5 Cara Cepat Meningkatkan Like Facebook Menggunakan WordPress
GOOD LUCK!!!