Membuat icon cantik seperti saya sampaikan kemarin tidaklah sulit. Sedulur pun ternyata sudah banyak yang mengetahuinya. Tapi, tetap saja ini saya tulis kembali sebagai catatan saya.
Pada dasarnya, icon ini hanya memanfaatkan perilaku kursor. Ketika sebuah icon ditampilkan, tentunya merujuk ke suatu gambar tertentu. Nah, ketika kursor melewatinya (hover), rujukan itu diganti saja dengan gambar lain. Bisa juga ditambah variasi ketika suatu icon yang mengarah ke link tertentu, berganti gambar juga ketika link tersebut sudah pernah dikunjungi (visited).
Yang sederhana, hanya dibuat dua variasi saja. Bisa menggunakan dua gambar, yang pertama sebagai rujukan default, yang kedua sebagai rujukan hover. Untuk lebih ringkas, bisa juga menggunakan satu gambar saja yang dibuat memanjang, bisa secara horisontal maupun secara vertikal. Salah satu bagian, bisa atas/bawah atau kanan/kiri, digunakan sebagai rujukan default, dan bagian lain sebagai rujukan hover.
Pada contoh yang saya buat, gambarnya cukup satu saja memanjang secara vertikal.
Langkah-langkahnya adalah sebagai berikut:
Menyiapkan gambar
Pada contoh ini, saya membuat gambar dengan lebar 60px dan panjang 140px. Bagian bawah saya biarkan berwarna, sedangkan bagian atas di-desature untuk menghilangkan warnanya sehingga gambar menjadi grayscale. Penempatannya harus tepat karena bagian atas merupakan cermin bagian bawahnya.
Contoh gambarnya seperti ini:
Hasilnya nanti seperti ini:
Bisa juga gambarnya divariasi tidak hanya berganti warna melainkan berubah bentuk.
Contoh gambarnya seperti ini:
Hasilnya nanti seperti ini:
Contoh yang kedua ini agak berbeda karena saya menggunakan gambar bagian atas sebagai default-nya, dan bagian bawah sebagai hover-nya.
Setelah gambar-gambarnya siap, upload ke tempat penitipan yang sedulur sukai.
Menyiapkan aturan-aturan di dalam css
Langkah kedua adalah menyiapkan aturan-aturan yang disisipkan di css (pada beberapa CMS ada di style.css, pada blogspot sisipkan saja pada “Edit HTML”).
Aturan-aturan ini bisa ditempatkan di section/blok yang sedulur suka, atau bisa juga dibuatkan section tersendiri. Pada contoh ini, saya menempatkan di bawah section widget karena nantinya saya akan menggunakan icon ini melalui widget. Ada beberapa hal yang perlu diatur:
Contoh yang saya buat dengan id=-icon-menu adalah sebagai berikut:
#icon-menu{
background:transparent;
padding:0 0;
width: auto;}
#icon-menu ul{
height:70px; –>>ukuran ini adalah setengah panjang gambar icon.
color: #atur sendiri;
list-style-type:none;
overflow:hidden;}
#icon-menu li {
width: 60px; –>>ukuran ini adalah lebar gambar icon.
height:70px; –>>ukuran ini adalah setengah panjang gambar icon.
display:block;
float:right; –>>urutan gambar dari kiri ke kanan.
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0px 5px 0px 0px;
padding:0px 0px;
color:#atur sendiri;}
#icon-menu li a {
display:block;
width: 60px; –>>ukuran ini adalah lebar gambar icon.
height:70px; –>>ukuran ini adalah setengah panjang gambar icon.
display:block;
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0px 5px 0px 0px;
padding:0px 0px;}
#icon-menu li a:hover {
text-decoration: none;}
Perhatikan juga aturan-aturan bulleting ul dan li pada section di atasnya. Bilamana merupakan section tersendiri, beri aturan tambahan agar gambar bebas dari bullet yang biasa diatur menyertai ul dan li. Pada beberapa tema tertentu, hasil susunan icon akan vertikal, bukan horisontal, oleh karena itu, beri aturan tambahan agar susunan icon ter-display secara inline.
Selanjutnya, arahkan gambar menyesuaikan dengan status kursor:
a#m1, a#m1:link, a#m1:visited, a#m1:active {
background: transparent url(url tempat gambar dititipkan) no-repeat left top;
display: block;
height: 70px; –>> setengah panjang gambar
width: 60px;} –>> lebar gambar
a#m1:hover {background-position: left bottom;}
a#m2, a#m2:link, a#m2:visited, a#m2:active {
background: transparent url(url tempat gambar dititipkan) no-repeat left top;
display: block;
height: 70px; –>> setengah panjang gambar
width: 60px;} –>> lebar gambar
a#m2:hover {background-position: left bottom;} –>> dan selanjutnya dibuat sesuai kebutuhan dan selera.
Bila menggunakan dua gambar atau lebih, tentunya aturan untuk link, visited, active, dan hover merujuk ke gambar tersendiri. Karena ini menggunakan satu gambar, hanya dibuat dua aturan saja, untuk default, link, visited, dan avtive menggunakan gambar bagian atas, sedangkan untuk hover menggunakan gambar bagian bawah.
Menempatkan icon
Langkah terakhir adalah menempatkan icon di tempat yang sedulur sukai. Pada contoh ini, saya menempatkan sebagai widget yang di-hook sebelum body container.
<div id=”icon-menu”>
<ul><li><a href=”http://contohlink-1.com/” id=”m1″ title=”Icon-Menu-1″></a></li>
<li><a href=”http://contohlink-2.com/” id=”m2″ title=”Icon-Menu-2″></a></li></ul>
</div>
Silahkan menambah sendiri m1, m2, m3, dan selanjutnya sesuai kebutuhan dan selera. Sedulur bisa juga menambah alt, title, target, dan lain sebagainya.
Mohon dikoreksi bilamana ada kekeliruan, mohon ditambah bilamana ada kekurangan!… 
- Tulisan dan icon berganti warna ini terinspirasi dari klip Derita Koepoe Biroe.
- Oprek-oprek ini dilakukan setelah sekian lama menyimak dengan seksama BELAJAR HTML. Worship dah!
- Gambar-gambar di tulisan ini semua disiapkan menggunakan GIMP bawaan Ubuntu 10.04 Lucid Lynx.
mangstap…
nahhh begini dong, ngga setengah-setengah
sedulur andri menampilkan tulisan… Cara mengetahui ukuran folder pada linux
keren kang… hehe..
sedulur bOm² KDB menampilkan tulisan… 31 hari ngeBlog?! 
pakde saiki dolanan css, cong!
Wajib di coba ini kang… matur suwun tutorialnya.. ^^
arek saingan karo pak marsu
Aku moco
sedulur marsudiyanto menampilkan tulisan… Bir Mantep Tjap Boeroeng Onta 
Pingback: Cara Membuat Icon Cantik Berganti Warna dan Bentuk | KECaKOT
Terus tak inguk2 rene…
worship dah!
wah, sak iki juga ahli css, sangar tenan
lho… gurune kan sampeyan? piye to ki???
worship master!
[...] This post was mentioned on Twitter by Andy MSE. Andy MSE said: berbagi yang lebih http://tinyurl.com/2des8jc (kerennn)… http://plurk.com/p/50iape [...]
ini diya, yang ditunggu-tunggu. tak replurk yach mas?
sedulur buitenzorg812 menampilkan tulisan… Seminar Pendidikan dan Gala Ngoprek 
hihihi…
Lha iki sing di tunggu-tunggu…
Tak coba disik kang…
Matur tengkiuwww…
sedulur Rock menampilkan tulisan… SERENITY
mangtafffff
nyoba ndisik ah
Tak pelajari n coba ya….. Makasih….
Melu nyimak….. Suhu CSS turun gunung…
Mantabs….!
sedulur Xitalho menampilkan tulisan… Hypocrisy Outbreak 
weh keren iki gan
sedulur oglek menampilkan tulisan… Hari Buruh dan Nasib Buruh Sektor Informal
tak save as disik artikel le kang… huehuehue
sedulur wongsableng menampilkan tulisan… Indonesia Furniture Handicraft Wholesale Marketplace 
mantap surantap kang, wah sy baru tau infonya buat ganti2 icon itu, kirain pake flash, ternyata pake pengkodean css…
“”thanks infonya,, =)
lngsung k TKP,, =)”"
sedulur LIVING menampilkan tulisan… Pekerja Termuda di Dunia (4) : Sutradara Termuda di Dunia
wah, ternyata gampang ya sob membuat icon cantik berganti warna… bisa langsung di praktekkan nich..
sedang seru-serunya mengikuti pelajaran dengan seksama…endingnya menampilkan link blog yang sudah berbulan-bulan tidak pernah dijenguk penulisnya (tersipu_mampus)
worship
dah!
sedulur Pojok Pradna menampilkan tulisan… 3 Kata 3 Cerita
nice tutorial….
blaik…komentarku langsung ke banned, gara2 diomongi ning kene
sedulur Pradna Cahbagus menampilkan tulisan… Bumi Cinta – Habiburrahman El Shirazy
Ayo – ayo gabung, buat blogger yang suka nyari dollar dari internet, ada kesempatan dialog langsung dengan “Scarface” Dudi Giriyana, Publisher dari Bandung yang sudah berpenghasilan puluhan juta rupiah dari google adsense dll
[...] Untung saja, diingatkan dengan sabar sama Blogger Nasional di postingan beliau yang menakjubkan ini [...]
ternyata diam2 sampeyan jago css to mas.. wah g boleh dianggep sepele kie.
lanjutkan mas
owalah… sedang belajar kok mas!
Wajib dicoba, meskipun belum begitu paham.
sedulur Bang Iwan menampilkan tulisan… GOOGLE TV, INOVASI BARU DUNIA MAYA
Makasih banyak,…
Salam hangat selalu.
sedulur Bang Iwan menampilkan tulisan… GOOGLE TV, INOVASI BARU DUNIA MAYA
yang jelas permainan CSS-nya beh…
betul begitu?
sedulur ciwir menampilkan tulisan… Kyai Muda Ekonomi Islam
ini bukan permainan mas! ini kenyataan… sumpah!!!
hihihii, komentar disebelah ternyata sudah ada jawabannya disini….langsung belajar lagi pak…yang bingung mbuat gambarnya….
sedulur iis sugianti menampilkan tulisan… Dua alasan kenapa koruptor harus dihukum mati!
bookmak…..
Wihiy… mantabs…
sekedar punya akun saja! biar gawul getoo loh!
sayangnya wordpress com tidak bisa diutak-utik css-nya… sepertinya harus dicoba untuk bikin yang bisa semuanya disisipkan di widget…
kalau blogspot bisa!!!
Nah lho, koq aku dibawa-bawa. Kalo aku kan cuma ternak blog saja. Kalo social network, paling cuma beberapa saja.
sedulur Estiko menampilkan tulisan… Klik kanan yang saya lakukan saat blog walking
bisa untuk belajar css nih.. sejak dulu nggak mudeng css
sedulur endar menampilkan tulisan… Ubuntu 10.04 LTS 
aku pake plugin ki pak
Berhubung saya blogger ber kategori tuwir maka mbacanya harus pelan2, ptakteknya juga tambah pelan2.
Terima kasih atas tipnya.
Salam hangat dari BlogCamp yang sedang menggelar acara Love Song in the Blog dengan tali asih menarik.
Nek panjenengan nggak ikut termasuk golongan orang2 yang merugi karena pasti nggak dapat buku.
Lha kalau ikut siapa tahu dapat, lak gitu tho mas.he he he
sedulur BlogCamp menampilkan tulisan… Termehek-mehek Sampai Terkapar
weeeee lha dalah…kok njlimet tenan.
Tak simak dulu ya mas, entar tak coba membuat deh.
Terima kasih atas tipnya yang ciamik
Salam hangat dari Plesiran, media untuk mempromosikan pariwisata daerah anda secara gratis. Pengirim artikel akan mendapatkan tali asih berupa buku yang menarik dan bermanfaat jika artikelnya di post di Plesiran.
Silahkan bergabung di Plesiran dan rasakan sensasinya.
sedulur Plesiran menampilkan tulisan… Pesona Buttu Kabobong
wahh, oprek-oprek CSS ni. ijin bookmark. Bljrnya ntar wae. Haha thx om
wah mas, pengen nih bisa buta icon yang bisa berganti warna. tapis ayang sku ga bgt menguasai CSS. gimana ya? apa tinggal copas cript diatas???
sedulur Bali luxury villas menampilkan tulisan… Villa Kalyani
wah bagus artikel Cara Membuat Icon Cantik Berganti Warna, trims ya,
sedulur suami istri menampilkan tulisan… apakah Musik Klasik membuat Anak Cerdas pintar?
wow.. keren
sedulur neng ucrit menampilkan tulisan… Koneksi Database Oracle dengan Codeigniter 
not too shabby, thanks