Masih seperti artikel kemarin tentang modifikasi form feedburner, kali ini saya akan berbagi modifikasi form feedburner yang bisa di letakkan di bawah postingan blog.
Demo seperti gambar screenshot di atas, dan berikut caranya:
1. Login blogger
2. Template > edit html
3. cari kode <data:post.body/> dan letakkan kode css dan html berikut di bawah <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<style>
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}
.style{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcyNtEFYbx7rYFpI_EPBzR6bUeuf4qPFXYEwTzGWzx-KBYmp8RpPFqAX9FCQzh_HI_PC8RIZk0i53_PLHURE2EDeoOT0cche613I_Fhkm4IvwhAMeoFBjXx4loHPL35OPHWh2Stv-fIvU/s1600/email-icon.png) no-repeat scroll -8px center #fff;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
}
.submit{
background-color:#ffc477;
-webkit-border-top-left-radius:20px;
-moz-border-radius-topleft:20px;
border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-moz-border-radius-topright:20px;
border-top-right-radius:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
border-bottom-left-radius:20px;
text-indent:-3.44px;
border:1px solid #eeb44f;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:16px;
font-weight:bold;
font-style:normal;
height:27px;
line-height:27px;
width:86px;
text-decoration:none;
text-align:center;
}
#emailwidget-outer {
background: none repeat scroll 0 0 #fff;
border: 1px solid #D3D3D3;
padding: 8px;
width:520px;
}
#emailwidget-outer td{
padding:3px 0;
}
</style>
<center>
<div id='emailwidget-outer'>
<div id='emailwidget'>
<table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
<tbody>
<tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
<td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 18px; margin:0px 0px 5px 0px; '>Get free daily email updates!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=mig33eagle', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='Realcombiz'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='style' name='email' onblur='if (this.value == "") {this.value = "Enter your email…";}' onfocus='if (this.value == "Enter your email…") {this.value = ""}' type='text' value='Enter your email…'/>
<input alt='' class='submit' title='' type='submit' value='Submit'/>
</form>
</td>
<td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'><p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px; '>Follow us!</p>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=mig33eagle' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5SP1OGqhiOorPE1F2mrBvg00JU9u-hu8WhOG3JxA23v8d4O70OvHEkI7Dl8jHs_R_6D62hgiFWZ4nWOGpyHcec0-ls0eBZLw7c3BYs1HIcnXFfn_Mx7IMj8cbM2F-gz8XMAD0bLUE5b8/s200/rss.png'/></a>
<a href='http://twitter.com/mig33eagle' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje0gFACFC2jFXBcaXuyER7cY7NApg82lew-sS1sAxcK2J9JAU8WpaFhyphenhyphenum5k_tdWkp1ARjJQ0WRilrHLUJt0XNSbQYcJLtUj-NSE6ko1a-Jjc_qrXDgRCOdH294Gx62WF_DvtiNlQ9rYI/s1600/twitter.png'/></a>
<a href='https://www.facebook.com/pages/Mig33-Eagle/327653677253564' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj76dzxdLUDxIt8FD2uk39iQKxPy6TZhGgbJqC9Hau0fwCr5YF9aG1ZM16_36qeHi21HlsALchihup92s6jzI52K2IvKZkGIPfLvVHbfemR2WXPT22Syqn9Ymd1wixJ1rSW7tCi9lgyLIk/s200/facebook.png'/></a>
<a href='https://plus.google.com/u/0/+AshNareswari/posts' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2CY4VOPuV-ucJcFlp96FyJMDNjn8AZjPPw8AgF0NsJ-55et6HLC0e0TCfeuP2XgbA2QL4SpJKBNvY1OIRisB_1EsEw6QbQiIM6KsYWlcvxYhl4hE4QpIrQqG_c7oEVjyKOakauUtwPX0/s1600/google+.png'/></a>
</td>
</tr>
</tbody></table>
<div align='right'><span style='font-style: italic; font-size: 8px; color: solid #3333FF;'><a href='http://www.mig33eagle.com/2014/02/form-feedburner-di-bawah-post-blog.html' style='text-decoration: none;' target='_blank'><font color='#3333FF' decoration='none'>Get this widget</font></a></span></div>
</div></div>
</center></b:if>
4. Simpan template
note:
Ganti yang berwarna di kode atas dengan akun sosial anda.
Get free daily email updates!
|
Follow us!
|