Cara Menambahkan Form Email Subscribe Di Blogger

Ketika anda memberikan isu yang berkhasiat di blog anda, maka beberapa dari pembaca anda ingin mendapat update post terbaru dari blog anda. Untuk itu, anda perlu Form Email Subscribe di blog anda, sehingga pengunjung yang tertarik dengan artikel anda sanggup dengan gampang mendapat update post terbaru dari anda.

Untuk menambahkan Feed Email atau Form Email Subscribe ke blog blogger Anda (blogspot) itu sangatlah mudah, Cukup ikuti langkah-langkah Di bawah.

Demo

Demo

Cara Menambahkan Form Email Subscribe di blogger

Langkah 1. Login ke Blogger, lalu pergi ke Tata Letak(Layout) > klik pada link "Add Gadgets" :

Add Gadget

Langkah 2. Dari jendela pop-up, gulir ke bawah dan klik pada gadget "HTML/JavaScript" :

Gadget Html/JavaScript

Langkah 3. Paste arahan berikut dalam kotak kosong:

<style>

#feedform{margin-bottom:12px;}

.hl-email:before,.hl-email:after{content: "";

position: absolute;

bottom: -3px;

left: 2px;

right: 2px;

height: 1px;

border-top: none;

background: #F0F0F0;

border: 1px solid #ccc;

}

.hl-email:after{left: 4px;

right: 4px;

bottom: -5px;

box-shadow: 0 0 2px #ccc;

}

.hl-email{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkZSQAvUnxPHkp9MF5C8EeAonWAiE-5V2Pncv3mHwh0tjUxq_2fK2rwWdTGtdIgP2Et6chxk5TySUitsSec-OhcLFGCLEWt0ZrPywWUqrN8P6a-N8LaAwUPKEKmXyxIqfqtxCQfCCstp4/s1600/mail.png) no-repeat 12px 12px ;

width:270px;

background-color:#f0f0f0;

padding:10px 65px 5px;

padding-right:2px;

float:left;

font-size:1.4em;

font-weight:bold;

margin:0 12px 10px 0;

position: relative;

color:#686B6C;

box-shadow:0 0 13px #cecece;

}

.hl-emailsubmit{

background:#9B9895;

cursor:pointer;

color:#fff;

border:none;

padding:3px;

text-shadow:0 -1px 1px rgba(0,0,0,0.25);

-moz-border-radius:6px;

-webkit-border-radius:6px;

border-radius:6px;

font:12px sans-serif;

}

.hl-emailsubmit:hover{

background:#E98313;

}

.textarea{

padding:2px;

margin:25px 10px 6px 2px;

background:#f9f9f9;

border:1px solid #ccc;

resize:none;

box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);

-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);

-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;

width:150px;

color:#666;}

.copyright{text-decoration:none;color:#9A9794;font-size:11px;font-family:calibri;float:right;margin:0 35px 0 0;}

.copyright:hover{color:#000;}

</style>

<div class="hl-email">

Get More Free Article!!!<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=duniatutorials', 'popupwindow', 'scrollbars=yes,width=750,height=520');return true">

<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == "") {this.value = "Enter your email here";}" onfocus="if (this.value == "Enter your email here") {this.value = "";}" value="Enter your email here" type="text" />

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

<input class="hl-emailsubmit" value="Get It!!!" type="submit" />

</form>

<a class="copyright" href=" " target="blank"> feedburner</a>

</div>

Pengaturan Lanjutan (Optional):

Ganti Teks "Get more free article!!!" yang berwarna biru dengan teks yang anda inginkan.
Ganti alamat url warna hijau untuk mengubah icon email.
Untuk mengubah lebar atau text area, peningkatan / penurunan 150px nilai merah
Gantikan http://feedburner.google.com/fb/a/mailverify?uri=duniatutorials dengan link atau url feed email Feedburner anda. Anda sanggup mendapatkannya dengan mengunjungi akun feedburner anda lalu arahkan ke "publicize" dan lalu "Email Subscriptions".
Ganti duniatutorials dengan judul feed anda. Terlihat pada selesai link feed anda. Dalam kasus saya itu yaitu http://feedburner.google.com/fb/a/mailverify?uri=duniatutorials

Langkah 4. Sekarang Simpan widget dan periksa pada blog anda. Saya rasa itu akan bekerja dan selamat Menikmati!, dan rasakan perbedaannya.