Tutorial sebelumnya kita sudah tahu cara membuat Pop Up Facebook like box dimana itu akan tampil di tengah-tengah halaman dilengkapi dengan tombol close. Dalam tutorial ini, saya akan menunjukkan cara membuat pop up Facebook keren melayang dan slide ke kiri pada saat mouseover.
Demo: Anda dapat 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 kode 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 kode 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 baru > pilih 'HTML / JavaScript' gadget dan paste kode 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/AVvXsEhoT5E9isxmWDHXYEdJEgpBVJReWKMUStOpg7-mCskUYQfZ4UXQTc6wUsJ0qoh7w6ihl3Cb7KbaKd-hjT4TSfdtNHOKHc6Noo3aE41iUa7bnpdhzJttfVG889feNHI7OflHbq8mArLGyww/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 karakter 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 seperti 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 dapat memilih warna favorit menggunakan ini Color Code Generator .
- Untuk mengubah warna lencana Facebook, ganti kode hex yang berwarna #3B5998 dengan kode 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!!!
0 komentar