Thursday, March 18, 2010

Merubah tampilan kotak langganan feedburner

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(http://lh4.ggpht.com/_pt7i0nbIOCY/SYbWmZRorbI/AAAAAAAABFM/sbwOZbMjMEs/05_thumb%5B1%5D.png?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

COMMENTS :




Don't Spam Here

7 komentar to “ Merubah tampilan kotak langganan feedburner ”

Nice artikel bosssss,
Berknjung ke blog ku ya bosss

fahmi zolla said...
on 

@fahmi: Ok sama2 Boz...!! Nih Q lagi kunjungin blog km?

Mazwawan Blog said...
on 

thank infone

Gudang Ilmu said...
on 

Makasih infonya Gan!!
Mampir juga di blogku kalau mau tukeran link!

sodiyc said...
on 

thanks artikelnaya,,,

Arya jafarudin said...
on 

kk wanwan ada fb gak

reza heryawan said...
on 

ada... ni: wawan adie saputra

Anonymous said...
on 

Post a Comment

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda dan Saya follow juga. Blog 7ASK adalah Blog Do Follow, Terimakasih atas kunjungan Anda..!

 

Copyright © 2008-2011 All Rights Reserved. Mobile View Powered by 7ASK / WAWAN ADIE and Distributed by Template

Facebook Twitter Mykaskus