Cara Membuat Widget Email Subscription Keren Beda Dari Yang Lain by Kedai Helper

Sebagai seorang blogger, tentunya kita ingin mendapatkan traffic yang besar dari pengunjung blog kita. Banyak hal yang dapat kita lakukan untuk mengoptimasikan situs kita agar mendapatkan traffik tinggi di sistem pencarian.

Salah satunya adalah bagaimana cara kita bisa membuat para pengunjung blog kita selalu tetap terhubung dengan kita, selalu tetap mengetahui update postingan blog terbaru kita, kadang beberapa dari pengunjung blog kita merasa blog kita penuh dengan informasi yang dibutuhkannya, maka suatu saat dia akan mencoba mengunjungi blog anda, nah tugas anda adalah bagaimana membuat pengunjung blog kita tidak susah lagi mencari di sistem pencarian untuk menemukan blog kita? akan sangat sulit bukan? apalagi dengan begitu banyaknya blogger diluar sana yang memiliki isi postingan terbaru mengenai informasi yang sama, kecil kemungkinan blog anda muncul kembali pada posisi tertinggi sistem pencarian.

Salah satu cara yang dapat anda lakukan adalah membuat sebuah email subscription. Email subscription adalah suatu fasilitas yang memberikan anda kemudahan untuk tetap terhubung dengan para pengunjung blog anda melalui fasilitas email.

Banyak Jasa yang dapat anda temukan untuk mendapatkan fasilitas email subscription ini, fasilitas populer yang sering digunakan para blogger saat ini adalah FeedBurner.

Dengan menambahkan Widget HTML pada blog anda, dan memasukan kode form email subscription default FeedBurner, anda telah membuat sebuah Widget Form Email subscription pada blog anda. Namun tampilannya masih default, artinya gitu-gitu ajah gak ada sentuhan artistiknya.

Nah pada postingan kali ini saya akan membagikan sebuah tips bagi anda untuk membuat Form Widget Email Subscription Keren yang beda dari yang lain.
Nantinya akan terlihat seperti ini:

Ikuti langkah-langkah berikut ini:

Masuk ke akun Blogspot anda.
Masuk ke pengaturan Template - Edit HTML (Sebaiknya anda backup terlebih dahulu file html aslinya)
Cari kode <data:post.body/> dan letakan kode berikut ini tepat dibawah kode <data:post.body/> (Saya asumsikan anda akan meletakan Form Email subscription anda tepat dibawah isi dari postingan anda) anda juga dapat berimprovisasi dalam penempatan form tersebut. Misalkan anda bisa menambahkan sebuah widget baru Dashboard Blogger Layout - Add Widget - HTML/Javascript lalu masukan kodenya. Tempatkan sesuka hati anda.

Ini Kodenya :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
form.feedburner {
    margin: 20px 0 0;
    display: block;
    clear: both;
}
.mediabloggerstyle {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd3BTmbc_6mM6ZI4h1OmmtG0ScaAJuoJ-6En-KEKqK8yphc2vOe9_RCbKNG21613ECqVJ7HufFblDFjCDKNZZvlYj40VwOi3nxZxUjaMxdUtZ2otUaMeIzZH1BV79NsIpxlYMAO3Ma1nFg/s1600/helperblogger.com-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;
}
.mediabloggersubmit {
    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%);
}
#mediablogger-widget {
    -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;
    -webkit-box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: inset    0px 0px 8px rgba(50, 50, 50, 0.75);
    box-shadow: inset         0px 0px 8px rgba(50, 50, 50, 0.75);
    -webkit-box-shadow: inset 0px 5px 0px 0px #D8D8D;
}
#mediablogger-widget: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;
}
#mediablogger-widget td {
    padding: 3px 0;
}
</style>
<center><br/><div id='mediablogger-widget'>
 <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;font-family:georgia;font-style:italic; '>
     Get free daily email updates!
    </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=KedaiHelper&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='KedaiHelper'/>
     <input name='loc' type='hidden' value='en_US'/>
     <input class='mediabloggerstyle' 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='mediabloggersubmit' 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;font-family: georgia; '>
     Follow us!
    </p>
    <a href='http://feeds.feedburner.com/KedaiHelper' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJffGdvCgzCt-dyVJNi75fV9kFBkzlUOTcNeygBMB8rFrZ3nGOOADdzcSb6YbpGRSgStlCs3lNpzNKZssPT-n-50KfS4210355gfKeMLcwcqZRZMZZaQt9IXQXSz9LYcQ6nBOcOnRRuP-g/s1600/helperblogger.com-rss.png'/></a>
    <a href='http://twitter.com/kedaihelper' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC499vu_udcFjAxFugo4a3BlTjAj8hLjGIJNJAVyTtvGZB26LTtj26xx6oNZExNUgltGAmpWA0nK7RwUz5_e6kpetDn7xepihxugbiqwI0IunXGpqbwKTD2SofSixq58WKm_Y-VYs_O5-c/s1600/helperblogger.com-twitter.png'/></a>
    <a href='http://www.facebook.com/kedaihelper' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigJmp7d0MhyphenhyphenS5tlWqgUkBe1DQc9ly_OPnAcx6_YRxzewtEOnAOrlk2WcWvqdvGvasnVJ9niAdy7cRwYRD563LaXOdVBzV_wnc9DJjlEEyVTJtA6DpnVyYIc-CPVPXtSMQjJegwSWtYIhky/s1600/helperblogger.com-fb.png'/></a>
    <a href='https://plus.google.com/112733035687163961682' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgevZMR25c4RnwWUfrGO3qQJrTI7YjIacmBFcoQf3Fu8L82G8OouPVM9hEMoXLAFJs4be6-jNwL82wybiklO9rlyVbuZjVNCkeFg8OL5KK4DjRSFiGzlXRwuraY8wbQ5pTVzDErhgv53sGH/s1600/helperblogger.com-gplus.png'/></a>
   </td>
  </tr>
  </tbody>
  </table>
  <div align='right'>
   <span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://kedaihelper.blogspot.com/' style='text-decoration: none;' target='_blank'><font color='#000' decoration='none'/></a></span>
  </div>
  <a class='twitter-follow-button' href='http://twitter.com/kedaihelper' rel='nofollow'/>
  <script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
 </div>
</div>
</center>
  </b:if><br/>

Keterangan:

Pada baris kode ke 082, 083, 093 - ganti kalimat kedaihelper dengan nama URL Feed blog anda.
Pada baris kode ke 094, 104 - ganti kalimat kedaihelper dengan nama URL Twitter anda.
Pada baris kode ke 095 - ganti kalimat kedaihelper dengan nama URL Facebook anda.
Pada baris kode ke 096 - ganti kode /112733035687163961682/ dengan kode Google+ anda.

Lihat hasil dari penampakan Form Widget Email Subscription baru anda. Selamat mencoba.

Anda mungkin tertarik untuk membaca postingan saya yang lain, seperti :