Tambahkan Widget Berlangganan Di bawah Posting Blogger

Tweet

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!


DEMO:

Get free daily email updates!

Follow us!

[Get this widget]

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/>
5. Lalu letakkan kode berikut ini di bawah kode tersebut

<br /><br /><br /><b><span style="font-size: large;">DEMO:</span></b><br /><b:if cond="data:blog.pageType == &quot;item&quot;">
<style type="text/css">
form.feedburner {
    margin: 20px 0 0;
    display: block;
    clear: both;
}
.OW {
    background: url(http://gue-galau.mywapblog.com/files/gue-galau-blogspot-com.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>
</b:if><br />
<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%px;">
  <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;"><div style="color: #666666; font-family: georgia; font-size: 18px; font-style: italic; font-weight: bold; margin: 0px 0px 5px 0px;">
Get free daily email updates!
    </div>
<form a="a" action="http://feedburner.google.com/fb/a/mailverify" class="feedburner" fb="fb" feedburner.google.com="feedburner.google.com" http:="http:" mailverify="mailverify" method="post" onsubmit="window.open(" popupwindow="popupwindow" return="return" scrollbars="yes,width=550,height=520" style="margin: 0pt;" target="popupwindow" true="true" uri="gue-galau">
<input name="uri" type="hidden" value="gue-galau" />
     <input name="loc" type="hidden" value="en_US" />
     <input class="OWstyle" 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="OWsubmit" title="" type="submit" value="Submit" />
    </form>
</td>
   <td style="border: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"><div style="color: #666666; font-family: georgia; font-size: 14px; font-weight: bold; margin: 0px 0px 5px 0px;">
Follow us!
    </div>
<a href="http://feeds.feedburner.com/gue-galau" rel="nofollow" target="_blank" title="Suscribe to RSS Feed"><img src="http://gue-galau.mywapblog.com/files/gue-galau-blogspot-com-rs.png" /></a>
    <a href="http://twitter.com/Galauvers_mania" rel="nofollow" target="_blank" title="Follow us on Twitter"><img src="http://gue-galau.mywapblog.com/files/gue-galau-blogspot-com-tw.png" /></a>
    <a href="http://www.facebook.com/potter182" rel="nofollow" target="_blank" title="Follow us on Facebook"><img src="http://gue-galau.mywapblog.com/files/gue-galau-blogspot-com-fb.png" /></a>
    <a href="https://plus.google.com/110087180201533210075/" rel="nofollow" target="_blank" title="Follow us on Google+"><img src="http://gue-galau.mywapblog.com/files/gue-galau-blogspot-com-gp.png" /></a>
   </td>
  </tr>
</tbody>
  </table>
<div align="right">
<span style="color: solid #ffffff; font-size: 8px; font-style: italic;"><a href="http://gue-galau.blogspot.com/" style="text-decoration: none;" target="_blank"><span decoration="none" style="color: black;">[Get this widget]</span></a></span>
  </div>
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fgalauversmania&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=30" style="border: none; height: 30px; overflow: hidden; width: 450px;">
  </iframe>
  <a class="twitter-follow-button" href="http://twitter.com/Galauvers_mania" rel="nofollow"></a>
  <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
 </div>
</div>
</center><br /><br /><br />

Keterangan:

• Ganti gue-galau dengan Nama Pengguna Feedburner
• Ganti potter182 dengan Nama Pengguna Facebook
• Ganti galauversmania dengan Nama Pengguna Facebook PAGE
• Ganti galauvers_mania dengan Nama Pengguna Twitter
• Ganti 110087180201533210075 dengan ID Google +.

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.