Cara Membuat Kotak Form Berlangganan Artikel Di Bawah Posting

Jika kita mempunyai sebuah blog tentunya diperlukan bagi pengunjung ketika ingin berlangganan artikel dari blog yang kita kelolah, untuk mempermudah bagi pembaca/pengunjung pemilik blog biasanya menambahkan kotak form berlangganan artikel. Maka untuk menjawab pertanyaan melalui komentar pada judul Cara Memasang Meta Deskripsi Dan Meta Keyword Agar SEO Friendly, pada kesempatan ini saya akan memberikan Cara Membuat Form Berlangganan Artikel Dibawah Posting dengan ditambahkan widget social network.

Adapun Fungsi dari pembuatan form berlangganan via email adalah untuk mempermudah pengunjung blog yang dijelaskan sebelumnya agar bisa berlangganan dan mendapatkan informasi posting terbaru melalui email, jadi jika anda memposting artikel baru maka para pelanggan yang sudah memasukkan email melalui form akan secara otomatis mendapatkan kiriman email posting terbaru anda, singkatnya seperti itu. Agar lebih jelas untuk melihat demo dari kotak form berlangganan via email klik disini.

Cara membuatnya sebagai berikut :

Pertama, Login ke akun blog blogger anda.

Kedua, Pilih Template..

Ketiga, Untuk Menjaga template anda, silahkan download dulu template, klik dawnload template lengkap yang berada pada samping pojok kanan.

Keempat, Klik Edit HTML, Lanjutkan, kemudian jangan lupa untuk Expand Template Widget.

Kelima, gunakan Ctrl F atau F3 cari kode <data:post.body/> kemudian letakkan kode berikut ini tepat setelah atau 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(http://kraengfrancisco.googlecode.com/files/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;'>Anda Suka? Klik</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; '>Berlangganan Artikel 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=kraengfrancisco&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 Anda...&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; '>Kraeng Francisco</p>
<a href='http://feeds.feedburner.com/kraengfrancisco' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='http://kraeng-francisco-tutorial.googlecode.com/files/rss-icon.png'/></a>

<a href='https://plus.google.com/110218949293092090295' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='http://kraeng-francisco-tutorial.googlecode.com/files/gplus-icon.png'/></a>

<a href='http://twitter.com/KraengFrancisco' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='http://kraeng-francisco-tutorial.googlecode.com/files/twitter-icon.png'/></a>

<a href='http://www.facebook.com/kraengfrancisco' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src=' http://kraeng-francisco-tutorial.googlecode.com/files/facebook-icon.png'/></a>
</td>
</tr>
</tbody></table></div></div>
</b:if>
</div>

Keenam, Klik Pritinjau untuk melihat tidak terjadi eror saat edit template, jika sudah lansung klik simpan template dan lihat hasilnya.

Cacatan,

1.) Perlu diperhatikan yang diberikan tanda warna merah  yang pertama Anda Suka? klik ganti dengan kata-kata sendiri atau jika tika tidak silahkan biarkan saja, warna merah yang kedua Berlangganan Artikel Gratis Via Email silahkan diganti dengan kata-kata atau tulisan yang anda inginkan, yang ketiga kreangfrancisco ganti dengan nama feed burner anda, warna merah yang keempat Email anda...jika mahu diganti silahkan.

2.) Ganti - http://feeds.feedburner.com/kraengfrancisco (alamat feedburner anda)

             - https://plus.google.com/110218949293092090295 (alamat google+ anda)

             - http://twitter.com/KraengFrancisco, (alamat twitter anda)

             - http://www.facebook.com/kraengfrancisco (alamat facebook anda)

 

Selamat mencoba, semoga bermanfaat bagi semua yang membutuhkan. Trima Kasih