Facebook Twitter
Bookmark this page

Selasa, 21 Mei 2013

Cara Memodifikasi Tampilan Widget FeedBurner Supaya Terlihat Indah

Tidak lebih dari lima bulan yang lalu, saya pernah membuat sebuah posting dengan judul "Cara Buat Widget Recent Post Dengan FeedBurner". Setelah saya coba pasang widget Feedburner itu pada blog saya yang lain, saya baru sadar tenyata tampilan dari widget Feedburner itu sangat simple (Sederhana). Jangan-jangan karena simpel-nya itu, banyak blogger yang tidak memasangnya. Beranjak dari semua itu, saya pun mencari script di Google yang bisa digunakan untuk memperindah tampilan Widget FeedBurner milik sobat, dan Alhamdulillah, saya pun menemukannya.

Dengan menggunakan kode CSS yang saya dapatkan Bullet list yang terdapat di sisi kanan judul posting kita akan di ganti dengan sebuah ikon yaitu Ikon tanda silang. Bila pengunjung blog kita mengarahkan cursor-nya pada judul posting kita, maka ikon tersebut akan berubah menjadi ikon thick (ikon tanda centang). Bagaimana? Keren kan?

Cara Memodifikasi Tampilan Widget FeedBurner
  • Masuk ke akun Blogger sobat
  • Setelah itu, pada Widget Feedburner sobat, sisipkan kode berikut :
<style>
 /* ============ Customize Fedburner Buzzboost Widget By www.tutorialblogspot.com ============= */
 div.feedburnerFeedBlock ul li {
     background: url(http://1.bp.blogspot.com/-4hofGDBucAI/UHPdE3mBtsI/AAAAAAAAB3E/9CtRu7yRsik/s1600/rb+cancel+icon.png) no-repeat 2px;
     list-style-type: none;
     margin: 0 0 5px 0px;
     padding: 5px 5px 5px 30px !important;
     border: 1px solid #dddddd;
     border-radius: 10px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
  }
 div.feedburnerFeedBlock ul li:hover {
     background: url(http://1.bp.blogspot.com/-Vfr36DB7FcA/UHPdf9xOwcI/AAAAAAAAB3M/Dvdof8O5F1c/s1600/rb+mark+icon.gif) no-repeat 2px;
     border: 1px dashed #848484;
     -moz-border-radius: 8px;
     -webkit-border-radius: 8px;
 }
 div.feedburnerFeedBlock ul li a:hover {
     text-decoration: none;
}
 div  #creditfooter {
     display: none;
 }
 /* ============ Customize Feedburner Buzzboost Widget By www.tutorialblogspot.com ============= */
 </style>
  • Sehingga keseluruhan dari kode kita akan terlihat seperti di bawah ini!
<style>
 /* ============ Customize Fedburner Buzzboost WidgetBy www.tutorialblogspot.com ============= */
 div.feedburnerFeedBlock ul li {
     background: url(http://1.bp.blogspot.com/-4hofGDBucAI/UHPdE3mBtsI/AAAAAAAAB3E/9CtRu7yRsik/s1600/rb+cancel+icon.png) no-repeat 2px;
     list-style-type: none;
     margin: 0 0 5px 0px;
     padding: 5px 5px 5px 30px !important;
     border: 1px solid #dddddd;
     border-radius: 10px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
  }
 div.feedburnerFeedBlock ul li:hover {
     background: url(http://1.bp.blogspot.com/-Vfr36DB7FcA/UHPdf9xOwcI/AAAAAAAAB3M/Dvdof8O5F1c/s1600/rb+mark+icon.gif) no-repeat 2px;
     border: 1px dashed #848484;
     -moz-border-radius: 8px;
     -webkit-border-radius: 8px;
 }
 div.feedburnerFeedBlock ul li a:hover {
     text-decoration: none;
}
 div  #creditfooter {
     display: none;
 }
 /* ============ Customize Feedburner Buzzboost Widget By www.tutorialblogspot.com ============= */
 </style>
<script src="http://feeds.feedburner.com/tutorialblogspot/PbmK?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/tutorialblogspot/PbmK"></a><br/>Powered by FeedBurner</p> </noscript>

Tambahan :
  1. Yang warna merah adalah kode Feedburner.
  2. Hasil akhirnya akan terlihat seperti di bawah ini!

Live Demo


belajar seo,seo indonesia,jasa seo murah,tutorial seo,jasa seo,tips seo,blog seo,template seo,optimasi seo,cara daftar blog,daftar blog dofollow,chrome offline installer,feedburner,read more blog,widget blogger,gadget blog tips and trik komputer,belajar computer,tips tips komputer,komputer software,download software internet,cara adsense,blog adsense,googleadsense,adsense blogger,blogger adsense,alternative adsense,cara memasang widget blog,blogger,trik blogspot,membuat blog keren,tutorial membuat blog,tutorial mempercantik blog,tutorial blog lengkap,cara membuat blog,free template blog,cara membuat blogger gratis,tutorial untuk blog,buat blogger baru,tutorial web design,free widget for blog,cara membuat widget,download template untuk blog,tutorial design blog,template gratis,tutorial blogspot lengkap