Cara Membuat Widget Subscribe / Berlangganan diatas Footer

Cara Membuat Widget Subscribe / Berlangganan diatas Footer. Widget subscribe ini adalah sebuah widget yang fungsinya untuk berlangganan artikel blog ke email pelanggan yang melakukan submit email ke widget tersebut, maka nantinya secara otomatis artikel yang baru kita publish akan muncul di email pelanggan tersebut, sudah jelas keuntungannya buat kita adalah untuk menjaring pengunjung melalui feed blog kita dan membaca artikel kita dengan mudah.

Untuk membuat widget subscribe atau widget berlangganan ini kita wajib mempunyai alamat feedburner atau link feed yang akan kita gunakan nantinya untuk widget berlangganan tersebut, jika anda belum mempunyai link feedburner tersebut silahkan buat dahulu disini " Cara Daftar RSS Feedburner " namun jika anda yang sudah punya link tersebut atau anggap saja anda sudah membuatnya, kita lanjut ke tutorial..

Cara Membuat Widget Subscribe / Berlangganan diatas Footer

1. Buka akun blogger anda.

2. Pilih menu template dan klik edit HTML

3. Sekarang letakan kode dibawah ini tepat diatas kode ]]></b:skin> atau </style>

/* Subscribe Box */
#subscribe-css{background: rgba(70, 40, 37, 0.71);overflow:hidden;clear:both;position:relative;margin:0;border-bottom:3px solid rgba(0,0,0,0.03);border-top:3px solid rgba(0,0,0,0.03)}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:18px;text-align:center;margin:0 0 20px 0;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background: rgba(70, 40, 37, 0.71);color: #ccc;margin: 10px 0;padding: 15px 20px;width: 35%; border: 0;}
.subscribe-css-email-button {
    background: #e74c3c;
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    padding: 14px 30px;
    margin-left: 15px;
    text-transform: none;
    font-size: 16px;
    border: 0;
    border-radius: 3px;
    transition: all .6s;}
.subscribe-css-email-button:hover{background:#333;}
#subscribe-css p.subscribe-note {
    margin: 16px;
    text-align: center;
    color: rgba(255,255,255,.6);
    font-size: 180%;
    font-weight: 400;
    line-height: normal;}
#subscribe-css p.subscribe-note span {
    position: relative;
    overflow: hidden;
    font-weight: 700;
    transition: all .5s;}
#subscribe-css:hover p.subscribe-note span:before {
    width: 100%;
}
#subscribe-css p.subscribe-note span:before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 3px;
    margin: 10px 0 0;
    background: rgba(255,255,255,.1);
    transition: all .5s;
}
#subscribe-css:hover p.subscribe-note span:before {
    width: 100%;
}

#subscribe-css p.subscribe-note span:before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 3px;
    margin: 10px 0 0;
    background: rgba(255,255,255,.1);
    transition: all .5s;
}

4. Selanjutnya letakan kode dibawah ini tepat diatas kode footer blog anda.

<div id='subscribe-css'>
  <p class='subscribe-note'>SUBSCRIBE to OUR <span>NEWSLETTER</span></p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=Oktavialie' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=Oktavialie&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='Oktavialie'/><put name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter Email '/><input class='subscribe-css-email-button' title='' type='submit' value='Submit'/></form>
</div>
</div>
</div>

Keterangan : ganti url feed oktavialie dengan url feed blog anda.

5 . Sekarang save / simpan template anda dan lihat hasilnya.

Oke sobat blogger, saya rasa sudah cukup untuk tutorial "Cara Membuat Widget Subscribe / Berlangganan diatas Footer " lebih dan kurangnya saya mohon maaf. salam blogger. :)