Info Lainnya

Menghiasi Blog Dengan Mini Icon

26 Maret 2009

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.

4 komentar:

»» LIHAT / TUTUP KOMENTAR

Unknown

Halo mas Duayu..
wah salam kenal ya mas,
mana artikelnya yang baru..
asli, blognya buagus bener nih
infonya juga keren

beat2ws

Sip boss. Salam kenal.

dunia_maya

kok kode cssnya nggak bisa dicopas ya mas?

me

beautiful articel and so helpful
btw this is also a good blog
http://www.soosbourne.blogspot.com/

         

:))

;))

;;)

:D

;)

:p

:)

:((

:(

\m/

:-bd

b-(

:-L

@};-

(*)

[-X

~O)

B-)

:!!

:O)

:-??

:-c

:X

=((

:-o

:-/

:-*

:|

8-}

:)]

:ar!

=))

X_X

:-h

:-"

:-t

#:-S

:-?

:-$

#-o

:-B

:bz

o-+

:o3
"Ekspresikan komentar kamu dengan tampilan emoticons di atas"
"Silahkan copy-paste kode shortcut yang ada di bawah gambar untuk menampilkan emoticons pada komentar kamu"
Terima kasih, komentar anda sangat berarti bagi blog ini

Posting Komentar