August 25, 2012

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


Posted by : Kraeng Francisco | Tuturial Blog | Tips and Trik Komputer | Tips and Trik Internet | SEO

Artikel Cara Membuat Kotak Form Berlangganan Artikel Di Bawah Posting diposting oleh Kraeng Francisco pada August 25, 2012. Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kotak komentar.. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog sobat, dan atau mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini atau letekkan link dibawah ini sebagai sumbernya. Terima Kasih. Salam...


Artikel Terkait

8 comments:

  1. tutorialnya menarik dan cukup mudah untuk dipahami :)

    ReplyDelete
  2. blog walking, kunjungan pagi...follow back yahh............di http://ilmu27.blogspot.com/

    ReplyDelete
    Replies
    1. Trima kasih sudah Follow, dan sudah saya follow back pada blog yang sobat kelola.

      Delete
  3. artikel nya sangat menarik sekali untuk dicoba,,thnks ya serta salam kenal n salam persahabatan juga ya

    ReplyDelete
    Replies
    1. Ia sobat, senang bisa berbagai ilmu. Trima kasih ya sudah berkenan berkunjung ke blog ini. Salam

      Delete
  4. Replies
    1. Saya pkir jika sobat menerapkan teknik tersebut dengan menggunakan Kotak yang saya sediakan sudah sangat simpel dan apabila yang sobat maksudkan agar ukurannya lebih kecil atau ingin di rampingkan lagi,sementara saya belum menyediakan yang sobat maksudkan...atau saya pikir sebaiknya sobat bisa menggunakan kotak berlangganan email bawaan blogger seperti yang berada pada sidebar blog ini. Sekian dan mungkin bisa membantu.

      Delete