Menambahkan Bacground Pada Link

Oleh Ade Sanusi

10.30.2008

Bagikan :

Tweet

Salah satu untuk mempercantik Blog adalah melalui link yang di postingan kita, artikel sebelumnya membahas bagaimana membuat link menjadi besar/kecil saat kursor diarahkan. kali ini sedikit bermain-main dengan kode CSS untuk menambahkan background gambar pada Link.

Langkahnya Mudah kok, Login ke Blogger, dan menuju EditHTML.

Silahkan Cari Kode di bawah ini: /* masing-masing kode */

1. Kode a {

2. Kode a:hover {

3. Kode a:visited {

Berikut kode yang diperlukan untuk menambahkan background pada link. Caranya dengan menambahkan kode di bawah ini dan letakan kode di bawah kode a { , a:hover { dan a:visited {

1. Gambar /Background di samping Kiri Link

background: url(http://pic.photobucket.com/general/right-arrow-off.gif) no-repeat;
padding-left: 20px;

2. Gambar/background berada tepat pada link.
background: url(http://i261.photobucket.com/albums/ii65/adephotobucket/h1_bg.jpg) repeat-x; 

Berikut Contoh Hasilnya. kiri untuk langkah 1 dan kanan untuk langkah ke 2. Da akan ada background gambar pada link. sesuai langkah yang dilakukan.

Kode a { adalah saat link dalam keadaan normal. sedangkan kode a: hover { adalah kode saat kursor diarahkan pada link. sedangkan kode a:visited { adalah kode untuk link yang sudah di klik/dikunjungi, berikan gambar berbeda untuk masing masing kode tadi supaya tampilan lebih bagus. atur sesuai kebutuhan dan sesuaikan dengan link yang ada, misalnya .post a { maka animasinya hanya pada postingan saja, lainnya misalnya sidebar a { dan lainnya.

Selamat Mencoba.

Tag : HTML dan Java Script, Tips and Trik