Cara Menambahkan Static Facebook Pop Out Seperti Box dengan Smooth Jquery Hover Effect

Halo teman-teman, inilah jquery Facebook lain muncul untuk facebook seperti kotak widget untuk blogger (atau) situs web.Keuntungan widget ini adalah untuk ruang bebas pada halaman. Karena Facebook dapat mencegah situs normal seperti kotak. Pop Static Out Facebook box sebagai lembut dengan jQuery efek aktivasi untuk blogger, ini adalah kontrol keren lain. Di sini saya telah ditambahkan sebagai kotak dengan sederhana efek hover jQuery. Lihat Facebook pelat statis di sebelah kanan halaman dan menggerakkan mouse di atas piring dengan frame, seperti terlihat dengan menggeser ke kiri.

Tambahkan Sisi Kiri Static Facebook Pop Out Seperti Box dengan Jquery Hover Effect

Langkah 1: .

Menambahkan Statistik Facebook Pop Out Seperti BOX Widget Untuk Tata Letak Blogger

Sekarang mari kita mulai menambahkannya ... 

Langkah 2. Login ke Account Blogger Anda. Pada Dashboard Blogger Anda. Click pada tab Layout dari panel kiri dan klik Tambah Link gadget.

Langkah 3. Setelah klik Add a Gadget menghubungkan Sebuah kotak pop-up akan terbuka sekarang dengan banyak daftar gadget, Pilih HTML / JavaScript dari pilihan gadget dengan mengklik tanda plus biru untuk gadget tersebut.

Langkah 4. Pilih 'HTML / Javascript' dan tambahkan salah satu kode yang diberikan di bawah ini. 

Langkah 5. Sekarang Klik On Simpan 'JavaScript' Anda selesai.

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWww3comjCLQy3JuQRc56CXxU9tzNz3Keke-vvhT6d6YIylQRRQiRiwylXI4GPKVOhzgITyj_xgpDeILZquBdvDxqY0ix8nMcF-BZv5hN4r0e5_HGMVYSglEgB_Xsq5EiqdZNYXMgsU4XG/s1600/facebookbadge.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="My Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="All Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"><img src="https://bitly.com/24workpng1" alt="Techtunes" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Sekolah-templates-harapan/220888831260608&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div></div>

Dalam >> Customize Bidang Ganti " pages/Sekolah-templates harapan/220888831260608 " dengan nama halaman facebook anda sendiri (Bukan nama profil Anda sendiri)

<script src="http://code.jquery.com/jquery-1.10.2.min.js"> </ script>

Catatan : Jika template Anda sudah memiliki jquery yang tidak menempatkan lagi, hanya menyalin setelah HTML dari atas beberapa hal yang bisa diganti:

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.