Ubahsuai Form Langganan Feedburner

by Zoul on 13 May 2009

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.

{ 13 comments... read them below or add one }

KhairiL said...

haha
mcm menarik,
tp blog aku ada ke yg nk subscriber
sedih...huhu

cuit said...

KhairiL

Mesti ader punya.. test, try, uji...

Renzo said...

Thanks bt request sy ^^,
alter bsok feedburner, pnat malam ni ^^p

LifeSaver said...

x faham sgt la..aku kalo org tunjuk..baru faham..kalo theory..x brape sgt

cuit said...

LifeSaver

Adus.. rumah kat ner.. poskod.. jalan per.. nanti aku dtg umah ek.. Susah paham ke apa yg aku tulis tu? camne ek?

cuit said...

Renzo

Hi hi... it's ok..

eya said...

panjangnye kod nih cikgu..pino2 mate tgk..

Hanis said...

aiyoo..
pjgnya la code itu..
walaupun kena tkn ctrl+c je..
berpinar gak mata membaca.
ha.ha.ha

paan said...

thanks byk2 atas tutorial ko yg serba lengkap nie.hehe.bertambah la minat aku nak letak form nie.

azizan4444 said...

thanks ya. tp still x phm sgt.hehe

nnti kna bace 2 3 kali br phm.

haritz said...

mmg cantik tp kalau pakai wp lebih byk gaya yang boleh ditonjol dengan syarat domain sendiri.

Selamburb said...

mak ai..berjela panjang..
agak pening nak memahami..
feedburner ni ada efek backlink x?

[S]itie [B]Um [B]Um said...

ct xreti feed2 ni.

Post a Comment