earth

Guestbook

/* Iklan google ads */
Pada tulisan sebelumnya, mengenai cara membuat CSS Sprite, saya menjelaskan bagaimana CSS Sprite mampu mempersingkat waktu pemanggilan gambar dari image hosting sehingga membuat loading page menjadi sedikit lebih ringan (cepat) dibanding biasanya.

Namun tulisan tersebut hanya memuat seputar pembuatan CSS saja, tidak mengupas bagaimana membuat CSS Sprite untuk gambar-gambar yang diletakkan pada HTML dan digunakan sebagai link, seperti untuk readmore, blog pager, social bookmark, sticky social, dll.

Untuk membuat CSS Sprite pada gambar-gambar yang dijadikan link tersebut harus dibuat dua buah gambar: Satu gambar berupa gabungan beberapa gambar untuk CSS Sprite, dan satu lagi berupa gambar transparan (dengan format png) untuk link.

Sebagai contoh, misalkan menggabungkan gambar social icon dengan ukuran 36 x 36 dan membuat gambar transparan berukuran 32 x 32, seperti gambar berikut:
Maka untuk CSS gambar tersebut (yang diletakkan di atas ]]></b:skin>) dibuat seperti ini:
img.icon1 { background:url(URL Gambar Sprite) 0 0; width:36px; height:36px; }

img.icon2 { background:url(URL Gambar Sprite) -36px 0; width:36px; height:36px; }

img.icon3 { background:url(URL Gambar Sprite) -72px 0; width:36px; height:36px; }

img.icon4 { background:url(URL Gambar Sprite) -108x 0; width:36px; height:36px; }

img.icon5 { background:url(URL Gambar Sprite) -144px 0; width:36px; height:36px; }
Catatan:
Bisa juga nama icon1, icon2, icon3, dst., diganti dengan facebook, twitter, google, dll.

Kemudian pada link icon-icon tersebut dibuat seperti ini:
<a href="Link Facebook"><img class="icon1" src="URL Gambar Transparan" /></a>

<a href="Link Twitter"><img class="icon2" src="URL Gambar Transparan" /></a>

<a href="Link Google"><img class="icon3" src="URL Gambar Transparan" /></a>

<a href="Link Friendster"><img class="icon4" src="URL Gambar Transparan" /></a>

<a href="Link hi5"><img class="icon5" src="URL Gambar Transparan" /></a>

Dengan membuat CSS Sprite seperti ini maka gambar icon-icon tersebut tidak dipanggil 5 kali melainkan hanya 2 kali, 1 kali ke gambar sprite dan 1 lagi ke gambar transparan.

Ok, segitu aja sob. Semoga bermanfaat .....
  • Artikel Terkait Dengan CSS dan Javascript

    Terimakasih sudah membaca artikel SC Community's Blog

    1 komentar

    wahh, info baru nih ,.,

    thanks buat infonya kang ,,

    30 September 2012 pukul 08.42  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler