Cara Membuat Pop Up Email Subscription Box Keren

Biar semakin banyak yang mengikuti blog kita melalui email, jadi harus pasang email subscription dimana-mana gan. Di sidebar, di bawah postingan atau pun dengan pop up gan. Kalo kalian sering berkunjung ke website yang keren-keren pasti setiap kita buka situsnya ada pop up email subscription nya ya gak.

Kalian tau PopUp Domination gak gan? Itu loh software berbayar buat bikin pop up box keren di website. Kalo loe pake tu software buat bikin pop up email subscription box dijamin deh website loe bakal tambah keren dan bisa nambah pengikut melalui email gan.

Kalo buat di Blogger bisa gak ya buat kayak begituan. Kabar baeknya sekarang loe bisa membuat pop email subscription box di Blogger cuma dengan nambahin kode aja gan. Kali ini gw bakal share cara membuatnya gan.

Sebelum ke cara membuatnya, gw mau ngasi tau kelebihan pop up email subscription box ini gan. Yang pertama pop up ini keren pastinya, terus pake cookie jadi bisa one time pop up gan. Dan juga dijamin berfungsi dan 99.9% mirip banget sama PopUp Domination gan.

Langsung aja disimak cara membuat pop up email subscription boxnya gan. Oh ya ini bukan gw yang buat tapi dari orang laen jadi dilarang keras ngerubah kode yang udah ada soalnya widget ini sudah ada hak ciptanya dan di lindungi sama DMCA gan.

Note : Inget selalu backup atau download template blognya untuk menghindari hal-hal yang gak di inginkan.

[ DEMO ]

Cara Membuat Pop Up Email Subscription Box Keren

Masuk ke Blogger terus pilih Template dan klik Edit HTML. Terus cari kode </body> dan pastein kode yang gw kasi di bawah ini di atasnya gan.

Bisa juga dengan cara cuma nambahin widget, cari Layout terus pilih Add a Gadget lalu cari HTML/JavaScript dan pastein kodenya disana. Tapi cara ini gw coba di beberapa template gak bagus posisinya terlalu kesamping kanan gan. Loe coba aja kalo gak berhasil pastein di template aja.

<!-- This Is A Copyrighted "EXE Style POP UP" Widget, Don't Try To Theft It Otherwise... -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="https://raw.github.com/EXEIdeas/JS/master/ColorBox-v1.3.16"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1)
{
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"770px", inline:true, href:"#exestylepopups"});
}
});
</script>
<style type="text/css">
/*
ColorBox v1.3.16
(Copyright (c) 2011 Jack Moore - jack@colorpowered.com)
UpDated By www.exeideas.com
(Copyright (c) 2011 EXEIdeas International - admin@exeideas.tk)
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#cboxOverlay{background:#000;opacity:0.5 !important;}
#cboxTopCenter{height:35px;}
#cboxMiddleRight{width:0px;}
#cboxContent{overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWODOWXktNUwl6YJVMJYnSyWNziljbkcVeOMjoM_DvlatLSaaQkynY-xKMsxsEshc8MO5yesISBk23m0whdJGFJLKC5O0aFTDP3aOGkkhyIB1Aic1mw2ARBRZlBLoMB4IuDR3yI9bkEXs/s400/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWJvLvVakJlfZ5Ybg0X1hE7ElGg4Xmglpdk_tEfXKOHrAMe_FQp8n6dSN85KmXv_mYUX4OBoB1TXWx9GIR37t4Czb5uVhW5FNKhQXnrYAOg9YpfO9HuZp3rs3JpR4ZnqLDINt86cPESrM/s400/loading.gif) no-repeat center center;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxClose{position:absolute; bottom:338px; right:0; cursor:pointer; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHNLnPJGCKX5NU2USPoGcaSRg2jAIo9RrmEjL4KyMQUIa9dka6-fjk2h7xpFivF-N8fW5oU0SNj0vy8Dsh8VcmvOrc7PjbtblfstXRcMvRnct-Tnpa-cD2f06pViPgN7t_AGLUtmWMJg/s40/exestylepopupclosebutton.png) no-repeat; width:40px; height:40px; text-indent:-9999px;}
#cboxClose.hover{opacity:0.8 !important;}
#exestylepopup{overflow:none; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQaabsAuo0KVeEX49m3MyRsdc3ppCSAdOetbkrBbK9lnwTcpWOjj__m6RHJPMVQHwqUA-FpSsNRHbfpiH4NYLchI-hKiz4g_jg8jKCv0ZCDPJMyuRelpk4UNyWCtP1KsrtKj4whjPksg/s748/EXEIdeasBlog.png) ; background-repeat: no-repeat; height: 350px; width: 770px; }
form#exestylepopup{display:block; margin:0;}
form#exestylepopup #exefield{padding:2px; position:absolute; top:162px; left:480px; width:238px; font-size:16px; border:none; background:transparent;}
form#exestylepopup #exebutton{position:absolute; left:474px; top:205px; width:249px; height:42px; border:none; background:transparent;}
</style>
<div style='display:none'>
<div id='exestylepopups' >
<form id="exestylepopup" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Alamat Feed', 'popupwindow', 'scrollbars=yes, width=600, height=550'); return true">
<input type="hidden" value="Alamat Feed" name="uri"/>
<input id='exefield' name='email' onblur='if (this.value == "") {this.value = "Ketik email disini...";}' onfocus='if (this.value == "Ketik email disini...") {this.value = ""}' type='text' value='Ketik email disini...'/>
<input type="hidden" name="loc" value="en_US" />
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="exebutton" />
</form>
</div>
</div>
<!-- This Is A Copyrighted "EXE Style POP UP" Widget, Don't Try To Theft It Otherwise... -->

Sekarang tinggal ngedit aja gan. Ganti ke 2 Alamat Feed sama alamat feed blog loe. Terus buat tampilannya loe bisa download file PSDnya [ disini ] gan, nanti tinggal di edit sendiri mau kayak gimana tampilan sama kata-katanya. Ngeditnya pake photoshop atau bisa edit online di pixlr gan.

Jangan pernah ganti ukuran tinggi sama lebar file gambarnya gan, ntar gak cocok sama kodenya. Terus kalo udah jadi gambarnya tinggal ganti aja background-image sama url gambar loe gan. Abis itu tinggal di Save beres. Sekarang loe udah punya pop up email subscription box keren di blog gan.

Buat setting biar pop up email subscription box ini muncul sekali aja jadi kalo pengunjung buka halaman yang laen pop up box ini gak muncul. Settingan awalnya udah kayak gitu, tapi kalo loe mau ngerubah biar si pop up box selalu muncul setiap pengunjung buka halaman laen tinggal diganti aja visited true jadi false gan.

Terus buat lamanya ( berapa hari ) biar pop up box ini muncul lagi kalo pengunjung balik lagi ke blog loe, tinggal di rubah aja angka 30 jadi angka antara 1 ampe 30 sesuai jumlah hari gan. Ini buat kalo loe set visitednya true gan.

Peringatan : Sekali lagi gw kasi tau kalo Widget ini ada hak ciptanya gan dan dilindungi sama DMCA jadi jangan coba-coba atau berani ngerubah kodenya.

Ow ya kalo loe mau pasang di Wordpress tinggal add widget aja, gw udah nyoba dan hasilnya sempurna gan. Sekian dulu yang bisa gw share tentang cara membuat pop up email subscription box keren di blog, semoga bermanfaat dan jangan lupa buat ninggalin komentar gan.

Update >>> Mohon maaf agan-agan gw gak tau kalau kode JSnya udah gak berfungsi, buat yang udah pasang tapi gak mau muncul silahkan di copy ulang kode di atas karena udah gw perbaiki.

Sumber : EXEIdeas - Cool EXE-Style POP-UP V2 Widget For Blog And Website.