Cara Menambah Gambar Ikon Pada Link Navigasi

Cara Menambah Gambar Ikon Pada Link Navigasi

Mempunyai gambar ikon yang berkaitan dengan link navigasi pada blog anda merupakan cara yang baik untuk mendapatkan perhatian dari pengunjung blog anda. Dengan cara menambah gambar ikon pada link navigasi dari sebuah situs yang modern tidak akan hanya terlihat bagus, tapi juga menjadi salah satu cara yang berguna untuk pengunjung ketika membaca artikel di blog anda.

Pada artikel kali ini saya akan coba menjelaskan cara menambah gambar ikon pada link navigasi blog anda.

Ada 3 langkah utama agar gambar ikon muncul disamping link navigasi blog anda:

1. Cari gambar ikon (dalam format GIF) yang cocok dengan template blog anda, dan meng upload pada hosting gambar yang biasa anda pakai.

2. Menambah kode untuk link ke Widget HMTL/Javascript pada layout blog.
3. Menambah CSS style pada link dengan gambar background yaitu dengan cara menambah kode pada bagian dari template blog anda.

Sebenarnya cara ini tidak sesulit yang anda kira kok...

Setelah anda mencoba untuk mempraktekkan cara ini, anda akan lebih mengerti cara bekerjanya. Untuk memulai, coba aplikasikan kode dan contoh gambar di bawah. Nanti dapat anda ganti sesuai dengan keinginan anda.

Cara menambah gambar ikon disamping link navigasi anda (Contoh Gambar Ikon dan Kode)

Mari kita coba dengan memasukan link navigasi: Home, About dan Contact.

Hasil akhirnya akan tampak seperti dibawah ini:

Langkah 1: Tambahkan Kode untuk Link anda pada widget HTML/Javascript (Add a Gadget)
Pada halaman layout (Blogger Dashboard>Page Elements), pilih untuk HTML/Javascript. Tempatkan pada widget diatas posting atau pada bagian header.

<div id="menu-items">
<ul>
<li><span class="home"><a href="http://alamat_blog_anda.com">Home</a></span></li>
<li><span class="about"><a href="http://alamat_blog_anda.com">About</a></span></li>
<li><span class="contact">;<a href="http://alamat_blog_anda.com">Contact</a></span></li></li>
</ul>
</div>

Pada awalnya mungkin link navigasi ini masih terlihat seperti biasa saja. Nah sekarang kita masukkan kode CSS style pada template.

Design > Edit HTML

Langkah 2: Copy paste kode dibawah ini sebelum tag closing <b:skin>

#menu-items ul li { display: inline; font-weight: bold; list-style-type: none; padding: 5px 5px 5px 0; margin: 0; }
#menu-items li span.home { background: url('http://alamat-gambar-ikon-anda') no-repeat; padding: 0 0 0 20px; }
#menu-items li span.about { background: url('http://alamat-gambar-ikon-anda') no-repeat; padding: 0 0 0 20px; }
#menu-items li span.contact { background: url('http://alamat-gambar-ikon-anda') no-repeat; padding: 0 0 0 20px; }

Yang perlu diperhatikan disini adalah mengganti yang dicetak tebal dengan alamat url gambar ikon anda. Nanti kalau ada tambahan tips lainnya akan saya update lagi.

Silahkan coba dan praktekkan cara menambah gambar ikon pada link navigasi blog anda yah