Merubah tampilan kotak langganan feedburner



Sebelumnya saya bingung bagaiman Sih bisa Merubah tampilan kotak langganan feedburner yang bagus dan menarik.
Karena widget bawaan dari Feedburner Google kurang menarik tampilannya.hahaa!

Setelah beberapa menit berfikir, kenapa saya tidak melakukan editing saja pada widget feedburner bawaan Google?
nah, mulai dari fikiran itu, saya coba-coba Edit sendiri Dan BIsa.
baiklah langsung saja pada tahapannya YAh:

Tampilan default Widget Langganan Email punya Feedburner Google :

Yapz Maka Akan Berubah Menjadi Seperti Ini:

Cara merubahnya sebenarnya cukup gampang, kita tinggal menambahkan beberapa code hiasan aja.
Beda dikit sih dari yang feedburner yang standat.

Beritut Script yang Asli:


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




Berikut Script yang telah saya Modification:


<form action="http://feedburner.google.com/fb/a/mailverify" style="border:1px solid #ccc;padding:5px;text-align:left;background:#fff;color: #000000" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=7ask', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkNNIRfEzks_LubEbqvC7ioL46Dr86F92xeWE2rzV2gKmPjXELYo55hT3SVFFrTPluaxfOpYwu7mlvOkRtkDAlff3za6kwnTzGPUmrjLYXtfQV7HtrUejBBfYFc11ZBjt6c_LyzWLMFEQ/?imgmax=800)no-repeat top right;padding:10px 0px">

<p>Kirim update terbaru dari</p>
<p>Blog Wawan Berbagi Ilmu langsung ke Email sobat!</p>
<p><input style="width:200px" value="Masukan alamat Email sobat... " name="email " type="text/"/><input value="7ask" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/> <input value="Langganan" type="submit"/></p><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a>

</div></form>



Penjelasan Script setelah editing :

    *
      Script baris pertama

padding:5px >> merupakan jarak tulisan dengan garis tepi widget

background:#fff >> Background dasar kotak widget

color: #000000" >> Warna Teks

text-align:left >> Rata tulisan (kiri)

http://feedburner.google.com/fb/a/mailverify?uri=7ask >> Ganti dengan url feedburner sobat

    *
      Script baris 2

Berisi url gambar background, bisa sobat ganti dengan gambar apapun, tapi ukuran gambar disesuaikan ya,,,

    *
      Script baris 3

Kirim update terbaru dari >> Bisa diganti sesuai keinginan

Blog Wawan Berbai Ilmu langsung ke Email sobat! >> Ganti saja sesuai keinginan

width:200px >> Panjang kotak teks email

value="Masukan alamat Email sobat... " >> Tulisan di kotak teks email

input value="Langganan" >> Tulisan pada tombol input




Hanya itu yang saya lakukan untuk merubah tampilan Widgetnya, cukup sederhana, hehhe,..
maklum masin Nyoba-nyoba.. baru bisa editing, gak bisa buat sendiri.. hehe..
Untuk mendapatkan script asli dari widget tersebut sobat langsung saja login di http://feedburner.google.com
Kemudian pilih feed blog sobat yang ingin sobat buat widgetnya,
kemudian pilih TAB “Publicize”, setelah itu pilih yang “email subcriptions”, copy scriptnya,
lalu lakukan editing seperti diatas. Tambahkan code-code yang belum tercantum.

Atau sobat tinggal copas saja script editing diatas, lalu ganti code-code pentingnya, seperti url feed, gambar dan beberapa tulisan keterangan.

Selamat mencoba, semoga sobat paham dan artikel ini berguna… thanks :D