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:

Posted in: Blogger,Email Subcription,Widget