Thursday, July 25, 2013

Cara Membuat RSS Subscribe Blog Simple

RSS feedburned adalah salah satu widget terpenting dalam blog, jika tidak terdapat widget ini dalam suatu blog, maka pengunjung yang tertarik dengan blog anda akan kesulitan mencari situs anda jika hendak mengunjungi kembali. Lalu bagaimana cara kerja widget RSS feedburned? dengan memasang widget pada blog anda maka pengunjung akan berlangganan/subscribe melalui email, sehingga pengunjung yang tertarik dengan blog anda tidak kesulitan lagi untuk mencari dan mengunjungi kembali.
Demo
Ditulisan kali ini saya akan membahas tentang membuat widget/gadget RSS feedburned yang simpel dan berwarna, sebenarnya ada widget lebih simple lagi yeng codescript-nya asli bawaan RSS feedburned. Namun yang saya bahas kali ini agak beda, karena widget ini lengkap dengan nama pelanggan + pesan. Oke baca selanjutnya untuk mengetahui langkah - langkahnya.

1. Login blogger dan menuju layout/tata letak - tambah gadget
2. Masukan kode dibawah ini, tanpa judul.
<center>
<div align="center" id="Subscribe-wrapper">
<div id="ig-subscription-optin" style="border: 1px solid #000000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55AAEE', endColorstr='#003366',GradientType=0 ); width: auto;">
<h3 id="title-text" style="color: white; font-size: 20px;">
Berlangganan Gratis</h3>
<div id="sub-title-txt" style="color: white; font-size: 14px;">
Dapatkan update artikel terbaru kami langsung ke inbox email anda.</div>
<br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=id-maps', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="name" id="Subscriber_name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Nama depan anda" /><br />
<input class="email" id="Subscriber_email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Alamat email anda" /><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<input name="uri" type="hidden" value="id-maps" /><input name="loc" type="hidden" value="en_US" /> <input id="Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="Berlangganan!" /></form>
</div>
</div>
</center>
<style>#ig-subscription-optin {margin: 0px;padding: 10px;background: #2A6DA9;
background: -moz-linear-gradient(top, #5AE, #036);background: -webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036));height: auto!important;color: white !important;padding: 20px 15px !important;

text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px;
margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;
padding: 5px;border: none;}#ig-subscription-optin input.name {
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_SN97SXZC_r4AVzlJxnc6yJ7YuDOu_z27lkZiJ5SmB6Ml8rNL3zF1EL05bwviJI6HZZQOWHu0Upi5tbiOKpUdAZ1-DeRFrrpx1YgdqryBaztDgRAadj5Gjo4AAx1-n9-xBlrlP9RaDivB/s1600/subscribe-name.png) no-repeat center right;}
#ig-subscription-optin input[type="text"] {border: 1px solid #111 !important;
font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;}
#ig-subscription-optin input.email {background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheXbwR93nT1F-1NG62VxzyMxRRpnniM-7RkSscnhtBCnXH8q_Su4f_u1aeIlToRMNi4VI97kdOjr5WfPXnKKlUEPzmKMn04jIQF30mddeuWZ0nGn6MvD5ozRM1X7P0w1zvjFXSsMl7USVr/s1600/subscribe-email.png) no-repeat center right;}#ig-subscription-optin input {
font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h3 {margin-top: 10px !important;margin-bottom: 8px !important;margin-left: 10px !important;margin-right: 10px !important;
font-weight: bold !important;line-height: 26px !important;letter-spacing: normal;
text-transform: none;text-decoration: none;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif;
border: none;padding: 0px !important;float: none;}input:hover[type="submit"] {
background-color: #0094D2;border: 1px solid #0094D2;color: white;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2;
color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input {
color: #333;font-family: 'Droid Sans', sans-serif;}#ig-subscription-optin input[type="submit"] {background: #960E17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2ajYunLdHpR1CBAyx9VGaq8pKtoRow3le5_5Q50CD_rQKrLEHX5_97NOijaZBg7IWrHcIW77JWjhp_xEGkT35FS51MkTvYfBkpmV5caOGc1-gjV9VbM9kuZY_a8Ob3qP_BCyXXdvVOsS8/s1600/subscribe-red.png) repeat-x top;border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important;
padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 95% !important;height: auto !important;line-height: 24px !important;}
#ig-subscription-optin input[type="submit"]:hover {color: #FFA5A5;}</style>

keterangan
ganti code berwarna merah dengan ID feedburner anda.
ganti code berwarna biru dengan kalimat yang anda inginkan.

3. Setelah selesai klik save, dan view blog untuk mengeceknya.