Ubahsuai Form Langganan Feedburner

Ini merupakan pertanyaan dari Renzo, berkenaan Customised Feedburner E-mail subcriber form. Aku rasa anda tentu tahu apa kegunaan e-mail subscriber dalam memastikan traffic yang tetap untuk blog kita. Feedburner ada menyediakan form untuk e-mail subscriber yang asal seperti di bawah ini.

Enter your email address:


Delivered by FeedBurner

Dan kodnya lebih kurang seperti ini.. abaikan perkataan Cuiit kerana kod anda akan menggunakan ID kepunyaan anda sendiri.

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/                           fb/a/mailverify?uri=Cuiit', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="Cuiit" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

Baiklah.. mungkin anda dah jemu dengan paras rupa from tersebut dan ingin menggodek sedikit kod yang ada. Caranya lebih kurang begini..


1-Kita boleh tukar warna latar belakang nya;
Cari kod ini:
text-align:center;
tambahkan kod untuk background, jadi seperti ini
text-align:center;background: #00BB11;" [#00BB11 adalah kod warna dan sila tukar mengikut warna pilihan anda]

2-Menambahkan imej latarbelakang (biasanya logo RSS)
pada kod tadi:
text-align:center;background: #00BB11;"
tambahkan url imej atau photo anda jadi seperti ini
text-align:center;background: #00BB11 url(URL IMEJ ANDA) no-repeat;"

3-Menukar saiz lebar text box;
Cari kod ini
<input type="text" style="width:140px"
[tukarkan 140px kepada saiz yang anda mahukan]

4-Menukar teks yang dipaparkan secara default;
Cari kod ini
<p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p> (ingat tadi anda ada tukar saiznya)
Tukar kepada kod ini
<input type="text" style="width:240px" name="email" value="Enter your email address" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
(saiznya telah ditukar kepada 240px dan perkataan 'Enter your email address' boleh ditukar kepada yang anda suka.

5-Menukar ketinggian textbox
Dihadapan kod style="width:140px"[anda dah tukar saiznya tadi] tambahkan kod untuk ketinggian jadi seperti ini
style="width:140px;height:22px;[22px adalah saiz tinggi dan boleh ditukar mengikut citarasa anda]

6-Menukar warna font dan saiznya
dihadapan kod tadi style="width:140px;height:22px; tambahkan kod warna dan saiz jadi seperti ini
style="width:140px;height:22px;font-size:15px;color:#000000 [tukarkan font-size dan color:#000000 mengikut citarasa anda]

7-Menukar butang 'subscribe'
Anda perlu edit HTML pada template anda seperti ini
01-Masuk ke Layout dan edit HTML
02-Cari kod ini ]]></b:skin>
03-Letakkan kod ini di atas atas kod ]]></b:skin>
Jadi seperti ini:
.button {
background-color: #cc0000;
font-size: 80%;
font-family:Tahoma;
font-weight: bold;
color:#ffffff; }

]]></b:skin>


04-Savekan template anda

8-Sekarang tukarkan kod
<input type="submit" value="Subscribe" />

kepada kod ini
<input type="submit" value="Subscribe" class="button"/>

9-Membuang link perkataan 'Delivered by Feedburner'
Buang saja kod ini
<p>Delivered by <a href="http://www.feedburner.com" target="_blank">FeedBurner</a></p>

Ok selesai..
He he.. anda rasa malas pulak nak edit kod tu yer..
Aku ada dua contoh pilihan yang anda boleh gunakan dan anda bolehlah ubahsuai ikut citarasa anda..

001-Ini kod untuk pilihan yang pertama

<form action="http://feedburner.google.com/fb/a/mailverify" style="border:2px solid #101010;padding:15px;text-align:center;background: #010101 url(http://i430.photobucket.com/albums/qq22/cuitnazz/feeds-1.png)no-repeat;" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEED-ID-ANDA', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input onfocus="if(this.value==this.defaultValue)this.value='';" style="width:150px;height:20px;font-size:12px;color:#000000; text-align: center; margin: 10px;" value="Enter your email address" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" type="text"/><input value="FEED-ID-ANDA" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/><input value="Subscribe" class="button" type="submit"/></form>

<center><a href="http://feeds2.feedburner.com/FEED-ID-ANDA"><img width="88" style="border:0" alt="" src="http://feeds2.feedburner.com/~fc/FEED-ID-ANDA?bg=00CCFF&amp;fg=000099&amp;anim=0" height="26"/></a></center>

002-Ini pula kod pilihan yang kedua

<center>
<font size="2">
<b>
<a href="http://feeds2.feedburner.com/FEED-ID-ANDA" rel="alternate" type="application/rss+xml"><img alt="" style="vertical-align:middle;border:0" src="http://www.feedburner.com/fb/images/pub/feed-icon16x16.png"/></a>&nbsp;<a href="http://feeds2.feedburner.com/FEED-ID-ANDA" rel="alternate" type="application/rss+xml"><u>Subscribe to NAMA-BLOG-ANDA via RSS!</u></a><br/>
</b><br/>

<form action="http://feedburner.google.com/fb/a/mailverify" style="border:0px solid #101010;padding:15px;text-align:center;background: url(http://i430.photobucket.com/albums/qq22/cuitnazz/feeds-1.png)no-repeat;" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEED-ID-ANDA', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input onfocus="if(this.value==this.defaultValue)this.value='';" style="width:150px;height:20px;font-size:12px;color:#000000; text-align: center; margin: 10px;" value="Enter your email address" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" type="text"/><input value="FEED-ID-ANDA" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/><input value="Subscribe" class="button" type="submit"/><br/>
<font color="green">(Don't forget to <font color="red">Activate</font> the email subscription from your Inbox!)</font></form>

<center><a href="http://feeds2.feedburner.com/FEED-ID-ANDA"><img width="88" style="border:0" alt="" src="http://feeds2.feedburner.com/~fc/FEED-ID-ANDA?bg=00CCFF&amp;fg=000099&amp;anim=0" height="26"/></a></center></font></center>

a-Cari semua perkataan FEED-ID-ANDA dan tukarkan kepada ID Feedburner anda.

b-Tukarkan URL image tu kepada URL image anda sendiri (Photo Bucket, Image Shack dsbnya)

c-Pastikan,  item no 7 di atas(Menukar butang 'subscribe') hendaklah dilakukan terlebih dahulu.

d-Oh ya.. sebelum itu pastikan anda telah aktifkan Email Subscriptions dan Chicklet pada Feedburner anda jika tidak form ada tidak akan berfungsi

Itu sahaja karutan ku hari ini.. harap maaf kalau ada kesilapan.