Thursday, July 19, 2012

Membuat Kotak Email Subcription Muncul Tiba-Tiba

10:48 PM Hzndi 4 comments


jika di postingan sebelumnya tentang tanda tangan, di postingan kali ini saya akan membagikan sebuag trik untuk memunculkan kotak email subscription secara tiba-tiba,  atau yang biasa disebut dengan pop up. Tentu saja widget ini digunakan untuk menambah pembaca setia blog kamu, sehingga mereka bisa mendapatkan postingan-postingan terbaru kammu dengan hanya memasukkan email mereka ke dalam kotak tersebut.

Biasanya, widget berbentuk pop up ini sangaaatlah menggangu para pengunjung kamu, mereka pasti tidak nyaman dengan munculnya widget ini secara tiba-tiba. Namun tenang saja, pembuat widget ini sudah mengatur widgetmya agar muncul hanya 1 kali dalam seminggu di pengunjung blog yang sama ! wah mantap banget bukan ? diambah lagi kamu juga dapat mengatur waktunya, apakah ingin seminggu sekali, sehari sekali, bahkan 3 hari sekali untuk pengunjung yang sama pun bisa ! langsung saja lihat tutorialnya di bawah ini yah.

1. Login ke Blogger.com

2. Klik Tata Letak --> Tambah Gadget --> HTML/Javascript dan kamu salin kode HTML/Javascript-ya di bawah ini.


<link rel="stylesheet" href="http://code.helperblogger.com/colorbox-css-code-helperblogger.css" />
<style>
 /*-----------------------------------------------------------------------------------*/
/*Email Subscribe Box Popup By Helper Blogger @helperblogger.com*/
/*Shared by hzndi.blogspot.com*/
/*-----------------------------------------------------------------------------------*/
#subscribe {
    font: 12px/1.2 Arial,Helvetica,san-serif;
    color: #666;
    height: 355px;
}

#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://code.helperblogger.com/jquery.colorbox.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">Sign Up for Free Email Updates</h4>
                <p>Get our latest updates direct in your inbox.Just enter your wail address
                    below....</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=hzndi', '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="hzndi" 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;"> <!-- Jangan Di Edit Kode ini agar tidak error --><span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://goo.gl/7OCEG" target="_blank" >Tutorial Blog dan SEO »</a></span></div></div>
</div>
</div>
</div>

NOTE :
  • Ganti angka 7 dengan angka berapapun yang kamu suka, Jika angka 7 maka akan muncul seminggu sekali kepada orang yang sama, jika 3 maka 3 hari sekali, dst.
  • Ganti 2 buah tulisan hzndi dengan username feedburner kamu.
  • Ganti Tulisan yang berwarna oranye dengan kata-kata yang kamu suka.
3. Simpan Template dan lihat hasilnya...

Postingan Terkait:

Blogger
Widget

Posted in: ,

4 comments:

  1. zachflazzJuly 19, 2012 at 11:39 PM

    mantap tu memang, munculnya cuma sekali seminggu ya..

    ReplyDelete
    Replies
    1. HzndiJuly 19, 2012 at 11:48 PM

      iyah, jadi ga mengganggu pengunjung setiia juga :)

      Delete
  2. Andi SitorusJuly 20, 2012 at 1:20 AM

    wah ane tertarik ne, apalagi munculnya 1x seminggu ... tanks....

    ReplyDelete

Komentarmu menunjukan kecerdasanmu, Kalau komentar cuma buat cari link buat apa ? :)

Twitter Delicious Facebook Digg Stumbleupon Favorites More