Membuat Kotak Subscribe FeedBurner

Blogging, merupakan kegiatan yang menyenangkan untuk berselancar di dunia Internet. Datang dan pergi dari satu blog ke blog yang lain memberikan Saya inspirasi untuk memposting artikel ini.

Yah, Kotak Subscribe ini terlihat elegan jika disandingkan di sidebar Blog dengan rentetan penghias berupa ikon-ikon Social Media seperti Twitter, Facebook, RSS Feed dan bahkan Google+. Menarik bukan?

Disini, Saya memberikan dua varian Kotak Subscribe yang elegan tapi tidak terlalu memberi kesan yang norak. Script ini Saya modifikasi karena terinspirasi dari beberapa Blog yang pernah Saya kunjungi. Baiklah, langsung saja disimak dan dipilih yang mana sekiranya Kotak Subscribe ini cocok dan nyetel dengan blog agan sekalian..

Kotak Subscribe Model Pertama

• Sign in di Blogger.com
• Pada menu Drop Down kemudian  Klik Layout >> Add a Gadget

• Copy  kode dibawah 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/AVvXsEgX906sVpr6DUdiW06Qb8lmG1NRkFa6Fc5xrHZh4eDpNdUryFBlkYOFNKXlqThQsLJiTddNCHY8BhpO0_zpj3lYsdqevchku6DCh147SEbw2qk7sQ7K9isdy7Rwt9kx60gpTXnEvkdmWXs/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/AVvXsEhzqMGIjjAv_0TcTvDnM-DT0u4vf6HoLBeVY4sDgKQTczNrB8yWQuw5Z7jtRCjn7aDx-s7ost89-Kmipyvm6guf4R5OdkBCti3bMLyt88AmtTFkkxJZRrmQr64KaVcy66FdEfYwawn6tnA/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/AVvXsEjM1cKalyblRhUU82XB-lyCJ-eVfnTalfltXejWtGffVxxpnK5U12eq_Q1514I9khMC9A4qgGZiLgmwuIY6-4GhxVKjVbNLB-PjA7UMtkukMcUlUQoR5i2sPc07npE_8pj3v34-a0w-KRA/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/AVvXsEi0i9zgirIi4eBDoK5vkv524GBPlk9xkuappyL15B1HxlCeMrKuD2AGuDKUuOzDiqneXs8NsvnievcEyr1n59lfEWstpgsKrYZo2uAN5CryzNAkjaQBHTjm6gvx8UFliYGwR8Fc2TS4692R/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]-->

<div id="rezafahlevimrf" >

<div class="emailicon"><p>Subscribe to our Free Email Updates! </p></div>
<div id="email-news-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='rezafahlevimrf', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="10" class="email" type="text" style="width: 160px; font-size: 12px;" id="email" name="email"value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" />

<input type="hidden" value="rezafahlevimrf" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form> </div> </div>
<div id="other-social-bar">
<ul class="other-follow">
<li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/rezafahlevimrf" target="_blank">RSS Feed</a> </li>
<li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href="https://twitter.com/rezafahlevimrf"  target="_blank">Twitter</a> </li>
<li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/u/0/100857887328478219781/ target="_blank">Google Plus</a> </li>
</ul>
</div>
</div>

• Kemudian Simpan Widget

NB: Ganti apa yang menurut Anda harus diganti

Kotak Subscribe Model Kedua

• Sign in di Blogger.com
• Pada menu Drop Down kemudian  Klik Layout >> Add a Gadget

• Copy  kode dibawah ini

<div align="center" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic4nHG93KFapPAhoKw9orc1Pc0FHOHlzDCU6LnLmQIVhyphenhyphenWe4pXzczZIzFLZgIEXzi4E2lWWPEEYHeSabBKrjAdeVRh3u2Umphf9yLlDXh2cx5k4WY1-e3AG0E2lCubiqwqUAxned6V5jQ6/s1600/feed+sidebar.jpg)"><a href="http://feeds.feedburner.com/rezafahlevimrf/" imageanchor="1"style="margin-left: .5em; margin-right: 1em; float: center;" rel="nofollow" target="blank"><img border="0" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCWrIP3rC7H85gkEFJw-Sme2-NeAilhuY9KojknTOUJ58VOI3sHQUv6L_lFIZPjrRIG5KpWTiE6DVMYvDS_NERZzuOczdmHT-9WwXlawZK9ixjDNilDXJ0U6WfqlVfVUjVliLt6fZf032T/s400/Untitled-5.png" width="290" /></a>
<style></style><style class="text/css"></style>
<div class="center">
Berlangganan Artikel Blog Ini</div><div class="mbtips-email">
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri='rezafahlevimrf', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" type="text" onblur="if undefinedthis.value == &quot;&quot;) {this.value = &quot;&quot;;}" onfocus="if undefinedthis.value == &quot;&quot;) {this.value = &quot;&quot;;}" />
<input type="hidden" value="rezafahlevimrf" name="uri" /><input type="hidden" name="loc" value="en_US" />
<input class="mbtips-emailsubmit" value="Submit" type="submit" />
</form>
</div>
<style class="text/css"></style>
<div class="table">
<table><tbody><tr align="right"><td align="right"><div class="subicons"><a class="Fadeout" href="http://www.facebook.com/eskrimsandwich" imageanchor="1" target="_blank" rel="nofollow"><img border="0" width="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMcaZIhauVUelEXmiW_ZIz7lVwT5fQUeV2joIKf5WNwdVV14LIG__epSymsK4tIVoHRifuLXbl0DL6Tpol28HTwbJxPDZHagaSfDPatW9hNzIScpr3fy-VbikFfi6nOMqCBnrSjt5V4inu/s1600/facebook-48.png" /></a></div></td><td><div class="subicons"><a class="Fadeout" href="https://twitter.com/rezafahlevimrf" imageanchor="1" target="_blank" rel="nofollow"><img border="0" width="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80Vfp4dMaTBFf34XJ8J1StF-El4yWjc5EjCVMSYry4dXNdowTvNbHCN9J5kkSF6FOWCFlg1_LswACQXxZYKZB_M5kotSUlVUNxTkgR7sfTqKYqndNzG4KjVsLfcQQeZKhnb19enhejcid/s1600/twitter-48.png" /></a></div></td><td><div class="subicons"><a class="Fadeout" href="http://feeds.feedburner.com/rezafahlevimrf/" imageanchor="1" target="_blank" rel="nofollow"><img border="0" width="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhN4GOp7SCYPTrmI-LCDsTFlRSxf_iFtGDXmWrIphzJYrRo7YWzmLVAO50Rl-N9U4ZnYnSxGD3_VZkc5g8p6LumHRtdud2amSVDFPbPOH18GBJ6AbNnUvA96vbw4lS2gyGFs8KllvHdJuL/s1600/rss-48.png" /></a></div></td><td><a class="Fadeout" href="https://plus.google.com/u/0/100857887328478219781"rel=publisher" imageanchor="1" target="_blank" rel="nofollow"><img width="30" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD9GXfJ3snbp3-mGieUzT4BCJSAn-zvbxoBnaGS6Uei8RnHqiAmhlCt1Rx9UASyeTaqc1ZxlQNR1qo_qCVUwxiGiJeIVNqqrAu_JwviD_Gkz2ZgxgDAGhI7ceRrOjedhBDr3LSyCDO7jiF/s1600/google-48.png" /></a></td></tr></tbody></table>
</div></div>

• Kemudian Simpan Widget

NB: Ganti apa yang menurut Anda harus diganti

Semoga Kotak Subscribe FeedBurner yang keren ini semakin memperindah tampilan blog sobat dan yang terpenting adalah sobat sekalian dapat berbagi artikel dan pengujung setianya blog sobat hehe..

Sekian dan Terima Kasih...