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.
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 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioO_XOBMGiW9KZig-Mn0HXwwAPBRuPJwaquhnWO0v381nrDH3cxYlgtqWcl_MhK616WgLsQTMF9okB5quICYmuz4HNCaa6IIn0olzFsM6LmZnsJ0Rt747D1zy-DL39G1RPbkFdq6ye28xp/
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.
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioO_XOBMGiW9KZig-Mn0HXwwAPBRuPJwaquhnWO0v381nrDH3cxYlgtqWcl_MhK616WgLsQTMF9okB5quICYmuz4HNCaa6IIn0olzFsM6LmZnsJ0Rt747D1zy-DL39G1RPbkFdq6ye28xp/") 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNkVSXRiNF27Uvb1HfQyWl78HKxwGHig2whGeJQ0unnO9SZgAUHhFDKMQi7rg_Xu3bBiJjuwpn8vWzG-TshhhmpfomU0yh8Rk2NhgnoSI8kfx9md01EuVlRd7MlUpn3N06eYIZHAAk5Rnx/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 == "") {this.value = "Ketik email anda disini...";}" onfocus="if (this.value == "Ketik email anda disini...") {this.value = ""}" 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></div>
Keterangan warna:
Biru: keterangan dari kode html tersebut
Hijau: posisi gambar background. Anda bisa mengganti posisinya dengan paduan berikut
Top right: Kanan atasMerah: alamat url gambar background
Top left: Kiri atas
Bottom right: Kanan bawah
Bottom left: Kiri bawah
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...
49 comments
hehehehehe ^_^
thanks. hehe..
thank ya ...
Sepertinya kotak komentar nya rusak,apa qnya yg ga bs ya. Mknya lewat sini. Salam kenal Om,.......
Anda harus aktifkan fitur feed count terlebih dahulu . Caranya sudah saya sebutkan diatas, coba baca kembali.
makasie bbuanyaakkk...
tengok blog saya ya.
blog inilah yang membahasnya dengan bahasa yang sederhana, caranya emg kek gt, mau gmn lg..
lengkap.
terus berjuang.
Mas follow blog aku ya
http://ibnumask.blogspot.com/
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.
keren pula,,
thanks ya,,
coba di view donk blog saya, dari hasil tutitorial subcribe ini, , xixi
Thanks,,
Ribet Kalo Mau edit sana sini,,
Jadinya malah berantakan..
Mampir ke sini http://achbar-dr.blogspot.com
kalo mau mampir klik di sini
thx ya buat infonya.... :)
mohon bimbingannya
8-}
ane lagi memperbaiki feed nie
blogcybercorp.blogspot.com/2012/08/blog-cyber-corporation-template.html
Tutorial Blog
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..
Post a Comment