Tips Menggunakan Image Pada Templates

Posting saya kali ini membahasa tentang tips dan trik menggunakan Image (gambar) pada templates. Di sini saya akan mengajarkan 3 cara menggunakan gambar pada templates. Cara ini saya dapatkan dari blog code-code-an. Dan cara ini di gunakan apabila anda menggunakan gambar untuk header anda. Oke langsung saja.

Tips 1
Tips pertama ini yang paling familiar dan sering di gunakan, yaitu langsung memasangnya pada HTML.

<h1><a href="#"><img width="300" height="75" alt="Judul Blog Anda" src="logo.jpg" /></a></h1>

Apabila anda menggunakan cara ini, penggunaan Alt sangatlah penting. Mengapa? karena Alt akan menjadi pengganti gambar bila gambar disable.  Dengan menggunakan cara ini anda tidak dapat menggunaka efek :hover pada gambar karena tidak menggunakan CSS

Tips 2
Cara ke dua ini menggunakan CSS dan mengganti text dengan gambar. Dengan cara ini anda juga bisa menggunakan efek :hover  pada image. Kode yang di gunakan seperti berikut.

KODE HTML

<h1 id="logo"><a href="#"><span></span>Judul Blog</a></h1>

CSS

/* repeated code per header */
#logo, #logo span {
 width: 300px; height: 75px;
 }
#logo a, #logo a span {
 background-image: url(gambar.jpg);
 background-repeat: no-repeat;
}
#logo a:hover, #logo a:hover span {
 background-image: url(gambar2.jpg);
}

 /* This is what moves the text under the span */
#logo a span { margin-bottom: -75px; }
/* code for all styled headers */
h1 a span {
 display: block;
 /* place the span on top */
 position: relative;
 z-index: 1;
}

Dengan cara ini anda telah menyembunyikan text dan menggantinya dengan gambar. Tapi jika gambar di disable maka text akan muncul kembali menggantikan gambar. Kode utama dari trik ini adalah penggunaan span. Cara ini juga sepertinya lebih baik dari pada harus menyembunyikan text dengan text-indent karena jika gambar disable text tidak akan muncul.

Tips 3
Jika cara pertama menggunakan gambar pada HTML dan yang kedua menggunakan gambar pada CSS, maka tips 3 ini menggunakan gambar pada CSS dan HTML sekaligus. Kode yang di gunakan

KODE HTML

<h1><a class="chirp" href="#"><img alt="Judul Blog Anda" src="logo_chirp_small.png"/></a></h1>

CSS

a.chirp  {
background:url("gambar 1") no-repeat left top;
display:block;
height:249px;
width:324px;
}
a:hover.chirp  {
background:url("gambar 2") no-repeat left bottom;
}
a.chirp img {
height:0;
}

Pada kode HTML dan CSS menggunakan gambar dan pada CSS di tambah juga efek :hover untuk gambar dan pada HTML menggunakan Alt sebagai keterangan gambar.

a.chirp img {
height:0;
}

Penggunaan kode height di atas bertujuan menyembunyikan gambar pada HTML dan gambar CSS lah yang akan muncul. Dan penggunaan Alt bertujuan apabila gambar pada CSS disable maka keterengan gambar lah yang akan muncul.

Terakhir
Keterangan :

• disable berarti mati/di nonaktifkan
• kode CSS letakan di atas ]]></b:skin>
• Kode HTML gabungkan ke dalam kode h1 header anda
• Untuk DEMO 

Saya rasa cukup untuk posting kali ini. Semoga bermanfaat. terima kasih untuk choen