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.

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXM0RH1NzQRvoBRbwMcWQDV0DcvNgOr12DLHpg7yz17YxRrmwvVhtH-9tuapAU0_JwqGq3Kv7DV9CRftjcV0EipA4_wZqqzrt19_ExbTr744upwX4253vXZnLmTW5DNsts0T9OZY0E7CQ/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Kz3p3YJS22Pucm_7SDJ85hapVOfjF_I6V-3coHBasEJ1FcjWPMJLTbMNLgVD2EmiKJeZ6GhYq080mUuK1Nztz7h2uSUmoaIh_QqjdjqU-FJk7dZiwrIuNESNXyRrtM6dk9jw7t93uxU/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD4sEiWOJHVyOYFDOCYNGg4uIOoVfd2I7zdnFB0eiOedDbhV9u-GLquC_55twVwzxliap5LUkRdixsaxqNrFtZDuBT4msgIt_WrHtxWZD4XKZcply7sH91059az5DBdLR3B-HpDJ5uxB8/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgN9N6Pc0_T-nPupUU2EjJQIbr9e-YgPESHD4pnvmtFshUeSjNQwAAmvABE0piGBwH6wZlSAkjwP1mr7CcrKfCLcapeK3U85FNSW9R6kgopSxgQWY5BVpFDDu0WaBcufzp-Cdmkf03KMQ/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgniyx__GIRo7lzlg22ZTpJXi-nJeEtTHwixSFjIBmH4_gI-Y0z93mS80E0Z8sJRVwKEmBiKSOL3P9-aubnQhqIujat6uoBugc7rgUojUlIenboxRNZMm7XE3HXM5ax-hVeyvgEGTCxUI4/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 !