Tambah Gadget "Subcribe by Email" di Blogger

Untuk postingan yang ke tiga dihari ini saya akan bagikan untuk Anda, Bagaimana cara membuat "Subcribe by Email" di blogger? Ok, kita langsung saja ke langkah pembuatannya.

1. Masuk ke akun Blogger Anda.
2. Pilih Layout (Tata Letak) --> Add Gadget (Tambah Gadget) --> HTML/Javascript.
3. Paste kode berikut ini.

<style>
    #dgenera-blog {
        border: 0;
        margin-bottom: 10px;
        margin: 0 auto;
            width:300px;
    }

    #email-news-subscribe .email-box{
        padding: 5px 5px;
        font-family: "Arial","Helvetica",sans-serif;
       height:38px;}
    #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,#666 0,#333 100%);
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#666),color-stop(1,#333));
    
        font-family: "Arial","Helvetica",sans-serif;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #333;
        color:white;
      
        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-image:-moz-linear-gradient(top,#333,#666);
        background-image:-webkit-gradient(linear,left top,left bottom,from(#333),to(#666));
        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
    
        -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #333;
        color:#FFFFFF;
     }

    #other-social-bar {
        padding: 0px;
        overflow: hidden;
           height:37px;
         margin-top:-8px;
    }
    #other-social-bar ul {list-style: none outside none; padding-left: 4px;}

    #other-social-bar .other-follow {
        float: left;
        overflow: hidden;
        padding:5px;
        width: 270px;}
    #other-social-bar .other-follow ul {
        list-style: none outside none;
        padding-left: 4px;}
    #other-social-bar .other-follow li {

        display:inline;
        border:0;
      }

    #other-social-bar .other-follow li a {
        font-size: 12px;
        color:#666;
        font-weight: bold; font-family:arial;
        display:inline;
        }
    #other-social-bar .other-follow li.my-rss {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-DXPRyIqqhrVGAxWm2Yw5GfoMap6Vh4yZguRo8LSFld0LzAdRzFyH-nBoIIbVvE7X-wYTcwDkdrlTwmERPTaypH7p0UeACDzbSyXklb84W48svNnhBmzcQUzZ8YEKHEAC9lCWctgan3Q/s400/rss-16x16.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;
            margin-left:5px;}

    #other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{
    text-decoration:none;
    }
    #other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
    text-decoration:underline;
    }
    #other-social-bar .other-follow li.my-twitter {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2iILj0Yv_2Kkzynl_ssY_JAfPE09sWCmNt82xKCzZk-XLCcawnP6FVEMv6UyDUa2ocmwZfXLVbNkCFbXSy7WSpOO-zy_I2H-FHR1QOK_s4voJ0uq4WWjWmAkPdo7cxdc22UfyqvMgG1I/s400/twitter%2527.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;}
    #other-social-bar .other-follow li.my-gplus {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD06uH63NzLyz9YFdQg8yIXxAPJD1M0339EILo3Q32IQDwcYXteCfReQkkmziScTYfQWPrusY9aC3iXRZ5dVu6yBj0dmPpAaGdG9d1T6-zvgO7Q1Jipe4YE03adA1GGpJ2bmU7d4lh_wE/s400/gplus-16x16.png) no-repeat transparent;
        line-height: 1;
        width: 60px;
        padding: 0px 3px 1px 20px;
        margin-bottom:0px;}

.emailicon {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkqEvVDqHZ7gV3reLc86IfcYf5lq7TAwfmACwbJS9hIeTEmYheYHLiBsXsLrljr-wUCgV-6PTw4tq6YiI7tlwu_rjluDQ3pp19HIwNFucoZtq9JrG6N7uHxdJcYKWLO08RjxaAMJ3yxwrz/s400/MBT-RSS-FEED.gif") no-repeat scroll 0px 2px transparent;
     padding: 0px 20px 0px 95px;
    min-height:100px;
    margin: 0px;
    width: 183px;
    line-height: 20px;
    vertical-align: middle;
    font-size: 14px;
    color: rgb(51, 51, 51);
}

.emailicon p {
color:#FF8604;
font-size: 20px;
font-weight: normal;
font-family:  impact; 
padding:40 0px 10px 0px;
margin:0;
padding-top: 20px;
line-height: 25px;
text-shadow: 0px 1px 0px #fff, 0px 2px 0px #C6C6C6;
}
</style>
<!--[if IE]>
<style>
    #email-news-subscribe .email-box input.subscribe{
        background: #333;
    }
</style>
<![endif]-->
<center>
<div id="dgenera-blog">
<div class="emailicon">
Dapatkan artikel terupdate dari kami, Gratis!</div>
<div id="email-news-subscribe">
<div class="email-box">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=oknoburogu', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="email" gtbfieldid="10" id="email" name="email" onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" style="font-size: 11px; width: 160px;" type="text" value="Enter your email here..." />

<input name="uri" type="hidden" value="oknoburogu" /> <input name="loc" type="hidden" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Ikuti" /> </form>
</div>
</div>
</div>
</center>

4. Cari (Ctrl+F) dan ganti oknoburogu dengan ID Feedburner Anda.

Jika Anda belum mengetahui dan belum tahu cara mengecek ID/Feed Feedburner Anda. Anda bisa mengecek artikel selanjunya di Cara Melihat ID/Feed Feedburner.