Tips Memasang Kotak Keren Berlangganan Feed di blog

kevinservis TIPS BLOG 22 Mar 2013

Cara memasang kotak keren berlangganan feed di blog Blogger yg cepat dan mudah, kotak berlangganan atau subcribe box dgn tampilan cantik dan keren ini terdiri dari beberapa tombol media sosial seperti feedburner, facebook, twitter, google plus, rss feed, technorati dan stumbleupon. Dengan memasang paket kotak berlangganan ini, maka anda akan menghemat ruang halaman blog menjadi lebih kelihatan rapi dan menarik. Dalam pemasangannya pun tidak memerlukan utak-atik kode, hanya cukup menambahkan widget di sidebar blog atau dimanapun posisi kotak berlangganan ini ingin ditampilkan.

Seperti yg anda lihat gambar di atas, kotak berlangganan berwarna hitam, anda ga usah khawatir utk warna, karena akan berubah secara otomatis mengikuti warna dasar template blog.

Seperti biasa, login ke blog > Design / Rancangan > Add Gadget > HTML-JavaScript

Silahkan copy kode berikut ini :

<style>
#news-letter{clear:both;padding-top:10px;}
.msg-box{float:left;width:50px;height:54px;margin-right:9px;padding-top:5px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwcn5JNCL_6H2fOEzheclqQjz6hkKUfOtDlFHlb719rKkZCnlvvkm5xdH0jpxsZEklaakxAdhQLmIbEgZMrVQOIRZMHf-BoAxwquEG9moOax3FL4Is0tehjrC6RKQoITx4GGkfA_abVeQ/s800/mail-box.png) no-repeat;}
.news-headline{position: relative;z-index: 999;font-size: 10px;padding-bottom:10px;font-weight:bold;}
</style>

<div class="news-headline" color:#333;>
Dapatkan Update Artikel via Media Sosial atau E-Mail
</div>
<center>
<table border="0">
<tr>
<td style="padding-right:4px;">
<a href="http://twitter.com/ID-TWITTER" target="_blank" title="Follow Me On Twitter">
<img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeYcAgzdocDwIGdJPbfnOvMIP4AIjkAD-z-QFdgaug0veF4giDicUegl6HK1tI_HxrCzL4cwcN3KdbrGVITab9-o_pqU0RCmvOvNRPAsa9cqlJkfMeQIQ3CgsSZ0hNYpdFnUDLaEMcjfw/s800/twitt.png" /></a>
</td>
<td style="padding-right:4px;">
<a href="http://feeds.feedburner.com/NAMAFEED" target="_blank" title="Subscribe Via RSS">
<img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_XMcuy5ITIbxB77jbCFSy7U3k2ubfTIV0nX7XFNyK-AmLT6pKpG3euaiGoJfaD9OjWkRUq2ug0fsBZrTNwRovnCGyAWYC3TkVHauxytqGRqacjKDqSOjmsdlSEoTFYL0iPtmBm0GYWKA/s800/Feed-icon_128.png" /></a>
</td>
<td style="padding-right:4px;">
<a href="URL-FACEBOOK" target="_blank" title="Find Us On Facebook">
<img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhef8r_mB4V0W8oBi_i6Y-DAjwonF7wmEFT4dKhB8w1Sb3d554kULCAN4ZZUJCckmoqelsImlMbfIZpP2YtFW4e7dzOupdmQ69GD05SGFSPA8ayiy46gnK17edTRdS9kpb57v7jioqNdUg/s800/Facebook_icon.png" /></a>
</td>
<td style="padding-right:4px;">
<a href="URL-GOOGLE-PLUS" target="_blank" title="Add me on Google+">
<img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpKde15MEyLKqgIF9qitvNfq-n-pvXDeJdRsdr-eCMXF9mh0vREj9mPsp6VIJC2YyWUDq2zFzPX-PqmStZ1yqfDm6M9-3H6hntF6yvLEouRXPCufvHyWfmhjIYrqaMw-tj0y4C1Ybk-Ns/s800/googleplusicon.png" /></a>
</td>
<td style="padding-right:4px;">
<a href="http://www.stumbleupon.com/share?url="URL BLOG" target="_blank" title="Stumble Upon">
<img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi102EL8OVDhFYRSv5ZBLTB9lbsMvOi2H2cRwuatXNGDRqSJRXxsUIYhdoy6vwKivuL7iGCVStCjB4aA5ehEBnqZhHN7DCj2U7qBtjL7o9TKRYkrxhnp4BtsbYeyVXNf9BV3wYGH1II9_E/s800/stumbleupon_icon.png" /></a>
</td>
<td style="padding-right:4px;">
<a href="http://technorati.com/faves?sub=addfavbtn&add=URL-BLOG" target="_blank" title="Add To Technorati">
<img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9fuoq_kwrEFzmtxw_4QyDrTwtdJy-_PZusSIGB7FfPsw3YjiMD6sLUQoInB4Swr50gGukvmMNQ5jo98t6RSk_7d5b3VusxYkU0DX5lKGpm8DdR136yHF_PcZ0OyWY5sNBSIKdzvmYb9g/s800/Technorati-icon.png" /></a>
</td>
<td>
<td style='padding-top:-2px;'>
<a href="http://feeds.feedburner.com/NAMAFEED"><img src="http://feeds.feedburner.com/~fc/NAMAFEED?bg=000000&amp;fg=ffffff&amp;anim=0&amp;label=listeners" height="26" width="88" style="border:0" alt="" /></a>
</td>
</td>
</tr>
</table>
</center>         
<div id="news-letter">
<span class="msg-box"></span>
<b>Mendaftar untuk Update Terkini</b>
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=NAMAFEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify?uri=NAMAFEED">
<p><input type="text" valign="middle" name="email" value="Masukan Email Anda" size="25" maxlength="100" onfocus="this.value = '';" style="width: 140px; height: 21px; font-size: 11px; color: rgb(51, 51, 51);" gtbfieldid="2"/>
<input type="hidden" value="NAMAFEED" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Sign Up" id="submit"/>
</p>
</form>
</div>
<tr><td><p style=' line-height:2px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://blogseotest.blogspot.com/2012/02/tips-memasang-kotak-keren-berlangganan.html' style='color:#cc6600;' target='_blank'><blink>Get Widget</blink></a></p></td></tr>
</div>

Ganti huruf warna merah dgn kata-kata Anda.
Ganti ID-TWITTER dgn nama id-twitter Anda.
Ganti NAMAFEED dgn id-feedburner Anda.
Ganti huruf warna hijau dgn URL-Blog / URL-GOOGLE-PLUS / URL-FACEBOOK anda

Setelah beres mengedit, Save / Simpan. Silahkan lihat hasilnya, keren khan?!
Ok, selamat mencoba Pasang Kotak Berlangganan Feed di Blog Anda agar tampil lebih simple, cantik dan keren. Semoga berguna.