cara bikin popup fanspage di blogger

cara bikin popup fanspage di blogger



oke gan bertemu lagi dengan saya ferdi sekaligus dari admin ferditechnews kali ini saya akan mengshare bagaimana cara bikin popup fanspage di blogger terutama fanspage facebook yah, keuntungan menggunakan popup ini fanspage kalian akan terlihat dan mengundang untuk menglike fanspage tersebut, tetapi ada kelebihan pasti ada kekurangan kekurangannya yaitu popup ini mengganggu pengunjung blog gan disini bisa kita atur jika ada pengunjung mengunjungi blog kita akan muncul sekali saja dalam 7 hari (bisa diatur berapa lamanya.

baca juga: 

oke gan langkah pertama buka blogger nya tata letak--> pilih dimana saja tambahkan gadget--> pilih html/javascript.


abis pilih html maka akan seperti ini




abis itu gan copy paste script ini gan 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
#fbox-background{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}#fbox-close{width:100%;height:100%}#fbox-display{background:#eaeaea;border:5px solid #828282;width:340px;height:230px;position:absolute;top:32%;left:37%;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}#fbox-button{float:right;cursor:pointer;position:absolute;right:0;top:0}#fbox-button:before{content:"CLOSE";padding:5px 8px;background:#828282;color:#eaeaea;font-weight:700;font-size:10px;font-family:Tahoma}#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover{color:#aaa;font-size:9px;text-decoration:none;text-align:center;padding:5px}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie=function(a,b,c){if(arguments.length>1&&"[object Object]"!==String(b)){if(c=jQuery.extend({},c),null!==b&&void 0!==b||(c.expires=-1),"number"==typeof c.expires){var d=c.expires,e=c.expires=new Date;e.setDate(e.getDate()+d)}return b=String(b),document.cookie=[encodeURIComponent(a),"=",c.raw?b:encodeURIComponent(b),c.expires?"; expires="+c.expires.toUTCString():"",c.path?"; path="+c.path:"",c.domain?"; domain="+c.domain:"",c.secure?"; secure":""].join("")}c=b||{};var f,g=c.raw?function(a){return a}:decodeURIComponent;return(f=new RegExp("(?:^|; )"+encodeURIComponent(a)+"=([^;]*)").exec(document.cookie))?g(f[1]):null};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });

});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/Ferditechnews-1207273652689767/?fref=ts&width=339&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>
<div id="fbox-link">kreasikan sendiri <a style="padding-left: 0px;" href="ferditechnews.blogspot.com " rel="nofollow">ferditechnews</a></div>
</div>
</div>

keterangan :
  • ganti https://www.facebook.com/Ferditechnews-1207273652689767/?fref=ts dengan link fanspage kalian.
  • hapus
    $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 }); jika ingin halaman popup selalu tampil ketika dikunjungi berapa kali pun
  • anda bisa mengubah
    .delay(5000) dengan selera anda

masukan kode seperti ini setelah di paste klik simpan gan


 setelah di simpan maka buka blog anda dan akan nampil seperti ini gan


oke gan tutorial kali ini selesai gan semoga ini semua membantu yah gan terus kunjungi dan lihat updatean-updatean terbaru dari blog ini yah.
 
Share on Google Plus

About ferdimbew

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.

0 comments:

Post a Comment