Cara Mudah Membuat Popup Email Subscribe / Berlangganan Artikel Terbaru Pada Blogger

Email subscription adalah sebuah sarana untuk mendapatkan pembaca tetap blog dan Salah satu tempat yang paling strategis dalam pemasangan form email subscription ini adalah pada layar awal (popup) karena sangat mudah untuk dilihat pengunjung. Popup seperti ini dirancang khusus untuk tidak muncul kedua kalinya jika blog dikunjungi kembali sehingga tidak akan mengganggu kenyamanan pengunjung.

Cara Membuat Popup Email Subscribe / Berlangganan Artikel Terbaru Pada Blog


CSS, HTML, JavaScript dan Cara Pemasangannya

  • Login ke Blogger
  • Pilih Tata Letak » Add Gadget » HTML/Java Script
  • Copy paste kode di bawah ini dan pastekan tepat di dalam box HTML/Javascript
<link rel="stylesheet" href="https://sites.google.com/site/lostsectorsite/css-lostsector/lostsector-popup-email-subscribe.css" />
<style>
#subscribe {
    font: 12px/1.2 Arial,Helvetica,san-serif;
    color: #666;
    height: 400px;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
    text-decoration: none;
}
.box-title {
    color: #F66303;
    font-size: 20px !important;
    font-weight: bold;
    margin: 10px 0;
    border: 1px solid #ddd;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    box-shadow: 5px 5px 5px #CCCCCC;
    padding: 10px;
    line-height: 25px;
    font-family: arial !important;
}
.box-tagline {
    color: #999;
    margin: 0;
    text-align: center;
}
#subs-container {
    padding: 35px 0 30px 0;
    position: relative;
}
a:link, a:visited {
    border: none;
}
.demo {
    display: none;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="http://lostsector-javascript.googlecode.com/files/pupup-subscribe-lostsector.js"></script>
 <script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"390px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<style> .home-featured-right {
    background: url(http://demo.studiopress.com/balance/wp-content/themes/balance/images/dashes-bg.png) #d05353;
    border: 5px solid #fff;
    font-size: 16px;
    margin: 0px;
    width: 320px;
    font-family: calibri;
}
.home-featured-right,
.home-featured-right p,
.home-featured-right h4.widgettitle {
    color: #fff;
    text-shadow: #a64242 -1px -1px;
    text-align: center;
}
.home-featured-right p {
    font-size: 16px;
    margin-bottom: 20px;
}
.home-featured-right .widget {
    margin: 35px;
}
.home-featured-right h4.widgettitle {
    font-size: 26px;
    margin-bottom: 20px;
}
.home-featured-right input[type=text] {
    -moz-box-shadow: inset 0 1px 2px 1px #eee;
    -webkit-box-shadow: inset 0 1px 2px 1px #eee;
    background: #fff url(http://demo.studiopress.com/balance/wp-content/themes/balance/images/email-icon.png) no-repeat 16px 15px;
    border-bottom: none;
    border-left: 1px solid #963c3c;
    border-right: none;
    border-top: 1px solid #963c3c;
    box-shadow: inset 0 1px 1px 1px #eee;
    color: #000;
    font-family: Verdana, Arial, Tahoma, sans-serif;
    font-size: 12px;
    padding: 14px 15px 14px 45px;
    width: 180px;
}
#home-featured .home-featured-right input[type=submit] {
    background: url(http://demo.studiopress.com/balance/wp-content/themes/balance/images/email-button.png) no-repeat !important;
    border: none;
    font-size: 0;
    height: 28px;
    margin: 0 0 0 15px;
    line-height: 0;
    text-indent: -9999px;
    width: 26px;
}
#email-news-subscribe .email-box {
    padding: 5px 10px;
    font-family: "Arial","Helvetica",sans-serif;
    border-top: 0;
    border-image: initial;
    height: 35px;
    margin-left: -20;
}
#email-news-subscribe .email-box input.email {
    background: #FFFFFF;
    border: 1px solid #dedede;
    color: #999;
    padding: 7px 10px 8px 10px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    border-image: initial;
    font-family: "Arial","Helvetica",sans-serif;
}
#email-news-subscribe .email-box input.email:focus {
    color: #333
}
#email-news-subscribe .email-box input.subscribe {
    background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
    background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
    -pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
    font-family: "Arial","Helvetica",sans-serif;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 1px solid #cc7c00;
    color: white;
    text-shadow: #d08d00 1px 1px 0;
    padding: 7px 14px;
    margin-left: 3px;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    border-image: initial;
}
#email-news-subscribe .email-box input.subscribe:hover {
    background: #ff9b00;
    background-image: -moz-linear-gradient(top,#ffda4d,#ff9b00);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
    outline: 0;
    -moz-box-shadow: 0 0 3px #999;
    -webkit-box-shadow: 0 0 3px #999;
    box-shadow: 0 0 3px #999
        background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
    background: -moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
    -pie-background: linear-gradient(270deg,#ffda4d,#ff9b00);
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 1px solid #cc7c00;
    color: #FFFFFF;
    text-shadow: #d08d00 1px 1px 0
}
</style>

<div class="home-featured-right">
    <div id="enews-2" class="widget enews-widget">
        <div class="widget-wrap">
            <div class="enews">
                <h4 class="widgettitle">Dapatkan Artikel Terbaru Kami Secara Gratis…!!!</h4>
                <p>Dapatkan artikel terbaru kami langsung di inbox. Cukup masukkan alamat email sobat di bawah ini, kemudian tekan subscribe…!!!</p>
                <p> Your privacy and email address are safe with us!</p>
                <div id="email-news-subscribe">
                    <!-- Email Subscribe -->
                    <div class="email-box">
                        <form action="http://feedburner.google.com/fb/a/mailverify" method="post"
                        target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=lostsectorblog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
                            <input class="email" type="text" style="width: 150px; font-size: 12px;"
                            id="email" name="email" value="Enter your email here" onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;"
                            onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" />
                            <input type="hidden" value="hblogger" name="uri" />
                            <input type="hidden" name="loc" value="en_US" />
                            <input class="subscribe" name="commit" type="submit" value="Subscribe"
                            />
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end .home-featured-right -->
<div style="background: #fff;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"> <!-- Don't remove the credit links,If you removed credits then your gagdet will not work --><span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://lostsector.blogspot.com/2012/12/cara-membuat-box-popup-berlangganan-artikel-blog.html" target="_blank" >Get This Widget »</a></span></div></div>
</div>
Keterangan :
Ganti "lostsectorblog" dengan username feedburner yang anda miliki
  • Klik simpan dan lihat hasilnya..
Demikianlah tutorial tentang Bagaimana Cara Membuat Popup Email Subscribe / Berlangganan Artikel Terbaru Pada Blog kali ini, semoga ada manfaatnya. Terima kasih dan happy nice blogging...!!!

Unknown
Unknown

26 comments:
Write comment
  1. ini yg ane cari...

    nitip blog ane ya gan...

    http://dammar-asihan.blogspot.com/

    ReplyDelete
    Replies
    1. manthap gan artikelnya, bikin jadi lebih keren dan rapih giribig.com

      Delete
  2. Thanks gan, jumlah subscriber ane udah meningkat berkat popupnya

    ReplyDelete
  3. :S:S:S pusing akunya sush banget ya :S bisa ga yg tinggl copy paste hihihi

    ReplyDelete
    Replies
    1. Susahnya dimana ? Tinggal Copy doang lalu pastekan kedalam gadget ! :p

      Delete
  4. numpang iklan ya om admin
    ingin belajar trading Forex,index,komonditi,cfd.,
    belajar analysis fundamental ,, belajar indikator
    semua nya ada di sini
    klik dan share yaa trimakasi

    http://www.pakartrading.com/

    ReplyDelete
  5. kak,,, ini cuma muncul sekali aja.... gimana ngerubah biar bisa muncul setiap habis di reload atau muncul di setiap halaman ?

    makasih sebelumnya kak... :)

    ReplyDelete
    Replies
    1. Hapus script ini.

      <script type="text/javascript">
      jQuery(document).ready(function(){
      if (document.cookie.indexOf('visited=true') == -1) {
      var fifteenDays = 1000*60*60*24*7;
      var expires = new Date((new Date()).valueOf() + fifteenDays);
      document.cookie = "visited=true;expires=" + expires.toUTCString();
      $.colorbox({width:"390px", inline:true, href:"#subscribe"});
      }
      });
      </script>

      Delete
  6. oya kak aku udah follow this blog...
    follow back ya di diary-pricillia.blogspot.com

    ReplyDelete
  7. kak script nya udah aku hapus...

    tapi tetep gak mau tu,,, :'(

    ReplyDelete
    Replies
    1. Itu mungkin karena scripnya sudah sempat terbaca cookie browser yg mbak gunakan. Coba buka blog mbak pake browser laen!

      Delete
  8. trus cara buang cookies nya gimana tu kak...?? :o
    udah akku ctrl+shift+D kok tetep ya... :)

    ReplyDelete
  9. nahh barusan aku buka pke internet explorer tetep gak mau baca kak... tapi tetep 1 pc aku buka nya..

    ReplyDelete
  10. mantap gan tutorialnya,. udah ane coba praktekin dan hasilnya sukses,. thanks gan,.

    ReplyDelete
  11. Kalau untuk dipasang di wordpress di taruh sebelah mana ini ya mas? ajarin dunk!

    ReplyDelete
  12. AnonymousJuly 12, 2014

    Di live demo-nya kok tidak ada gan..? Saya coba saja deh.. Terima kasih sudah sharing artikel bermanfaat..

    ReplyDelete
  13. Informasinya bermanfaat sekali untuk saya gan, terima kasih.

    ReplyDelete
  14. Artikel yang sangat berguna isinya. Terima Kasih Info Freebet Terbaru

    ReplyDelete
  15. kok gak muncul ya gan? yg live demo juga gamuncul

    ReplyDelete
  16. Ane pakai gan,terma kasih sharingnya !

    ReplyDelete
  17. belum berhasil gan... kenapa ya, bantuin ommmmm....

    ReplyDelete
  18. dapet pesan ini gan
    Konten ini belum tersedia melalui sambungan terenkripsi

    itu gimana yaa

    ReplyDelete
  19. makasih gan infonya saya coba dulu.... salam dari caramitapengonline.blogspot.com

    ReplyDelete
  20. bantu follow blog gan, utk support pendidikan bio4fun.blogspot.co.id

    terima kasih :)

    ReplyDelete