Cara Memodifikasi Email Subscribe Form

Posted by Herman on Tuesday, June 29, 2010 49 comments

Untuk menempati janji saya pada postingan sebelumnya tentang cara membuat email subscribe form maka pada kesempatan ini saya akan mengulas cara memodifikasi form email subscription agar menjadi lebih menarik.

Sebagai bahan studi, saya telah menyiapkan sebuah form seperti berikut.

hermanblog subscription form
Form tersebut nanti bisa anda modif dengan mengganti gambar, teks, dan tata letaknya sesuai keinginan. Ok mari kita mulai...

Untuk membuat form ini ada beberapa bahan yang harus disiapkan yakni:

1. Gambar latar belakang dan icon RSS yang berukuran 16x16 pixel. Jika belum punya anda bisa cari di internet atau gunakan saja icon pack yang saya sediakan dibawah ini. Klik pada masing-masing gambar untuk download icon pack-nya.


Fresh, Free and Gorgeous RSS/Feed Icons

























Free web 2.0 RSS icons









15 Free RSS Icons











Setelah mendownload icon gambar yang di inginkan. Upload icon tersebut ke situs image hosting yang sering anda gunakan. Saya sendiri menguploadnya di Picasa web album. Setelah itu, copy url gambarnya. Contoh http://lh5.ggpht.com/_15FopxVONSo/TCWWyR--AEI/AAAAAAAADPQ/1vKMkWvvhhk/Ballon_Feed_128x128.png

2. Id feedburner anda. Contoh, http://feeds.feedburner.com/idanda. Tulisan yang dicetak tebal itulah id feedburner anda.

Bagaimana cara mengetahui id feedburner saya?

Caranya sangat mudah, login ke akun feedburner anda kemudian arahkan kursor mouse anda pada logo feed yang terletak disamping judul feed seperti yang dilingkari garis merah pada gambar dibawah. Kemudian perhatikan url dipojok kiri bawah. Tulisan yang berada dipaling belakang itulah id feedburner anda.


3. Aktivasi feed count
Feed count adalah sebuah widget mungil yang menampilkan jumlah subscriber atau feed reader anda dalam bentuk angka. Untuk dapat menikmati fitur feed count ini anda harus mengaktifkannya terlebih dahulu. Caranya, buka id feedburner anda lalu pilh tab Publicize. Pada bagian Service pilih Feed count, kemudian klik tombol Active. Selesai.

feedburner feed count

Setelah menyiapkan bahan-bahan yang diperlukan. Selanjutnya pasang kode form tersebut di blog anda. Ikuti langkah-langkah berikut:

1. Buka Blogger. Masuk ke menu Design -> Page Elements
2. Klik Add a Gadget lalu pilih HTML/Javascript
3. Copy kode dibawah kedalam kotak

<style>
.form {
border:1px solid #ccc; /* warna garis pinggir form */
background: #ffffff /* warna background form */
padding:3px; /* spasi form */
width:380px; /* panjang form */
height:180px /* tinggi form */
}

.rss {
background: url("http://lh5.ggpht.com/_15FopxVONSo/TCWWyR--AEI/AAAAAAAADPQ/1vKMkWvvhhk/Ballon_Feed_128x128.png") no-repeat top right;
}

.button {
background: #006699; /* warna tombol subscribe */
color: #FFFFFF; /* warna font subscribe */
font-size: 11px; /* ukuran font subscribe */
font-family: Arial, Tahoma, Verdana; /* font subscribe */
margin-left: 5px; /* margin kiri tombol subscribe */
border: 1px solid #234B69; /* warna garis pinggir tombol subscribe */
padding:3px 5px 3px 5px; /* jarak antara font dengan garis pinggir tombol subscribe */
font-weight: bold;
}
</style>

<div class="form">
<div class="rss">
<div style="font-weight:bold; color:#333333; font-size:15px; padding:10px 5px 5px 10px;"><a href="http://feeds.feedburner.com/hermanblog"><img src="http://lh3.ggpht.com/_15FopxVONSo/TCXI_jBHdlI/AAAAAAAADPY/Rh5cFsxiV4A/s800/005.png" /></a> <a href="http://feeds.feedburner.com/hermanblog">GET UPDATE VIA RSS</a></div>

<div style="font-weight:bold; padding:10px 10px;">GET UPDATE VIA EMAIL</div>

<div style="padding-left:10px">Dapatkan kiriman artikel terbaru langsung ke email anda!</div>

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=HermanBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div style="padding-left:10px; padding-bottom:10px; padding-top:10px"><input type="text" style="width:160px; height:18px" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Ketik email anda disini...&quot;;}" onfocus="if (this.value == &quot;Ketik email anda disini...&quot;) {this.value = &quot;&quot;}" type="text" value="Ketik email anda disini..." /> <input type="hidden" value="HermanBlog" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="button" type="submit" value="SUBCRIBE" /></div></form>

<div style="padding-left:10px"><a href="http://feeds.feedburner.com/HermanBlog"><img src="http://feeds.feedburner.com/~fc/HermanBlog?bg=ff7c00&amp;fg=444444&amp;anim=0" width="88" height="26" style="border:0" alt="" /></a></div>
</div></div>


Keterangan warna:

Biru: keterangan dari kode html tersebut
Hijau: posisi gambar background. Anda bisa mengganti posisinya dengan paduan berikut

Top right: Kanan atas
Top left: Kiri atas
Bottom right: Kanan bawah
Bottom left: Kiri bawah
Merah: alamat url gambar background
Merah bold: id feedburner. Ganti dengan id milik anda
Ungu: alamat url gambar icon rss
Hitam bold: kalimat dalam form. Ganti jika anda ingin menggunakan kata-kata lain
Orange: nama tombol
Orange bold: warna feed counter

4. Jika sudah, klik Save. Selesai

Sekedar Info: Jika anda tidak ingin menggunakan feed counter cukup hapus kode yang berkedip. Beres!

Selamat berkreasi...


Recent Posts:

49 comments

ArhiezOne said... 30 June, 2010
thx tutorialnya sob, berguna banget neh ..

hehehehehe ^_^
Achmad Chaedar said... 19 July, 2010
agak repot gan.. ada yang lebih simpel gan .. maklum masih newbie ^^V
Blog Of Rijal said... 30 July, 2010
nambah keren ajjah.....
herman said... 30 July, 2010
@Blog Of Rijal

thanks. hehe..
Alexa-com Weblog said... 12 August, 2010
wah mantap sob ...

thank ya ...
eko susilo said... 02 September, 2010
Kemarin q cari2 ga ada yg cocok, sepertinya ini sangat membantu dan sudah sy coba. Mksh bgt Om Agan.

Sepertinya kotak komentar nya rusak,apa qnya yg ga bs ya. Mknya lewat sini. Salam kenal Om,.......
Anonymous said... 12 October, 2010
wah ka herman thks infonya. tapi yang bagian yang kotak readers nya kq punya saya ga muncul? yang harus di ganti warna teks yang ungu apa orange supaya bagian readers nya muncul?
herman said... 12 October, 2010
@Anonymous:

Anda harus aktifkan fitur feed count terlebih dahulu . Caranya sudah saya sebutkan diatas, coba baca kembali.
Anonymous said... 12 October, 2010
ok de mas .makasih banyak ya infonya ^^
jejagongan said... 15 November, 2010
mansstraapp....alias mantab langsung terapp...kan..
makasie bbuanyaakkk...
GRESS FM KAWALI said... 23 November, 2010
makasih infonya sob,.. kreeeen lah!eh kunjungi balik ke site kami! jangan lupa follow key
Ramanez said... 22 January, 2011
Bagus banget...thank;s
tengok blog saya ya.
Master said... 23 January, 2011
@Achmad Chaedar

blog inilah yang membahasnya dengan bahasa yang sederhana, caranya emg kek gt, mau gmn lg..
yahaya said... 03 February, 2011
makasih tipsnya
Black Cyber said... 06 February, 2011
udah saya pake mas keren banget tuh blognya
lengkap.
terus berjuang.

Mas follow blog aku ya

http://ibnumask.blogspot.com/
Yusuf Zulkarnain - Pulogebang Cakung said... 10 February, 2011
Ini kreatif banget, ane tertatik untuk memasang di http://yusufzulkarnain.blogspot.com Tapi ada problem, Suhu ('guru' ala Ko Ping Hoo, hee ...heee!) pesan Burner "The feed does not have subscriptions by email enabled." Bagaimana ini Suhu. Thanks.
Black Cyber said... 19 February, 2011
@Yusuf Zulkarnain - Pulogebang Cakung
Mas coba taruh di notepad
setelah itu tekan Ctrl+F di notepad,
dan ketik Herman, dan Herman itu mas ganti semua jadi username Feed Mas.
Black Cyber said... 21 February, 2011
Om Herman kalau misalnya gambar backgroundnya dua gimana
21Johan said... 01 March, 2011
wah,, berhasil,,
keren pula,,
thanks ya,,
coba di view donk blog saya, dari hasil tutitorial subcribe ini, , xixi
Achbar said... 15 March, 2011
Ijin Pakai Formnya ya Mas !!
Thanks,,
Ribet Kalo Mau edit sana sini,,
Jadinya malah berantakan..
Mampir ke sini http://achbar-dr.blogspot.com
G. Mangke said... 31 March, 2011
punya saya sudah berhasil, makasih ya... ;)
Cyber said... 01 April, 2011
maksih banyak infonya gan...
kalo mau mampir klik di sini
Admin said... 09 July, 2011
Very good...
Giri said... 08 August, 2011
terima kasih mas....
PakuAlam said... 15 September, 2011
mantap gan tutorialnya....
Atoin Kuan said... 02 October, 2011
Thx...tutornya sangat membantu saya dlm belajar blog.
Novi Effendi [Abu Hafsh] said... 22 October, 2011
Alhamdulillah, terima kasih tutorialnya mas.... udah di praktekin lansung... di http://www.novieffendi.com/ "Menguak Ilmu, Amal dan Dakwah Generasi Salaf Terbaik Dalam Menegakkan Sunnah"
Fahmi Setiawan said... 14 November, 2011
wah, infonya berguna banget gann.... :D
thx ya buat infonya.... :)
Arizona Leo said... 22 January, 2012
gan kalo di taruh di bawah postingan kok ga bisa yah ???

mohon bimbingannya
Rudy Hartono said... 31 January, 2012
terima kasih dengan informasinya yang sangat bermanfaat dan sangat bermutu sekali, salam kenal and visit me back
Guntur Pieter said... 12 February, 2012
mantap, aq udah pakai
Vera Wati said... 10 March, 2012
Ini dia artikel yang saya cari, .... thanks bos..
sepri yanto said... 02 April, 2012
langsung di coba mas makasih infonya
Rudy Hartono said... 14 April, 2012
makasih tutorialnya
Rezza Hutama said... 03 June, 2012
ini gan yang ane cari keren gan :)
MD Yudhie said... 15 June, 2012
:)] matur nuhun mas Brott ah.. mampir ke ane att, Http://infopagi899.blogspot.com
8-}
Admin said... 07 July, 2012
thanks gan..
ane lagi memperbaiki feed nie
Blogger Pemula said... 08 July, 2012
Makasih atas tutorialnya sob, sudah saya praktekkan dan berhasil :)
fauzyeah said... 25 July, 2012
Bos kalau pengen naruhnya di bawah postingan gmn ya ? info secepatnya ya bos
Heri Topan said... 04 August, 2012
Thanks infonya :D
GM Latief said... 07 August, 2012
kunjungi
blogcybercorp.blogspot.com/2012/08/blog-cyber-corporation-template.html
Direktori Penerjemah Indonesia said... 27 August, 2012
Terima kasih banyak tipsnya. Langsung saya coba aja mas... :)
mas trie said... 04 September, 2012
@hermanThank you masbro, sudah tak coba diblog saya
elhaq-pos.blogspot.com said... 19 October, 2012
mantap mas infonya ..buat ane newbie
Farhan Breaker said... 21 October, 2012
Thank's infonya ...
Tutorial Blog
Cirebon-Cyber4rt said... 16 November, 2012
makasih gan :D
KampungInggris Pare said... 18 November, 2012
permisi gan..
mau tanya, kalau mau setting feedburner caranya bagaimana ya?
tiap diklik subscribe muncul "The feed does not have subscriptions by email enabled.

kira-kira dmn settingannya yang salah?
mhn ptnjuknya, thanks..
Dany said... 19 December, 2012
Infonya mantap, dan saya berhasil
fikri ashsiddiqi said... 12 March, 2013
infonya mantapppp

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* : 8-} ~x( :-t b-( :-L x( =))

Post a Comment