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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitUk0sVCyNjb1-n8h4mGfEEfH5b8MJbo6jRbqhn0aTmCs18aJkfM5mXTZE3fNLFHexpfia_ynjoohnuz7hIc0M-bfsIopH_zQQRyLyTu9UxZV2NEPgkix8bAS7eNW-kCEaLfmDKisuOwnl/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhQT9T_V1kJ5i_Ka2RpcCgivvx7TTG3CzjvptJlMeC1dBi0Q4D6EwYM4Y4gthKqVMq3qbh_TOLBDqC5rLmwzuzP-4W5EO_GWBS8lwlfvGOdHCEoDY7djAktPtkzGHPJ-j3PvScxFBXwEnU/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitUk0sVCyNjb1-n8h4mGfEEfH5b8MJbo6jRbqhn0aTmCs18aJkfM5mXTZE3fNLFHexpfia_ynjoohnuz7hIc0M-bfsIopH_zQQRyLyTu9UxZV2NEPgkix8bAS7eNW-kCEaLfmDKisuOwnl/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhQT9T_V1kJ5i_Ka2RpcCgivvx7TTG3CzjvptJlMeC1dBi0Q4D6EwYM4Y4gthKqVMq3qbh_TOLBDqC5rLmwzuzP-4W5EO_GWBS8lwlfvGOdHCEoDY7djAktPtkzGHPJ-j3PvScxFBXwEnU/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!