Membuat box berlanggnan email dibawah posting

Hallo sob. Hari ini saya ingin share kembali box berlanggalan email setelah sebelumnya menulis box berlangganalan email dan widget berlangganan feed. Tulisan saya hari ini membuat box berlangganan email dibawah posting sebenarnya hampir sama dengan tulisa sebelumnya, yang berdeda mungkin hanya tampilan dan tempat untuk menaruh box berlangganan emailnya, yang kali ini saya simpan dibawah posting blog.
Box berlangganan email dibawah posting kali pun hampir sama ada beberapa tambahan yaitu follow facebook, twitter dan sedikit ditambah button share facebook, agar pengunjung yang menyukai tulisan kita tidak hanya bisa berlangganan email tetapi pengunjung juga bisa mengirim tulisan yang kita buat ke wall facebook mereka.
Ok.. buat sobat yang tertarik berikut adalah cara memasang box berlangganan email dibawah posting.
Pertama sobat masuk ke Dasbor >> Template >> Edit HTML jangan lupa untuk mencentang Expand Template Widge.
Setelah itu sobat cari kode <data:post.body/> untuk mempermudah pencarian bisa gunakan CTR+F atau F3. Setelah menemukan <data:post.body/> kemudian sobat letakan kode berikut tepat dibawah <data:post.body/> 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
form.emailform{
margin:20px 0 0;
display:block;
clear:both;
}
.mbttext{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0EWugNdoQ7Acw3arLwa_H1U_77eCw1zF0y7ECWDEnUgAl6Hw8-Ucdxgp0JJRlBp2Rbbd_UzP1kPj7SiUj0FgkBMzTtPoAokHTFU4CZ3nHnJ2QS7Hairmnn4Sk9SEL6Et6C2rABd0syw00/s28/w2b-mail.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.mbtbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

#doulike-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-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:500px;
}
#doulike-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#doulike-outer td{
padding:3px 0;
}
</style>

<div id='doulike-outer'>
<div id='doulike'>
<table width='100%'>
<tbody>
<span style='font-style:  italic; font-size: 15px; font-family: arial,sans-serif, verdana;  color:blue;'>Sobat suka tulisan ini..?</span>
<tr>
<td>

<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='button_count' send='true' show_faces='false' width='200'/>

</td>

<td align='left'> <p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Dapatkan Tulisan Gratis Via Email!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=fajar345&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=300&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='fajar345'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='mbttext' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email Sobat...&quot;;}' onfocus='if (this.value == &quot;Email Sobat...&quot;) {this.value = &quot;&quot;}' type='text' value='Email Sobat...'/>

<input alt='' class='mbtbutton' title='' type='submit' value='Submit'/>
</form>
</td>
</tr>
<tr>
<td><p style='color:#666; font-style:italic; margin:0px 0px 5px 0px;  '>Follow Fajar345!</p>
<a href='http://feeds.feedburner.com/fajar345' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgKDA80bQ9bvpRIgMc8R9JpZ0byR4w35T8rZzzogn_AiPGAcz-WKA3WiNmXHncoyI3yT0VRVlnfgnNCi1waN_KXdbEIczpOg5qlZ6Jo6W57zmyUDxTbkaPrUlmRHCFcDwp6PyOyBkxaKJ2/s40/w2bRSS+.png'/></a>

<a href='http://twitter.com/effezz' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdXzh0n9NFZedWK_I2VU_GptqOCsivy84yAqBiFska0bqf6S7Ihv77pMKh4TGlCuBDJBbKQnrrlE-YJuv0_XzqtL2CyuADw5_XNGkfmdIVjJ229Sh0F5hgzyi-PGyX0TyuoCJNbb2gcUrO/s40/w2bTwitter.png'/></a>

<a href='http://www.facebook.com/fajar345blog' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGaP6-9HVDr92AhsAcdjZdM_9-LO3I1iRboHjZotSSt6ITVTyS4OysydblQyugH3pb0BYveaSrZWs1DvFCVr9rKgC7asVH6THZR_K_PKVBdEceJJAh8R2ziGQKV3atYa3fOg50KPQm4uIY/s40/w2bFaceBook.png'/></a>
</td>
</tr>
</tbody></table></div></div>
</b:if> 

Setelah itu simpan template dan lihat hasilnya. Jangan lupa untuk mengganti kode yang berwarna biru dan sesuaikan dengan acount yang sobat miliki.
Untuk demo sobat bisa lihat box berlangganan email di bawah tulisan ini
 

Sobat suka tulisan ini..?

	Dapatkan Tulisan Gratis Via Email!
Follow Fajar345!