Tampilan form berlangganan email feedburner memang terlihat kurang menarik. Untuk itu ada beberapa hal yang perlu kita modifikasi supaya form tersebut bisa keliatan menarik di mata pengunjung.
Membuat tombol subscribe sejajar dengan kolom text input
Tampilan default form berlangganan email feedburner biasa-nya Seperti Ini Untuk membuat tampilan yang lebih menarik Hasilnya Bisa sobat Lihat Gambarnya Disini
Jika tertarik dengan tampilan formulir berlangganan yang seperti itu
sobat bisa menggunakan widget Formulir berlangganan feedburner yang tellah saya modifikasi
agar tampilanya lebih menarik
1.Login Blogger
2.Tuju ke Rancangan, Tambah gadget, HTML Javascript
3.Copas semua kode di bawah ini
<a href="http://feedburner.google.com/fb/a/mailverify?uri=i-om&loc=en_US"><img alt="feedburner" style="border: 0pt none; margin-top: 15px;" src="http://lh4.ggpht.com/_9b1traaMESE/SmDYssZpwFI/AAAAAAAAALs/g17Vr4lP_sY/Rss%20feeds%20icon%203222.png" /></a><!-- AddThis Button BEGIN -->
<div expr:addthis:url="data:post.url" class="addthis_toolbox addthis_default_style" expr:addthis:title="data:post.title"><a share="[object Object]" class="addthis_button_compact at300m" href="http://www.addthis.com/bookmark.php?v=250&pub=saer_gh" ost="1" conf="[object Object]"><span class="at300bs at15t_compact"></span>Share</a> <span class="addthis_separator">|</span> <a target="_blank" href="//www.addthis.com/bookmark.php?pub=NamaBlog&v=250&source=tbx-250&tt=0&s=facebook&url=http%3A%2F%2FAlamatblog.blogspot.com%2F&title=Belajar%20SEO%20Blogspot%20%7C%20Bisnis%20Online%20%7C%20Blogger%20Tutorial%20%7C%20Blog%27s%20Blog&content=&lng=id" share="[object Object]" class="addthis_button_facebook at300b" ost="1" conf="[object Object]" title="Send to Facebook"><span class="at300bs at15t_facebook"></span></a><a target="_blank" href="//www.addthis.com/bookmark.php?pub=NamaBlog&v=250&source=tbx-250&tt=0&s=myspace&url=http%3A%2F%2FAlamatBlog.blogspot.com%2F&title=Belajar%20SEO%20Blogspot%20%7C%20Bisnis%20Online%20%7C%20Blogger%20Tutorial%20%7C%20NamaBlog%27s%20Blog&content=&lng=id" share="[object Object]" class="addthis_button_myspace at300b" ost="1" conf="[object Object]" title="Send to MySpace"><span class="at300bs at15t_myspace"></span></a><a target="_blank" href="//www.addthis.com/bookmark.php?pub=NamaBlogsblog&v=250&source=tbx-250&tt=0&s=google&url=http%3A%2F%2FAlamatBlog.blogspot.com%2F&title=Belajar%20SEO%20Blogspot%20%7C%20Bisnis%20Online%20%7C%20Blogger%20Tutorial%20%7C%20NamaBlog%27s%20Blog&content=&lng=id" share="[object Object]" class="addthis_button_google at300b" ost="1" conf="[object Object]" title="Send to Google"><span class="at300bs at15t_google"></span></a><a target="_blank" href="//www.addthis.com/bookmark.php?pub=NamaBlog&v=250&source=tbx-250&tt=0&s=twitter&url=http%3A%2F%2FAlamatBlog.blogspot.com%2F&title=Belajar%20SEO%20Blogspot%20%7C%20Bisnis%20Online%20%7C%20Blogger%20Tutorial%20%7C%20NamaBlog%27s%20Blog&content=&lng=id" share="[object Object]" class="addthis_button_twitter at300b" ost="1" conf="[object Object]" title="Tweet This"><span class="at300bs at15t_twitter"></span></a><script src="http://s7.addthis.com/js/250/addthis_widget.js?pub=NamaBlog" type="text/javascript"></script><!-- AddThis Button END --><a alt="Subscribe using any feed reader!" href="http://www.addthis.com/feed.php?pub=NamaBlog&h1=http%3A%2F%2FAlamatBlog.blogspot.com%2Ffeeds%2Fposts%2Fdefault&t1=" target="_blank" onclick="return addthis_open(this, 'feed', 'http://AlamatBlog.blogspot.com/feeds/posts/default')"><img style="border-width: 0px;" alt="Subscribe" src="http://s7.addthis.com/static/btn/lg-feed-2-en.gif" height="16" width="125" /></a><script src="http://s7.addthis.com/js/250/addthis_widget.js?pub=NamaBlog" type="text/javascript"></script><div class="atclear"></div></div>
<form action="http://feedburner.google.com/fb/a/mailverify?uri=i-om&loc=en_US" ,="" popupwindow\="" );return="" true="" target="popupwindow" id="subscribe" onsubmit="window.open(\" scrollbars="yes,width=550,height=520\" style="border: 1px solid rgb(255, 255, 255); padding: 0px; text-align: left;" http:="" feedburner.google.com="" fb="" a="" mailverify?uri="BloggerDashboard" method="post" \=""><img style="vertical-align: middle; border: 0pt none;" src="http://i35.tinypic.com/ifv98i.jpg" /> <input ;}="" )="" width:280px="" enter="" email="" onfocus="if (this.value == " value="Enter your email..." address...="" id="subbox" onblur="if (this.value == " {this.value="style=" your="" name="email" type="text" />
<input value="http://feedburner.google.com/fb/a/mailverify?uri=NamaBlog" name="url" type="hidden" />
<input value="Subscribe To Feed" name="title" type="hidden" />
<input value="en_US" name="loc" type="hidden" />
<input id="subbutton" value="Subscribe Now" type="submit" />
</form>
Keterangan:
Cari http://feedburner.google.com/fb/a/mailverify?uri=i-om&loc=en_US
Ganti dengan alamat Feedburner sobat sendiri
Cari NamaBlog
Ganti dengan NamaBlog sobat
Cari Alamatblog.blogspot.com
Ganti dengan alamat Blog sobat
4.Lalu disimpan....
Selamat mencoba :D
Label: Blogger, Trik, Tutorial Blog
14 komentar:
banyak banget codenya del . . .
puyeng gw . . . wkwkwkwkkw
dengan memodif kotak feedburner akan semakin memperindah blog .
coba kamu lihat hasilnya Disini
walaupun kodenya banyak tapi gak berat kok
wah, saya juga sudah coba, tampilannya memang keren gan.. mantap triknya buat blog pemula seperti saya,, :D
Mf, itu kurang memperjelas. tolong di "block warna" mana saja yg harus diganti, jd ga nyari sendiri yang harus di ganti. Saya sendiri puyeng tu hehehe, . . .
yakin gan ga berat nihh..???? salam kenal ya gan...
sippp....terapkan!!
Kurang jelas karena tidak di tandai mana yg hrs di ganti, misalnya di blok warna kan enak.
http://www.freedom-template.blogspot.com
http://www.purbalingga.co.cc
terimakasih infonya
Masih bingung gan,, tolong di kasih warna kode yg harus di ganti...
Mantap gan. udah aku coba di blog ku. saudara2ku semua bisa liat hasilnya di blog ku. terus berkarya. semoga memperlancar usahaku untuk Make*Halal*Money*By*Online.
eits..ijin copas ya..thx alot.
i'm gonna try it n awesome work, buddy. mtks.
http://agacollection.blogspot.com/2010/11/aga-collection
http://www.iei4every1.co.cc
Posting Komentar
Silahkan tinggalkan komentarnya...