Tips dan Trik Blogger

Menambahkan Bacground Pada Link

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.

14 Komentar untuk "Menambahkan Bacground Pada Link"

pertamaxx :)...btw bagus juga nih...nice info :)

iya mas ade.. seep bagus lagi kalau icon/backgroundnya.. yang sesuai dengan icon link.. makin hidup deh pokoknya blognya

Wew, ide yang kreatif nih... Mantabz euy..

iye sip ..tapi bagusnya jgn yg general link.. sukses yach

kalo pasang gambarnya di menu top tab gimna mas? sama aza gak???

Jalan jalan ah, sambil ngetes blog baru hehehehe

bagus mas infonya , ntar saya praktekin deh....thx

@Istifajar: Selamat Mencoba Ja Mas

@googleholic: OK deh thx

@Anasku: Boleh Juga tuh Idenya! Mungkin kalau itu Mesti Manual kayaknya

@mymoen: Sama-Sama mas saya Lagi belajar Menjadi kreatif he he.

@Jaloe: Ia Mas Jaloe Kalao Global Link Nanti Semuanya Ada backgrunnya lagi dan Berantakan ha ha ha.

@Zeze: Tobtab apa yah :D kayaknya sama aja deh...

@Welly: Thax

@Indra Meissa: Silahkan Cari-Cari Aja :d

@Umar Khaliyf Muhammad: Silahkan di Coba ja.. Semoga Berhasil.

Keep posting tutorialnya mas ade

wah ilmu blogspot bisa nambah nih , sayang nggak pakai blogspot he..he..he

@BambangOke: Thanks Yaw...

@Reza: Bisa Kok Di Pakek di Semua Blog atau Web Asalkan Ada kode seperti di atas aja mas...

Bagus nih...
Ntar gue coba deh, hehehehe...
Thx ya mas buat info'x...

Terima Kasih telah Mengunjungi Blog ini dan Silahkan tinggalkan Komentar Anda...

Back To Top