Tambahkan Widget Berlangganan Di bawah Posting Blogger

Pada tutorial kali ini saya akan berbagi sebuah Widget Berlangganan Di bawah Posting Blogger Anda.
Widget ini pasti akan meningkatkan jumlah subscribers sosial Anda. Anda menulis posting yang baik dan mengharapkan lebih banyak jumlah pelanggan maka widget ini pasti akan membantu Anda. Widget ini berisi formulir berlangganan email, facebook seperti tombol, twitter dan beberapa ikon sosial yang indah di bagian kanan dari widget. Widget ini dapat diinstal dalam satu langkah, Anda hanya perlu copy yang saya berikan dan paste kode di template Anda. Jadi mari kita lihat bagaimana untuk menambahkannya ke blog blogger Anda!

---

Cara Tambahkan Widget Berlangganan Di bawah Posting Blogger

---

1. Login ke akun blogger Anda.
2. Pada Dasbor klick Template ➨ Edit HTML.
3. Centang  Expand Template Widget ➨ Backup template Anda.
4. Sekarang temukan kode <data:post.body/> (Bila kesulitan mencari kode HTML coba klick DISINI)
5. Lalu letakkan kode berikut ini di bawah kode tersebut (Bila menemukan kode tersebut lebih dari dua maka pilih yang ke dua)

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
form.feedburner {
    margin: 20px 0 0;
    display: block;
    clear: both;
}
.OW {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpVaBJ2yzVY1TOoS05_kgWjg74J0SMAxhhP2D_WZ6vXUOXX2g_4BHzFkMTXY5wX4Dy7vh5gpHU5fizDVQBZKNTHH6_hpbbS8FSBulEPndN_BAz6FTv5Mcp1krLY_h0QDD8yS7ZEuS-pg/s1600/otowebsite.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;
}
.OWsubmit {
    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='
    #FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
#OW-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;
}
#OW-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;
}
#OW-widget td {
    padding: 3px 0;
}
</style>
<center><br/><div id='OW-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('http://feedburner.google.com/fb/a/mailverify?uri=otowebsite', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
     <input name='uri' type='hidden' value='otowebsite'/>
     <input name='loc' type='hidden' value='en_US'/>
     <input class='OWstyle' name='email' onblur='if (this.value == "") {this.value = "Enter your email…";}' onfocus='if (this.value == "Enter your email…") {this.value = ""}' type='text' value='Enter your email…'/>
     <input alt='' class='OWsubmit' 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/otowebsite' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhknkcC8qSF0btPOnYr_-dU5R_ZAPxqvPsHw_SJarWz4Tn4GzbEwTcFA_GEh8-FG7Xc30F4ZQYfGKI7L7xw55NTI6AH1bAjUAIQgOMUXCEW4F_9bJarHgyoiEYiwXwoTqk2gUPL73Obgg/s1600/otowebsite.blogspot.com-rss.png'/></a>
    <a href='http://twitter.com/otowebsite' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_oJsDnuM77vPm8mKYPZcS8P5BJhWSQEmmXlyNlveGYNJKoMguT6cXIknflT0f0KTk8fwNTgG-_JBWnfsI7HJjfjVpCc0045Tlnt7xm019DEcJ1xmoCMQeXqq9T7UW9R26sNyR1V0jSg/s1600/otowebsite.blogspot.com-twitter.png'/></a>
    <a href='http://www.facebook.com/dekrif' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4FFmWNUuFX5lrq37JLla449zgvs4VCPqWMtUTxiZ-ygjFFt61d-8WOd-VySbvvX_M3H6o4o_CgBqjLGCiLFhA8K1V9KRme2mkl8a0Lr1-PJ7S2JU0VWziGAAfOTkBw_zQL6po5CbbyA/s1600/otowebsite.blogspot.com-fb.png'/></a>
    <a href='https://plus.google.com/115780777398536909642/' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAlgsn-gKK618nW-XcRrUo-rGwY0xJogvxvz3muTHisuGtV1ICKMZnSxg8fNWoVp0WDeBTLTWjqMXDSFvzxYGbQLeaO03ZCGlzhKubDHLZEhs175UnUpYlNTiCBDXDfMLOkb1MSIV1hw/s1600/otowebsite.blogspot.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://www.otowebsite.blogspot.com/' style='text-decoration: none;' target='_blank'><font color='#000' decoration='none'>[Get this widget]</font></a></span>
  </div>
  <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fdekrif&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font=verdana&height=30" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:30px;" allowtransparency="true">
  </iframe>
  <a class='twitter-follow-button' href='http://twitter.com/otowebsite' rel='nofollow'></a>
  <script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
 </div>
</div>
</center>
</b:if>

Keterangan:

• Ganti semua (tiga) otowebsite dengan Nama Pengguna Feedburner
• Ganti semua (dua) dekrif dengan Nama Pengguna Facebook
• Ganti semua (dua) otowebsite dengan Nama Pengguna Twitter
• Ganti  115780777398536909642 dengan ID Google +.
• Anda dapat menyesuaikan widget ini dengan menggunakan OW - HTML Editor.

5. Akhirnya menyimpan template.

Sekarang Anda dapat melihat widget ini di bawah setiap postingan blog Anda.

Jika Anda masih mendapatkan masalah tentang widget ini maka jangan ragu untuk menyebutkannya melalui komentar, saya akan membalas sesegera mungkin.