Header

Cara Membuat Pop Up Email Subscription Box Keren

Posted by : Admin On 20 January 2013 21 comments

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/AVvXsEgMItZ2Rj2R0GcoPm8_RBOJ55Z1QUxAG3b83Ixri3w87FpsvBexFZ660kbjuOoaD_9LEqGM5RcQpSKGtcGB5U_wgiOOnS0AVAoewJXn-fa54KSHHuBLNDIru8QVGSIlXnXPOvJ-KpDdC4c/s400/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOZlQsf5o-ADDFdfInkhI7r14IHRj7NF2yS_rfWiyP_ogMgKIFiN35s_sn621nJA6ifDvxr5Bj-CUauGpiNwJAU5egoaeEV8bYcUcd1K3_nlnC2BvFYETHN87kaNUFmeIZA1xTUeKvo58/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/AVvXsEiJ7deoAywMUKuBPAvdtaDQGEXJGtWh5sTA0ZYVg4OE_UCXwSJcGrMb2npNAXBVC2SmnQBiO_qK-4wY1XG2syGwjdordFehwcVQbLuaUkewvDSyTbwbjCfg4v8M8o-rYo_33gKD4krn0g/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/AVvXsEhID_4wjzGoNKVwB26_Y3jB2oGER6fD6wwh-sUrQ62y46jXZwZmWNvY_WVV8dh2GqWeikRlAQdLHKFur_Et57TdTDlWKBbfSFnhXE3NkAjOiPyi5qgW0QOkK2LWdQ9xX12kf_bL7epp7g/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.

    » Loe suka postingan ini? Silahkan di link back dengan mengcopy kode dibawah gan.

    URL :

    HTML link kode :

    » Luangin waktu 5 detik donk gan buat share postingan ini.

    Mau Dapet Updates Gan!

    Ikuti SEO Ciyus

    21 comments:

    1. Keren nih mau nyoba juga ahh... :D

      Nitip lapak yah agan yang ganteng Internet Science

      ReplyDelete
    2. gimana cara buat gambarnya biar keren gan?

      ReplyDelete
      Replies
      1. :w

        kan udah gw bilang di atas ngeditnya pake photoshop gan...
        kalo online di pixlr.com

        ok gan!

        Delete
    3. gan cara buat link gambarnya menjadi googleusercontent itu gimana, gw dah edit pake logo make ama corel tp gak tau dapat link href untuk gambarnya gimana, bantu lagii yaa gan hheee :D

      ReplyDelete
      Replies
      1. Hadeh... :v

        Loe buat post ato page baru gan, terus insert image and upload gmbarnya abis itu tinggal copy urlnya beres gan. gak perlu di publish biarin aja di draft, kalo besok2 mau upload gmbar tinggal lakuin hal yg sama ok.

        semoga brhasil gan.

        Delete
    4. okk gan makasih tutorialnya mantab......

      ReplyDelete
    5. Kenapa punya gw gak jadi ya???
      Apa htmlnya masih berfungsi???

      ReplyDelete
      Replies
      1. Sorry kode jsnya rusak gan,.

        Sudah gw perbaiki gan silahkan di copy ulang,. :l

        Delete
    6. mas kalo hanya ingin box yang warna hijau saja gmana ya cara ngeditnya, . . . ..krna biar kecil aja boxnya gtu, .. :D

      mohon pencerahan ,. ..
      fix11.blogspot.com/

      ReplyDelete
      Replies
      1. gk boleh di edit gan, ini widget punya orang. cba cari tutorial di blog laen yg boxny lbih kcil. :l

        Delete
    7. gun klo mu ngapus itu pop up dari templaste gimabna caranya?tolong dibantu ya.....,trims

      ReplyDelete
    8. Kalo buat wordpress ada ngga gan?
      mau dipake buat website ini --> http://www.superaneh.com/

      ReplyDelete
    9. keren beehhh nipit lapak ya
      http://easyfunandhealthy.blogspot.com/

      ReplyDelete
    10. Bisa gan, makasi buat tutorialnya.

      http://infonetfocuses.blogspot.com/
      ditunggu kunjungan baliknya.

      ReplyDelete
    11. Sukses gan, oh iyha gan, agan punya artikel tentang cara cepat hamil gak?

      ReplyDelete
    12. Terima kasih sangat membantu mas!paling tidak ada ilmu tambahan heheh
      fxmantap.com

      ReplyDelete
    13. thanks infonya...ijin diprakteklog my blog Obat Kuat Alami

      ReplyDelete
    14. makasih infonya gan
      http://ramuantradisionalkita.com/pengobatan-tradisional-kanker-lidah/

      ReplyDelete
    15. ini yang ane cari gan
      dari keyword google kebanyakan pada gk popup

      ReplyDelete

    Yang komen spam dan komen asal ga punya otak bego

    Terima Kasih

    Admin SEO Ciyus

    Berikutnya Sebelumnya