Mempercantik tampilan form berlangganan feedburner

tags: kumpulan blogger hack, HTML, tips bloging, design menu gratis, widget

Beberapa kawan menanyakan di email, bagaimana cara membuat form berlangganan artikel seperti yang ada di blog ini, maksudnya seperti dibawah tiap-tiap artikel. Sebenarnya saya ingin membuat tutorial khusus membahas ini, sayang sekali tidak ada waktu untuk itu. Oleh karena itu agar tidak mengecewakan maka saya buatkan artikel ini. Saya tidak membahas detil sekali karena saya anggap kawan-kawan sudah advance dalam ngeblog.

Saya hanya tunjukkan kode-kode yang saya pakai sehingga tampilan dan fungsinya seperti yang ada di blog ini. Jika kawan-kawan ada yang mau menerapkan bisa langsung dipakai dan tampilannya akan sama persis dengan yang ada disini tapi jika ingin berbeda silahkan diedit sendiri terutama masalah image, lebar dan warna. Untuk hasil edit yang baik maka anda harus memilki dasar pengetahuan HTML. OK mari kita mulai.

Pertama
Kode yang ditambahkan pada tag body di template (pada mode edit template), saya meletakkannya di bawah kode <p><data:post.body/></p>.

<!-- Start Berlangganan Artikel-->
<div class='kotakRSS1'>
<div class='RssAlbri'>
Artikel disini berguna bagi anda?, Silahkan <a href='http://feeds.feedburner.com/Ateonsoftcom' target='_blank' title='Berlangganan'>
<b>klik disini</b></a> untuk berlangganan gratis. Atau berlangganan via email, dengan begitu anda akan mendapat kiriman artikel setiap ada artikel yang terbit di <font color='#009900'>ateonsoft.com</font>
<div class='albriIlang'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td align='left' style='padding:5px 0 0 0;' valign='top' width='65%'><form action='http://www.feedburner.com/fb/a/emailverify' method='post' onsubmit='window.open(&apos;http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2487252&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='padding:0px;text-align:center;' target='popupwindow'><div align='left'>
<input class='inpRssAlbri' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Silahkan ketikkan email anda disini&quot;;}' onfocus='if (this.value == &quot;Silahkan ketikkan email anda disini&quot;) {this.value = &quot;&quot;;}' type='text' value='Silahkan ketikkan email anda disini'/>
<input name='url' type='hidden' value='http://feeds.feedburner.com/~e?ffid=2487252'/>
<input name='title' type='hidden' value='ateonsoft.com'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='sbmtRssAlbri' type='submit' value='Berlangganan'/></div>
</form></td>
<td align='left' style='padding:4px 0 0 0;' valign='top' width='35%'><a href='http://feeds.feedburner.com/Ateonsoftcom'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/Ateonsoftcom?bg=99CCFF&amp;fg=444444&amp;anim=1&amp;label=listeners' style='border:0' width='88'/></a></td>
</tr>
</table>
</div>
</div>
</div>
<div class='clear'/>
<!-- End Berlangganan Artikel-->

Kode berwarna merah ganti dengan kode feedburner anda sendiri dan kode warna hijau juga ganti dengan kode anda yang bagian gambar. Gambar maksudnya gambar seperti dibawah ini:

Untuk kode lainnya silahkan anda berexperiment.

Kedua
Kode yang ditambahkan pada deretan CSS, letakkan saja diatas kode ]]></b:skin>

.kotakRSS1 {background-color: rgb(255, 255, 255); -moz-border-radius: 5px; border: 1px solid #cccccc; padding:5px 10px; margin: 0 0 10px 0; } .RssAlbri { background: url('http://i416.photobucket.com/albums/pp245/ateonsoft/LogoRSSalbri.jpg') no-repeat bottom right; } .RssAlbri a { background: none;} .inpRssAlbri { border: 1px solid #B9C1C6; width: 170px; background: rgb(255, 255, 255) url('http://i416.photobucket.com/albums/pp245/ateonsoft/rssform.png') no-repeat 2px 2px; font-size: 11px; padding:3px 4px 4px 20px; -moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px; } .sbmtRssAlbri { padding:2px; -moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px; } .albriIlang table {border-collapse: inherit; border: none;} .albriIlang tr { border:0;} .albriIlang td { border:0;} .albriIlang th { border:0;} .clear { clear: both; }

Untuk mengganti background-image ganti warna merah dengan URL gambar kesukaan anda. Kalau sudah simpan template.

Ketiga
Silahkan klik disini untuk berlangganan artikel saya, hehehe.... ga nyambung ya? memang sudah selesai sampai langkah dua tutorialnya.

Artikel Terkait:

Anda boleh mempublikasi ulang seluruh atau sebagian artikel:
Mempercantik tampilan form berlangganan feedburner
Terima kasih jika anda melinkback halaman:
http://www.ateonsoft.com/2009/03/mempercantik-tampilan-form-berlangganan.html
Tapi jika anda merasa terganggu dengan linkback ateonsoft.com karena blog ini tidak berharga bagi anda, anda tetap boleh meng-COPAS seluruh atau sebagian artikel ini tanpa linkback, terima kasih anda menyukai artikel di ateonsoft.com.

Artikel disini berguna bagi anda?, Silahkan klik disini untuk berlangganan gratis sekaligus informasi lengkapnya. Atau langsung saja gunakan form dibawah ini, dengan begitu anda akan mendapat kiriman artikel FULL di email Anda setiap ada artikel yang terbit di ateonsoft.com