Cara Membuat Kotak Berlangganan Di Bawah Postingan

Cara Membuat Kotak Berlangganan Di Bawah Postingan.Membuat kotak berlangganan artikel di bawah postingan artikel adalah salah satu hal yang menurut saya cukup bermanfaat untuk mempermudah para pengunjung blog kita bila mau berlangganan artikel.Selain mempermudah pengunjung bila mau berlangganan,tehnik memasang kotak berlangganan artikel di bawah postingan juga berguna dalam mempercepat jumlah yang berlangganan artikel.

Pada catatan saya kali ini saya akan berbagi cara membuat kotak berlangganan di bawah posting yang sudah di lengkapi follow RSS,twitter,facebook, dan google+.Selain itu bila sobat mau memunculkan themes Readers nya di bawah postingan,cara ini juga bisa dilakukan.

Membuat kotak berlangganan artikel di bawah postingan ini juga saya khususkan buat sobat Asis Sugianto yang sudah me request tentang tutorial ini.

Berikut ini cara membuat kotak berlangganan di bawah posting yang akan saya bagikan.

1.Login ke Dasbor-Template-Edit HTML
2.Centang Expand template widget
3.Cari kode  <data:post.body/>  atau bila dalam template sobat banyak kode seperti itu,maka cari saja kode ini <div class=’post-footer-line post-footer-line-1’/>
4.Copy kode dibawah ini dan paste kan tepat di atas kode di atas <data:post.body/> atau <div class=’post-footer-line post-footer-line-1’/> (pilih salah satu):

<b:if cond=’data:blog.pageType == &quot;item&quot;’>

<style>
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}
.dcstyle{
background:url(https://3.bp.blogspot.com/-pl1ECUAcVEQ/T4YS7ZgR_uI/AAAAAAAAB_k/R92yDhiO65Q/s400/email_icon.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;
}
.dcsubmit{
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%);
}

#emailwidget-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:480px;
}
#emailwidget-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;
}
#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; ‘>Berlangganan artikel 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=CatatanDarmanto&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=’CatatanDarmanto’/>
<input name=’loc’ type=’hidden’ value=’en_US’/>
<input class=’dcstyle’ 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=’dcsubmit’ 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://feeds.feedburner.com/CatatanDarmanto’ rel=’nofollow’ target=’_blank’ title=’Suscribe to RSS Feed’><img src=’http://3.bp.blogspot.com/-ShqPVqX-vhs/TqgOXX5m9WI/AAAAAAAAFCg/WFRLxQ4yjuM/s1600/rss-30×43.png’/></a>

<a href=’http://twitter.com/kedbel’ rel=’nofollow’ target=’_blank’ title=’Follow us on Twitter’><img src=’http://2.bp.blogspot.com/-eVZSNf1mj_E/TqgOX_ldq1I/AAAAAAAAFCk/2wDDaA8esG8/s1600/twitter-30×43.png’/></a>

<a href=’http://www.facebook.com/CatatanDarmanto’ rel=’nofollow’ target=’_blank’ title=’Follow us on Facebook’><img src=’http://1.bp.blogspot.com/-sT9lHle5N54/TqgOWhi-amI/AAAAAAAAFCU/MwoQL3ZhEy4/s1600/facebook-30×43.png’/></a>

<a href=’https://plus.google.com/114920232367001977687/’ rel=’nofollow’ target=’_blank’ title=’Follow us on Google+’><img src=’http://3.bp.blogspot.com/-icT9kVFhtOs/TqgOXLJCbBI/AAAAAAAAFCY/pU4wo8HyHNI/s1600/googleplus-30×43.png’/></a>

</td>
</tr>
</tbody></table>
<div align=’right’><span style=’font-style: italic; font-size: 8px; color: solid #f3f3f3;’><a href=’http://catatandarmanto.blogspot.com/’ style=’text-decoration: none;’ target=’_blank’><font color=’#f4f4f4′ decoration=’none’>[Get this widget]</font></a></span></div>
</div></div>
</center>
</b:if>

4.Lakukan pratinjau  jika sudah bagus, simpan template. Jika belum jadi,tambahkan kode penutup </div> di  bawah kode terakhir sehingga menjadi: