Modifikasi kotak berlangganan feedburner


Akhirnya setelah saya mengalami kebosanan (Virus Bosan menghampiri) selama 1 minggu terakhir ini, semangat saya perlahan datang kembali. Itu terlihat dari perubahan template. Template yang dulu, saya buang dan saya ganti dengan yang lebih fresh.

Kembali lagi ke topik pembicaraan. Sebagian blogger menganggap feedburner wajib ada di dalam blog kita. Manfaat yang paling di rasakan adalah pengunjung lebih mudah dalam berlangganan artikel kita melalui email mereka. Sehingga setiap kita update postingan, pengunjung akan menerima artikel kita dalam bentuk pesan email (membuat email dengan domain sendiri).

Lalu, bagaimana caranya membuat tampilan kotak feedburner menjadi lebih menarik. Sehingga pengunjung bisa betah berlama-lama di blog anda? Caranya adalah dengan modifikasi tampilan kotak feedburner. Cara modifikasi feedburner berikut:


  • Login ke Blogger
  • Masuk ke bagian Rancangan
  • Pilih Elemen Halaman
  • Kemudian klik Tambah Gadget
  • Piih HTML/Javascript
  • Masukan kode di bawah ini, di dalam form yang di sediakan:

<style>
.form{border:1px solid #d8d8d8;background:#fff padding:3px;width:308px;height:200px;-moz-border-radius:6px}.rss{background:url("http://i56.tinypic.com/5y6kxi.png") no-repeat top right}.button{background:#9b9b9b;color:#FFF;font-size:11px;font-family:Arial,Tahoma,Verdana;margin-left:5px;border:1px solid #fff;padding:3px 5px 3px 5px;font-weight:bold;-moz-border-radius:5px}
</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/egapriatmablog"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTIrxbZKmzqHLG1XVl2EU6zSCNxQHf9nBqiiTj2pFQHv4Xl-iI7G_6UgGt3ZomEcDyLoYq1voUxJlCxF0qCy7NPcBnidNAdu-1ZgIc1VkupMnzPah68gOwIi8sEBQWAIb0T2gfqsRX7Ml8/s144/rss%20feed%20icon.gif" /></a> <a href="http://feeds.feedburner.com/egapriatmablog">GET UPDATE VIA RSS</a></div>
<div style="font-weight:bold; padding:10px 10px;">GET UPDATE VIA EMAIL</div>
<div style="padding-left:10px">Jika anda suka dengan artikel di blog ini. Silahkan berlangganan via RSS. Isi alamat email anda di bawah ini!!</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=egapriatmablog', '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="egapriatmablog" 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/egapriatmablog"><img src="http://feeds.feedburner.com/~fc/egablogs?bg=99CCFF&amp;fg=444444&amp;anim=1" width="88" height="26" style="border:0" alt="" /></a></div>
</div></div>

Keterangan:
Kode warna hijau : Biarkan atau ganti dengan gambar sesuka anda
Kode warna merah : Ganti dengan id feedburner anda
Kode warna oranye: Ganti dengan gambar feedcount anda

  • Setelah semua selesai anda edit, klik save dan lihat hasilnya

Begitulah cara memodifikasi kotak berlangganan feedburner. Semoga artikel di atas bermanfaat

35 komentar:

  1. Kedua.. Saya aja belum pasaang .. lupa caranya

    BalasHapus
  2. wah manteb nich... disimpan dulu biar nanti klo dah daftar feedburner bisa dipasang

    BalasHapus
  3. oke juga neh buat mempercantik blog

    BalasHapus
  4. modifikasinya terlihat di css dengan penambahan img http://i56.tinypic.com/5y6kxi.png
    untuk css3 hanya moz yang di temnpatkan webkit nya tidak
    -moz-border-radius:6px

    BalasHapus
  5. kl blog q g tak pasang sob, abisnya g ada yg berlangganan

    BalasHapus
  6. @Rizky2009 Kalo menurutku, sebaiknya anda memasang aja. Karena anda termasuk blogger tipikal yang selalu update. Baik itu anda penulisnya atau blogger lain. Pasti banyak yang berlangganan

    BalasHapus
  7. makasih ega, aku pasti pake cara ini, udah lama nyari caranya. apakah ukuran gambar menyesuaikan sendiri dengan ukuran sidebar? atau dirubah sendiri ukuran gambarnya?

    BalasHapus
  8. akhirnya nemu juga caranya.
    maksih y!!!

    BalasHapus
  9. Artikel yang menarik bro... Ijin bookmar ya, barangkali nanti saya membutuhkannya

    BalasHapus
  10. makasi gant tutornya..!!
    gue sanget menikmati tutornya dari agant..!!

    sekali lagi makasi ya..

    BalasHapus
  11. Wah, namtab, pertamax, dan huibat

    BalasHapus
  12. bagus sob, koment balik ya, sambil lihat aku sudah bisa melakukannya hehe

    BalasHapus
  13. thanks atas infonya,,, Berkunjung balik ya Download Film Gratis | High Quality - Boxsoffice
    udah aku praktekin lhooo, liat aj ya gan

    BalasHapus
  14. artikelnya menarik terus iih.... belajar dimana sie..???

    BalasHapus
  15. This is fantastic information for the blog. I really love the way infomration Presented in your post. I have added to you in my social bookmarking ... and i am waiting for your next post.

    BalasHapus
  16. thanks for share .. salam kenal ..bolehkan d link dg www.fisikadantikonline.blogspot.com
    Fisika dan TIK online
    terima kasih

    BalasHapus
  17. mantep ni gan...ngebantu banget buat neubi kayak ane,,, top pokoknya...

    BalasHapus
  18. terlalu asyik nih tutorial... perlu di bokmark...

    BalasHapus
  19. sip gan, keren.. trims atas tutorialnya

    BalasHapus
  20. Wah ane lgi nyari2 ketemu juga disini...

    pertamax gan...

    BalasHapus