Menaruh Kotak Email Subscription Dengan 3 Warna Berbeda

Setelah vakum beberapa hari akhirnya bisa memposting juga. Oke, pada kesempatan kali ini saya akan membagikan sebuah trik memasukkan email subcription ke dalam blog. Sebuah widegt yang di buat oleh design3edge. Tentu saja widget ini untuk memudahkan para pembaca kamu mendapatkan postingan kamu ke dalam email mereka secara gratis dan langsung. Ada 3 pilihan kotak subcribe yang saya bagikan, jadi kamu bisa memilih yang mana yang palin cocok buat blog kamu. Lihat caranya di bawah ini :

1. Masuk ke Blogger.com dengan akun kamu

2. Klik Tata Letak --> Tambah Gadget --> HTML/Javascript dan kamu masukkan salahsatu kode java script di bawah ini yang kamu inginkan.

a. Kotak Email Subcription Berwarna Biru

<style type="text/css">
#helperblogger-emailbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisO_wBJH2ojPqZYXG-mnCbRyhyJRZcEHOD9y3tR3iArMl_r1cXnIGxtewzjrE5rk8lthXvUXnNHxSsCaxgkJjUm5IgN9tpax1T583VoLPZBNWNRNdlVakTk98uKbCwX47CyaO8Srfyfoo/s1600/helperblogger.com-blue.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}

form#helperblogger-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}

form#helperblogger-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
}

form#helperblogger-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style> 

<div id="helperblogger-emailbox">
    <form id="helperblogger-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=hzndi', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="hzndi" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>

</div> 

b. Kotak Email Subcription Berwarna Abu-Abu

<style type="text/css">
#helperblogger-emailbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguaNPPt8ymmBQA77hiHUOLEPGqwWykLsuLokgMzZ1QSRzLeFkwPxnEAkjf8PbPF1VRkiehvEHks1hYyE3mzXWtGdjV7nAZWnXyx7qnr-rJWxrOn3dglMIZN7Gzb4KoXu1HjpGmxaBN0gs/s1600/helperblogger.com-silver.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}

form#helperblogger-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}

form#helperblogger-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
}

form#helperblogger-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style> 

<div id="helperblogger-emailbox">
    <form id="helperblogger-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=hzndi', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="hzndi" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div> 

c. Kotak Email Subcription Berwarna Merah

<style type="text/css">
#helperblogger-emailbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgafG1IwKN6obowVtfoY1ewpZZWz_u0ZTrdAARH8rNCNaTkYRZ3fs_SAQsZ4A_9MTeiOgZhrnjB7lEcN7azJKohL9b1IJeTh2dUGU03A_1zWWlvKh54qhNDsHW67PDoTQGFFN8vqdX1xdw/s1600/helperblogger.com-red.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}

form#helperblogger-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}

form#helperblogger-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
}

form#helperblogger-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style> 

<div id="helperblogger-emailbox">
    <form id="helperblogger-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=hzndi', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="hzndi" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>

NOTE :  

• Ganti kode hzndi di baris 39 dan 40 dengan Username Feedburner kamu.  

4. Simpan dan Lihat hasilnya 

Postingan Terkait:

Blogger

• Cara Menghapus Komentar Spam Secara Otomatis
• Cara Membuat Blog Terindeks Google dengan Cepat
• 5 Kesalahan yang Dilakukan Oleh Blogger Pemula
• Mengembalikan Blog yang Sudah Dihapus, Bisakah ?
• Apa Itu Niche Blogging ?
• Daftar 60+ Forum Do-Follow Ber-PageRank Tinggi 2014
• Cara Menghindari Blog Dihapus Oleh Google
• Cara Memilih Nama Blog & Situs yang Ramah SEO
• Cara Mengembalikan Mood Blogging
• Mengapa Subscriber Feedburner Menjadi 0 ?
• 7 Tips SEO untuk Blogger
• 10 Tips Mantap Untuk Meningkatkan Trafik Organik
• 7 Trik Membuat Artikel Lama Menjadi Populer
• 7 Cara Mendapat Pengunjung Dengan Mudah
• Tutorial Blog dan SEO Terkena Malware ?
• Bagaimana Mengefektifkan Backlink Dalam SEO
• 8 Tips Membuat Loading Blog Lebih Cepat
• Cara Membuat Kotak Fanpage Facebook Hitam Putih
• Optimasi Gambar Untuk Dapatkan Pengunjung
• Cara Menghindari SEO yang Berlebihan
• 8 Tips Untuk Seorang Blogger Pemula
• Cara Mendapatkan Google Sitelink Dengan Cepat
• Cara Membuat dan Tips Pengaturan Meta Tag
• Cara Meningkatkan Ranking Alexa Dengan Cepat
• Cara Mengklaim Situs di Alexa

Email Subcription

• 5 Widget yang Wajib Dimiliki Oleh Blogger
• Menaruh Widget Subscription Berbentuk Perangko

Widget

• Cara Membuat Kotak Fanpage Facebook Hitam Putih
• Cara Membuat Widget Subcription + Social Sharing + Facebook Like Box di Bawah Postingan
• Cara Membuat Lencana Facebook Melayang Untuk Blogger
• Membuat Widget Recent Post Dengan Thumbnail yang Bisa Berputar
• Cara Membuat Widget Popular Post Warna Warni V.2
• Menambahkan Widget Bookmark Otomatis di Blog
• Menambahkan Widget Social Share Melayang Keluar Tiba-Tiba
• Cara Membuat Twitter Box Untuk Blogger
• Membuat Kotak Email Subcription Muncul Tiba-Tiba
• Cara Memasukkan Tanda Tangan Kedalam Setiap Postingan Blog
• Membuat Widget Social Subcription Bergaya Wordpress
• Membuat Widget Artikel Terpopuler Dengan Bermacam Warna
• Cara Membuat 6 Animasi Twitter Melayang Untuk Blogger
• Menambahkan WIdget Sosial Bookmark dari Shareholic
• Menambahkan Widget Sosial Bookmark + Kotak Pencarian Di Blogger
• Cara Menaruh Facebook Like Box Secara Tiba-Tiba
• Cara Memasang Widget Sosial Bookmark Melayang Versi AddThis.com
• Menaruh Kotak Fanpage Facebook di Blogger - V3
• Menaruh Widget Sosial Bookmark di Side Bar
• Membuat Scroll Gambar Dengan Plugin jCarousel di Blogger
• Cara Menambahkan Widget Sosial Bookmark Berbentuk Segitiga
• Menambahkan Facebook Recommendations Bar kedalam Blogger
• Menambahkan Widget Icon Sprite Media Sosial di Blog
• Membuat Recent Comments dengan Avatar di Blogger

Posted in: Blogger,Email Subcription,Widget