Menambahkan Facebook Popup Like Box dengan jquery ke blog blogger Anda

Menambahkan Facebook Popup Like Box dengan jquery ke blog blogger Anda . Popup merupakan informasi yang muncul ketika user berkunjung ke blo... thumbnail 1 summary

22.37.00

Menambahkan Facebook Popup Like Box dengan jquery ke blog blogger Anda. Popup merupakan informasi yang muncul ketika user berkunjung ke blog anda. Fungsi dari popup agar website atau blog tidak menggunakan halaman lain sehingga dapat menghemat loading website anda. Dan popup ini akan terlihat profesional. Biasanya yang ditampilkan dipopup adalah like facebook dan pertemanan. Kotak ini juga memiliki button dekat di sudut kanan atas. Pengunjung dapat menutup widget ini dengan mengklik tombol tutup. Widget kotak pop-up benar-benar mengganggu pengunjung Anda ketika mereka muncul lagi dan lagi, Menurut myblogger-tricks, Facebook adalah sumber utama lalu lintas yang dapat mengirim blog Anda arus lalu lintas yang baik bila Anda memiliki cukup penggemar di halaman Facebook Anda. Untuk memperluas jaringan Facebook dan meningkatkan penggemar halaman Facebook Anda, mereka telah membawa Facebook Like Widget Popup untuk blog blogger Anda yang akan muncul sekali pakai saja dan dengan demikian akan meningkatkan penggemar Facebook Anda tanpa mengganggu pengunjung Anda. Facebook popup widget menyimpan cookie di browser pengunjung. ketika pembaca mengunjungi blog Anda pertama kali Facebook seperti muncul box pengunjung ke halaman lain atau kunjungi kembali nanti seperti kotak tidak akan muncul lagi. [Facebook Popup like box with jquery to your blogger blog]

Langkah-Langkahnya
1. Masuk ke Blogger Dashboard >> Template >> Edit Html
2. Cari kode berikut dalam template Anda.

</head>

3. Paste kode berikut sebelum / di atas </ head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script><script src='http://yourjavascript.com/69231961363/jquery-colorbox-min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var setDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + setDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", height:"430px", inline:true, href:"#facebook-popup"});
}});</script>

* 7 Menetapkan nilai ini akan mempengaruhi cookie refreshment. Saya telah mengatur likebox muncul sekali untuk pengunjung dan likebox akan muncul lagi setelah 1 minggu. Jika Anda ingin menampilkan likebox kepada pengunjung Anda setelah 1 hari kemudian menetapkan 7-1. jika Anda menetapkan nilai ke 1 maka dapat mengganggu pembaca biasa.

4. Sekarang cari </ b: skin>.
5. Dan sisipkan kode berikut sebelum css diatas </ b: skin>

/* Colorbox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper { position: absolute; top: 0; left: 0; z-index: 9999; overflow: hidden; } #cboxOverlay { position: fixed; width: 100%; height: 100%; } #cboxMiddleLeft, #cboxBottomLeft { clear: left; } #cboxContent { position: relative; } #cboxLoadedContent { overflow: auto; -webkit-overflow-scrolling: touch; } #cboxTitle { margin: 0; } #cboxLoadingOverlay, #cboxLoadingGraphic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor: pointer; } .cboxPhoto { float: left; margin: auto; border: 0; display: block; max-width: none; -ms-interpolation-mode: bicubic; } .cboxIframe { width: 100%; height: 100%; display: block; border: 0; } #colorbox, #cboxContent, #cboxLoadedContent { box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; } /* User Style: Change the following styles to modify the appearance of Colorbox. They are ordered and tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay { background: #000; } #colorbox { outline: 0; } #cboxContent { margin-top: 20px; background: #000; } .cboxIframe { background: #fff; } #cboxError { padding: 50px; border: 1px solid #ccc; } #cboxLoadedContent { border: 5px solid #123D60; background: #fff; box-shadow: 3px 3px 3px #fff; } #cboxTitle { position: absolute; top: -20px; left: 0; color: #ccc; } #cboxCurrent { position: absolute; top: -20px; right: 0px; color: #ccc; } #cboxLoadingGraphic { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGOhr1pi6zwuYTGpWX7-IsBB7ObaGPb20PphyS2b4c_CuSWFUAU2iX22Ns71vAD3wLlNAhaHlPjq4ywBbtYJ5wgxGtz8vNmoEKIH2TuPJ9xAYygeEffOLc55U_U5c4LIlCZjJCmMKFqbw-/s32/loading.gif) no-repeat center center; } /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { border: 0; padding: 0; margin: 0; overflow: visible; width: auto; background: none; } /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active { outline: none; } #cboxSlideshow { position: absolute; top: -20px; right: 90px; color: #fff; } #cboxPrevious { position: absolute; top: 50%; left: 5px; margin-top: -32px; background: url(https://sites.google.com/site/techprevue/home/controls.png) no-repeat top left; width: 28px; height: 65px; text-indent: -9999px; } #cboxPrevious:hover { background-position: bottom left; } #cboxNext { position: absolute; top: 50%; right: 5px; margin-top: -32px; background: url(https://sites.google.com/site/techprevue/home/controls.png) no-repeat top right; width: 28px; height: 65px; text-indent: -9999px; } #cboxNext:hover { background-position: bottom right; } #cboxClose { position: absolute; top: 5px; right: 5px; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMs9PFPtSBI9hTvHy6jNO_CiueutG_6l4j3C4MM_Gc-RPt4v8F7dyGrcP9MGmFb9SVh_WlB1hgITUcPresv7GeeqnuJeT6AfdnLvwpa1KDTF_MaGSHMm9en0kHG3hstiaKcUYR4yBRqxK5/s130/controls.png) no-repeat top center; width: 38px; height: 19px; text-indent: -9999px; } #cboxClose:hover { background-position: bottom center; }

6. Simpan template Anda
7. Sekarang temukan kode berikut.

</body>

8. Paste kode berikut diatas kode </ body> tag.

<div style='display:none'>
<div id='facebook-popup' style='background:#fff;position:scroll;z-index:99999;'>
<div style='text-align:center;padding-top:15px'> <h3 style='font-family: 'Source Sans Pro', Sans Serif; Font-size: 18px; font-weight: 300px; '>Receive All Free Updates Via Facebook.</h3>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FNAMA-ID-FACEBOOK-ANDA&width=342&height=300&show_faces=true&colorscheme=light&stream=false&show_border=false&header=false&appId=' style='border:none; overflow:hidden; width:342px; height:300px;'/>
</div>
</div>
</div>

9. Selesai dan lihat hasilnya

[source]