Cara Membuat Email Subscribe di Bawah Posting Blogger

Memasang email subscription di bawah postingan blog akan membantu anda untuk menambah jumlah pembaca. Ketika pembaca ingin mendapatkan pembaruan artikel terbaru anda, maka ia bisa mendaftarkan email kedalam form yang anda sediakan. Hal ini tentu saja akan sangat berpengaruh kepada blog anda demi menjaga lalu lintas pengunjung agar tetap stabil. Sekarang, untuk menyediakan form email subscription agar mudah terlihat, anda bisa memasangnya tepat dibawah artikel yang anda posting.

Cara Membuat Email Subscribe di Bawah Postingan Blog

Gambar diatas merupakan contoh email subscription yang dilengkapi oleh beberapa media sosial seperti goole plus, twitter dan facebook.

Bagaimana Cara Menginstallnya ?

  • Login ke Blogger 
  • Template » Edit HTML » Expand Template Widget
  • Copy kode di bawah ini dan pastekan tepat di bawah tag <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
form.feedburner {margin: 20px 0 0;display: block;clear: both;}
.lostsectorstyle {background: url(http://1.bp.blogspot.com/-g-kWWtRy2vA/UNH8vBV-WDI/AAAAAAAAB8s/eSQC57U7eR8/s1600/lostsector.blogspot.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;}
.lostsectorsubmit {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%);}
#lostsector-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;}
#lostsector-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;}
#lostsector-widget td {padding: 3px 0;}
</style>
<center><br/><div id='lostsector-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=lostsectorblog&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='lostsectorblog'/>
     <input name='loc' type='hidden' value='en_US'/>
     <input class='lostsectorstyle' 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='lostsectorsubmit' 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/lostsectorblog' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='http://1.bp.blogspot.com/-OPSIRoFnVzA/UNH8zJM6OuI/AAAAAAAAB9E/1shMHVE_Sjg/s1600/lostsector.blogspot.com-rss-icon.png'/></a>
    <a href='http://twitter.com/lostsector' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='http://1.bp.blogspot.com/-t5Llk7dC9_c/UNH80v-0hqI/AAAAAAAAB9M/yAVtIPwCpow/s1600/lostsector.blogspot.com-twitter-icon.png'/></a>
    <a href='http://www.facebook.com/lostsector.stars' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='http://4.bp.blogspot.com/-oIlRCZLBFbM/UNH8wQGzPNI/AAAAAAAAB80/WB0wC5ZqGA4/s1600/lostsector.blogspot.com-fb-icon.png'/></a>
    <a href='https://plus.google.com/108801075003252823592/' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='http://2.bp.blogspot.com/-8Y0ZqmkvZH4/UNH8x_OP3LI/AAAAAAAAB88/bwbWjJhRFFM/s1600/lostsector.blogspot.com-g+-icon.png'/></a>
   </td>
  </tr>
  </tbody>
  </table>
  <div align='right'>
   <span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://lostsector.blogspot.com/' style='text-decoration: none;' target='_blank'><font color='#000' decoration='none'>[Get this widget]</font></a></span>
  </div>
  <div class='fb-like' data-href='http://www.facebook.com/lostsector.stars' data-layout='button_count' data-send='false' data-show-faces='false' data-width='80'/><br/>
  <a class='twitter-follow-button' href='http://twitter.com/lostsector' rel='nofollow'/>
  <script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
 </div>
</div>
</center>
</b:if>

Pengaturan Lanjutan

Ganti lostsectorblog dengan username feedsburner
Ganti lostsector dengan username twitter
Ganti lostsector.stars dengan username facebook fans page anda
Ganti 108801075003252823592 dengan id profil google plus
  • Langkah terakhir, simpan template
Happy nice blogging !

Lost Sector
Lost Sector

10 comments:
Write comment
  1. thanks sob....
    saya telah gunakan scrip sobat..
    terimakasih... kunjungi balik ya.
    http://mitradecapri.blogspot.com/

    ReplyDelete
  2. Scrip yg diganti diatas, knap msh ada scrip yg bertuliskan lostsector ya kang??? apa mesti diganti juga???
    tks kang infonya

    ReplyDelete
    Replies
    1. Jangan semua, cukup yang saya beri tanda saja...!!!

      Delete
  3. di blog ku koq gak bisa sob? bantu donkk

    ReplyDelete
  4. guna banget ni sob
    visit balik ya

    http://kunaruh.blogspot.com

    ReplyDelete
  5. Thnks Banget Gan.. Ini Yang Saya Cari
    Visit Ya Gan...
    http://tertandai.blogspot.com

    ReplyDelete
  6. This comment has been removed by a blog administrator.

    ReplyDelete
  7. Terimakasih banyak sob, sangat membantu sekali artikelnya..

    http://www.tokoobatku.com/obat-varikokel-herbal/

    ReplyDelete