Membuat widget email subscrbie cantik, keren, professional

ScreenShoot, the Origin Widget

Membuat widget email subscrbie cantik, keren, professional - Widget yang saya bahas kali ini, sangat beda dengan widget yang pernah dibahas oleh para Blogger di indonesia. Yang umumnya vertical, tetapi widget kali ini berbentuk horizontal! Wew,,.. keren nggak?

Demonya bisa lihat kok di bagian atas blog ini. Namun, widget email subscribtion yang saya pasang diatas blog ini, tidak tampilan aslinya karna sudah saya beri beberapa 'sentuhan'. Tenang saja, karna anda nanti akan saya beri kode script tampilan widget yang asli.

1. Login blog.
2. Tata letak -> Add gadget.
3. HTML/Java script.
4. Copas kode dibawah ini :

<center>

<div id="feature_box">

          <div id="sleek-subscribe">

                  <div class="newsheadline"><span>Sign-up</span> for <cite>FREE</cite> Regular Newsletter.</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.open('http://feedburner.google.com/fb/a/mailverify?uri=Your Feed Burner Feed Name', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

            <input class="email" type="text" style="width: 450px; font-size: 15px;" id="email" name="email" value="Your Custom Text Goes Here" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />

            <input type="hidden" value="Your Feed Burner Feed Name Here Too" name="uri" />

            <input type="hidden" name="loc" value="en_US" />

            <input class="subscribe" name="commit" type="submit" value="Subscribe" />

        </form>

    </div> </div>

      </div>

</div></center>

<style>

/*---:[ feature box ]:---*/

#feature_box { background: #eee; border-style: solid; border-color: #ddd; }

/*---:[ home page teasers ]:---*/

.teaser a.teaser_link:hover { text-decoration: underline; }

.teaser .teaser_author { font-style: italic; }

    .teaser .teaser_author .author { font-style: normal; text-transform: uppercase; letter-spacing: 1px; }

.teaser .edit_post { letter-spacing: 1px; }

    .teaser .teaser_author a, .teaser a.teaser_comments, .teaser a.teaser_category, .teaser .edit_post a { text-transform: uppercase; letter-spacing: 1px; color: #888; border-bottom: 1px solid #eee; }

    .teaser .teaser_author a { font-style: normal; }

    .teaser .format_teaser a { text-decoration: underline; }

    .teaser .format_teaser a:hover { text-decoration: none; }

/*---:[ border package ]:---*/

#header, .post_box, .teasers_box, #footer, .image_box, .custom_box, #feature_box, #archive_intro, .prev_next, #comment_nav_2 { border-width: 0; }

/*Featured Box*/

.custom #feature_box{background:#f0f4f4; border:1px solid #d9eaea; padding:10px 15px 5px;}



/* Subscription Box */

#sleek-subscribe{display: block; margin:0 auto; }

.newsheadline {padding-left:20px;color:#222; font-size:20px; line-height:50px; float:left; font-weight:bold;}

    .newsheadline span{font-size:38px; color:#444; line-height:14px; font-family:"Trebuchet MS"; font-weight:normal;}

    .newsheadline cite{font-style:normal; color:#f00;}

.signform{background:url('images/form-bg.jpg') no-repeat;padding:0 0 10px 100px; float:right; }

      .txt2, .txt2:focus{width:140px; font-size:15px; background:#fff; color:#92c3c3; border:1px solid #E36B0A; margin:0 5px; float:left; padding:10px; width:160px; border-radius: 10px;}

      .btn2, .btn2:focus {background:#E36B0A; margin:0 5px; padding:8px 10px 9px; border:1px solid #AD5513; color:#fff; font-size:15px; border-radius:10px;}

            .btn2:hover{background:#6689b0; }

#email-news-subscribe .email-box{

        padding: 5px 10px;

        font-family: "Arial","Helvetica",sans-serif;

        border-top: 0;

        border-right: 1px solid #C7DBE2;

        border-left: 1px solid #C7DBE2;

        border-image: initial;

       height:34px;}

    #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}

    #other-social-bar {

        background-color: #D8E6EB;

        box-shadow: 0 1px 1px #FFFFFF inset;

        padding: 0px;

        font-family: "Arial","Helvetica",sans-serif;

        font-weight:bold;

        overflow: hidden;

        border: 1px solid #B6D0DA;

           height:57px;

    }

</style>