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

• 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/AVvXsEjL8p2D8cJTe-J1-cNdlCUg2hhNovbQDSfyKomzDUgeyuor2re4rrDz4Fs-LNVX1bw0TBfep-q0pFgi38Wdi1DEGXF29QZj296OJxqaWARGI6KeD6e1iubfZ1RYa97vBC5_dZRsrSeFKyM/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/j4vascript">/*<![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&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;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 abjad 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'.

Recommend: 5 Cara Cepat Meningkatkan Like Facebook Menggunakan WordPress

GOOD LUCK!!!

Sumber http://duniatutorials.blogspot.com

Mari berteman dengan saya

Follow my Instagram _yudha58

Baca juga:

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: