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.
Tidak ada komentar:
Posting Komentar