Rabu, 08 Agustus 2012

Beautiful Email Subscription Forms Untuk Blogger

Berlangganan via email adalah cara yang sangat populer untuk berlangganan setiap blog / situs dan mendapatkan update langsung di kotak email, itu sebabnya Anda selalu dapat melihat bahwa jumlah pelanggan feed .
Disini saya akan berbagi beberapa formulir berlangganan email indah yang dirancang oleh design3edge dan saya telah mengkonversi mereka dari file ke dalam widget blogger. Saya telah mencoba yang terbaik untuk membuat tutorial ini dengan satu langkah installation. Anda hanya perlu copy dan paste kode. Sekarang mari kita pergi ke bentuk dan melihat bagaimana cara menambahkan widget ini ke blogger blog.


Cara Tambah Formulir Berlangganan Email Untuk Blogger


1. Login ke akun blogger Anda.

2. Pada Dasbor klick Tata Letak.

3. Tambah Gadget.

4. Pilih elemen HTML/Java Script.

5. Lalu letakkan salah satu kode script berikut ke dalamnya.


Email Formulir Gaya 1



<style type="text/css">
#otowebsite-emailbox {
    background: url(http://2.bp.blogspot.com/-8wxOrteiKqg/UB_R-GmaRaI/AAAAAAAAFXA/SipyYV2RYj8/s1600/otowebsite.blogspot.com-blue.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}
form#otowebsite-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}
form#otowebsite-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#otowebsite-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style>
<div id="otowebsite-emailbox">
    <form id="otowebsite-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=otowebsite', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="otowebsite" 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>


Email Formulir Gaya 2



<style type="text/css">
#otowebsite-emailbox {
    background: url(http://2.bp.blogspot.com/-RsFXF_8WjKI/UB_R_lkuY7I/AAAAAAAAFXI/NLxjNnwTI9c/s1600/otowebsite.blogspot.com-red.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}
form#otowebsite-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}
form#otowebsite-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#otowebsite-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style>
<div id="otowebsite-emailbox">
    <form id="otowebsite-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri= otowebsite', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="otowebsite" 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>


Email Formulir Gaya 3



<style type="text/css">
#otowebsite-emailbox {
    background: url(http://4.bp.blogspot.com/-JrzO8gBfAm4/UB_SDPuYB1I/AAAAAAAAFXQ/cBjYzxBoyj0/s1600/otowebsite.blogspot.com-silver.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}
form#otowebsite-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}
form#otowebsite-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#otowebsite-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style>
<div id="otowebsite-emailbox">
    <form id="otowebsite-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=otowebsite', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="otowebsite" 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>

  • Ganti dua kode otowebsite dengan id feedsburner Anda.
6. Akhirnya menyimpan.

Sekarang Anda dapat melihat hasilnya pada sidebar blog Anda.

Saya rasa cukup untuk kali ini, mudah-mudahan Anda suka dengan Beautiful Email Subscription Forms For Blogger di atas!
Saya berharap bahwa Anda tidak akan menghadapi masalah ketika menerapkannya ke blog Anda. Namun jika Anda mendapatkan masalah Anda cukup melemparkan masalah dalam komentar!

Tidak ada komentar:

Poskan Komentar