Menghiasi Blog Dengan Mini Icon

Bagi sahabat blogger yang ingin menghiasi templatenya dengan tampilan icon-icon mini seperti yang kalian lihat pada blog ini, saya akan mencoba membantu kalian caranya. Untuk menambahkan beberapa icon pada blog, kalian butuh kode css yang sudah saya kategorikan masing-masing di bawah ini. Silahkan copas kode css tersebut tepat di atas kode ]]></b:skin> pada bagian "Edit HTML" template blog kalian dan kemudian simpan.

/* Mini icon Untuk label pada kolom sidebar
-----------------------------------------------
*/
#Label1 ul li {
 background: url(http://img297.imageshack.us/img297/6615/labelal6.png) left no-repeat;
 padding: 0 5px 0 20px;
 line-height:1.6em;
 }
/* Mini icon Untuk label pada kolom Footer
--------------------------------------------------
*/
.post-labels {
 background: url(http://img297.imageshack.us/img297/6615/labelal6.png) left no-repeat; 
 padding-left: 20px;
 font-family: "Times New Roman", Serif; 
 line-height:1.6em; font-size:12px;
 }
/* Mini icon Untuk arsip pada kolom sidebar
--------------------------------------------------
*/
.BlogArchive #ArchiveList ul li.archivedate  {
 border-bottom: 1px solid #EFF0F1;background: url('http://img213.imageshack.us/img213/289/v5bullets.gif') no-repeat 5px 5px;
 margin: 0 2px; 
 padding:0 5px 0 35px; 
 line-height:1.8em;
 }
span.zippy  {display:none;}

/* Mini icon Untuk tanggal terbit postingan
---------------------------------------------------
*/
.date-header {
 background: url(http://img4.imageshack.us/img4/4774/calendarmonthqz7.png) left no-repeat;
 padding:0 0 0 20px;
 }
/* Mini icon Untuk recent posts dan recent comments
---------------------------------------------------
*/
#Feed1 ul li, #Feed2 ul li  {
 border-bottom: 1px solid #EFF0F1;
 background: url('http://img213.imageshack.us/img213/289/v5bullets.gif') no-repeat 5px 5px;
 margin: 0 2px; 
 padding-bottom:2px 5px 2px 25px;
 }
/* Mini icon Untuk comments pada kolom footer
---------------------------------------------------
*/
.comment-link {
  background: url(http://img220.imageshack.us/img220/158/icocommentwfi3.png) left no-repeat; 
  padding-left: 17px;
  font-family: "Times New Roman", Serif; 
  line-height:1.6em; 
  font-size:12px;
  }

/* Mini icon bonus dari duayu
---------------------------------------------------
*/
.fn {
  background: url(http://img504.imageshack.us/img504/1718/userty2.png) left no-repeat; 
  padding-left: 20px;
  font-family: "Times New Roman", Serif; 
  line-height:1.6em; font-size:12px;
  }
.timestamp-link {
  background: url(http://img4.imageshack.us/img4/3465/datelx9.png) left no-repeat; 
  padding-left: 20px;
  font-family: "Times New Roman", Serif; 
  line-height:1.6em; 
  font-size:12px;
  }

Jika kalian ingin mengganti icon-icon tersebut dengan milik kalian sendiri silahkan kalian ganti tulisan yang sudah saya beri warna biru dengan URL icon tempat dimana kalian mengupload icon kalian. Nah selebihnya silahkan kalian otak atik sendiri kode css-nya sesuai dengan selera kalian. Semoga ini sedikit membantu.