Cara Membuat Fanss Page Pop-up Dengan JQuery

            Kali ini TB4all Akan Memberitahu Bagaimana Cara Membuat Fanss Page Pop-up Dengan JQuery,Tanpa Banyak Basa-Basi TB4all Akan Langsung Memberitahu Cara Membuat Fanss Page Pop-up Dengan JQuery. 

Caranya :
1. Login Ke Akun Blogger Sobat
2. Pilih tab Design > Edit HTML
3. Cari Kode ]]></b:skin> Biar Cepet Ketemu Pake Ctrl+F
4. Copy Script Dibawah dan Paste kan Tepat Diatas ]]></b:skin>


Langsung Copy-Paste Sctipt HTMLnya :

#popupContactClose{ cursor: pointer; text-decoration:none; } #backgroundPopup{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:100%; width:100%; top:0; left:0; background:#000000; border:1px solid #cecece; z-index:1; } #popupContact{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:384px; width:408px; background:#FFFFFF; border:2px solid #cecece; z-index:2; padding:12px; font-size:13px;} #popupContact h1{ text-align:left; color:#6FA5FD; font-size:22px; font-weight:700; border-bottom:1px dotted #D3D3D3; padding-bottom:2px; margin-bottom:20px;} #popupContactClose{ font-size:14px; line-height:14px; right:6px; top:4px; position:absolute; color:#6fa5fd; font-weight:700; display:block;}

5. Terus Cari Lagi Kode </head> Seperti Biasa Gunakan Ctrl+F Biar Cepet
6. Setelah Ketemu Copy Script Dibawah dan Pake kan Tepat Diatas Kode </head>

Langsung Copy-Paste Script HTMLnya :

<!--Pop Up Subscription--> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js' type='text/javascript'/> <script src='http://trikdantutorialblog.googlecode.com/files/popup.js' type='text/javascript'/> <script type='text/javascript'> var popupStatus = 0; //loading popup with jQuery magic! function loadPopup(){ centerPopup(); //loads popup only if it is disabled if(popupStatus==0){ $("#backgroundPopup").css({ "opacity": "0.7" }); $("#backgroundPopup").fadeIn("slow"); $("#popupContact").fadeIn("slow"); popupStatus = 1; } } //disabling popup with jQuery magic! function disablePopup(){ //disables popup only if it is enabled if(popupStatus==1){ $("#backgroundPopup").fadeOut("slow"); $("#popupContact").fadeOut("slow"); popupStatus = 0; } } //centering popup function centerPopup(){ //request data for centering var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; var windowscrolltop = document.documentElement.scrollTop; var windowscrollleft = document.documentElement.scrollLeft; var popupHeight = $("#popupContact").height(); var popupWidth = $("#popupContact").width(); var toppos = windowHeight/2-popupHeight/2+windowscrolltop; var leftpos = windowWidth/2-popupWidth/2+windowscrollleft; //centering $("#popupContact").css({ "position": "absolute", "top": toppos, "left": leftpos }); //only need force for IE6 $("#backgroundPopup").css({ "height": windowHeight }); } //CONTROLLING EVENTS IN jQuery $(document).ready(function(){ if ($.cookie("anewsletter") != 1) { //load popup setTimeout("loadPopup()",5000); } //CLOSING POPUP //Click the x event! $("#popupContactClose").click(function(){ disablePopup(); $.cookie("anewsletter", "1", { expires: 7 }); }); //Click out event! $("#backgroundPopup").click(function(){ disablePopup(); $.cookie("anewsletter", "1", { expires: 7 }); }); //Press Escape event! $(document).keypress(function(e){ if(e.keyCode==27 && popupStatus==1){ disablePopup(); $.cookie("anewsletter", "1", { expires: 7 }); } }); }); </script>

7. Kemudian Cari Kode Lagi </body>
8. Jika Sudah Ketemu Copy Kode Dibawah ini dan Paste kan Tepat Diatas Kode </body>

Langsung Copy-Paste Script HTMLnya :

<div id='popupContact'> <a id='popupContactClose'>CLOSE</a> <h1>join to my fans at facebook</h1> <iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=www.facebook.com/tb4all&width=292&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&appId=111025998997409' style='border:none; overflow:hidden; width:292px; height:258px;'/> <p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='www.tb4all.blogspot.com' target='_blank' title='Get this widget !'>:: Get this widget ! ::</a></span></p> </div> <div id='backgroundPopup'/>


9.     Ganti script www.facebook.com/tb4all  dengan Fans Page Facebook milik kamu.

10.    Dan Untuk Membuatnya Tampilan Secara Terus-Menerus Cari Kode <body> dan Ganti dengan Kode Tersebut dengan Kode Berikut.

        <body onLoad="loadPopup()">

11. Setelah selesai simpan template sobat dan lihat hasilnya

Waw Cukup Rumit Juga Ya :D Walaupun Rumit Tapi Pasti Berhasil :D Kecuali Ada Script Yang Gk Ke Copy. Selamat Mencoba!

Jika Sobat Mengalami Kesulitan Dalam Mengerjakannya Sobat Bisa Bertanya Kepada Kami Melalui Kontak Komentar.

Mohon Maaf Bila Ada Kesalahan Terhadap Script Mohon DiBeritahukan Kami Akan Selalu Membantu.