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

Cara kerja Popup Email Subscribe Update Pada Blog ini hampir sama dengan pembuatan Popup Like Box Facebook yang dilengkapi dengan timer countdown yakni sama-sama terbuka pada saat halaman blog di buka atau direload dan sama-sama dilengkapi script pembaca cookies browser untuk tidak muncul kedua kali jika browser di reload (refresh) atau dikunjungi kedua kalinya.

Langkah-langkah pemasangannya sendiri juga tidak rumit karena hanya memerlukan sebuah kode css/javascript dan memasukkan ke dalam gadget html/javascript pada blog. Jika sobat ingin melihat langsung bagaimana cara kerjanya, silahkan klik live demo di bawah ini.

CSS, HTML, JavaScript dan Cara Memasang

Nah, jika sobat tertarik untuk menggunakan Popup box berlangganan artikel terbaru pada blog ini, berikut cara pemasangan dan kodenya :

• 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?attredirects=0&d=1" />
<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=blogcapoenk', '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 "blogcapoenk" dengan username feedburner yang sobat miliki

• Klik simpan dan lihat hasilnya..