Membuat Form Email Subscribe Dibawah Posting Blog

Membuat Form Email Subscribe Dibawah Posting Blog – tentu sudah tidak asing lagi dengan adanya form email subcribe di dalam template blog. Dengan adanya form email subscribe yang terpasang pada blog akan sangat membantu baik itu dari author blog dalam mempublikasikan ke media maupun lebih mempermudah visitor dalam menemukan artikel yang di publikasin oleh blog tersebut dan nantinya pemilik email akan menerima pemberitahuan mengenai artikel yang di publikasikan begitu juga seterusnya akan menerima pemberitahuan secara terupdate melalui email selagi masih berlangganan. Untuk membuat form email subcribe agar bisa tampil dibawah posting blog juga tidak rumit dan bahkan sangat mudah. Caranya bisa di ikuti dengan menggunakan langkah-langkah yang ada dibawah ini, berikut tutorialnya untuk Membuat Form Email Subscribe Dibawah Posting Blog.

1. Login ke akun blogger.
2. Kemudian klik Template lalu pilih Edit HTML.
3. Copy kode berikut ini lalu paste di atas kode ]]></b:skin>

#evolutions-widget { background: #e9fbe9; border: 2px solid #52e052; padding: 3px 8px; margin: 20px auto; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; width: auto; box-shadow: 1px 1px 4px #52e052 inset; }
#evolutions-widget:hover { background: darkgreen; }
#evolutions-widget td { padding: 3px 0; }
form.feedburner { margin: 0px; display: block; clear: both; }
.form-email { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXcsyfTYhQagfueiecuztF_JDpZlWAk2ANcmQPlcFrtPJ-9YSh9lCs5tcgOBKBb-ArUZImFDUEg96WQhbHVZLGsmtdAs1ErHeVPLxasn5uB6rEy2zJIJ1K3UcXLRn9qc9J5mj_zoBeNOHL/s1600/helperblogger.com-email-icon.png) no-repeat scroll 4px center transparent; padding: 7px 15px 7px 35px; color: #000; font-weight: bold; text-decoration: none; border: 1px solid #52e052; box-shadow: 1px 1px 4px #52e052 inset; }
.buttonsubmit { color: #000; font-weight: bold; text-decoration: none; padding: 6px 15px; border: 1px solid #52e055; cursor: pointer; background: #52e052; }

4. Selanjutnya gunakan CTRL+F untuk mencari kode <data:post.body/> biasanya terdapat 2 kode atau bisa lebih, sesuaikan saja dengan template blog yang anda gunakan.
5. Lalu copy kode berikut ini kemudian paste dibawahnya <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div id='evolutions-widget'>
<div id='emailwidget'>
<table style='border:none; margin: 0px; padding: 0px;' width='100%'>
<tbody>
<tr style='border:none; margin: 0px; padding: 0px;'>
<td align='left' style='border:none; margin: 0px; padding: 0px;'>
<p style='color:#000; font-weight: bold; font-size: 18px; margin:0px 0px 15px 0px;font-family:georgia;font-style:bold; '>
Get Update Via Email !
</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=masandes&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='masandes'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='form-email' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>
<input alt='' class='buttonsubmit' title='' type='submit' value='Submit'/>
</form>
</td>
<td style='border:none; margin: 0px; padding: 0px;'>
<p style='color:#000; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px;font-family: georgia; '>
Follow Me !
</p>
<a href='http://feeds.feedburner.com/masandes' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHSaOcaeUQCdLe7LcD0pRjEZrDROxeALFGM_8uGIGKzMEGV8b8_qT5RgjgDnzv4b-TIFkAPIs1zUYSIXICsY7AE-Olfofo61ISRDM_4Uff-2PVNUnSrAM9j8QXkkWS1GmxmiajeI8prx8/h120/Faceblog+Evolutions+%283%29.png'/></a>
<a href='http://www.facebook.com/andestyle' rel='nofollow' target='_blank' title='Follow Me on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3eE5mV0qHhtn6nOa58XK4Aenl3t6NO6c0HTJ4KsdXvC29OYNPv3Ege_SZpnJ_1tpmuGrlEq_9gsGUrxZWaf_9-tuu62MVM-o-H3SMeNTzFgiStAc56SR7FwXrBWIjS61yA5SWj_Hi0yg/h120/Faceblog+Evolutions+%281%29.png'/></a>
<a href='https://plus.google.com/106527290580119996124/' rel='nofollow' target='_blank' title='Follow Me on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ16k6G2HgrSn0mMUxG1EpwXSd9_8ZTKMhTniMTGoyTSy8zuBMAm6j_rzJv3UvlG8HlnRZzHyIcsyVFeRl4UmpjQaQtRIPAL3eMPtUm2jnhrS2tYlTkbKmCIW5zZyhD5Bri0DQ0NqKxN8/h120/Faceblog+Evolutions+%282%29.png'/></a>
</td>
</tr>
</tbody>
</table>
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fandestyle&amp;width=450&amp;height=21&amp;colorscheme=light&amp;layout=standard&amp;action=like&amp;show_faces=false&amp;send=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
<span style='font-size: 8px; text-decoration: none; text-align:right;'><a href='http://mas-andes.blogspot.com' target='_blank'>[Get this widget]</a></span>
</div>
</div>
</b:if>

6. Langkah terakhir klik Simpan Template.