Cara Menambah Gambar Ikon di Navigasi Menu Blog

Baca Juga

Cara Menambah Gambar Ikon di Samping Daftar Navigasi Menu Blog

BANYAK template blog menggunakan ikon, simbol, atau gambar kecil di samping navigasi menu. Misalnya, menu HOME dilengkapi ikon rumah dan menu KONTAK disertai ikon gambar telepon atau email.

Dengan begitu tampilan blog tampak terkesan lebih profesional. Namun, jadinya "rame" dan mengurangi "clean" dan ke-simple-an blog. CB sendiri tidak memasangnya dengan alasan itu plus bisa mengurangi loading blog.

Bagi Anda yang ingin menambahkan gambar di samping daftar Menu blog, berikut ini caranya. Anda juga bisa langsung ke sumber tips ini.

Kita ambil contoh tiga menu atau halaman statis (static page): Home, About, dan Kontak. Kode link menunya umumnya seperti ini:

<div id="menu-items">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/p/about.html">About</a></li>
<li><a href="/p/kontak">Kontak</a></li></li>
</ul>
</div>

1. Tambahkan kode <span class> sehingga menjadi begini:

<div id="menu-items">
<ul>
<li><span class="home"><a href="/">Home</a></span></li>
<li><span class="about"><a href="/p/about.html">About</a></span></li>
<li><span class="contact">;<a href="/p/kontak">Kontak</a></span></li></li>
</ul>
</div>

2. Saatnya membuat link URL gambar ikon.

* Pilih gambar ikon yang dikehendaki, ukurannya disesuaikan dengan lebar dan tinggi area navigasi menu, sekitar 30x30 Pixel.

* Upload gambarnya ke Picasaweb Album di akun Blogger Anda

* Copas url link gambarnya dan simpan di kode-kode seperti ini:

#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('link gambar ikon di sini') no-repeat; padding: 0 0 0 20px; }
#menu-items li span.about { background: url('link gambar ikon di sini') no-repeat; padding: 0 0 0 20px; }
#menu-items li span.contact { background: url('link gambar ikon di sini') no-repeat; padding: 0 0 0 20px; }

* Setelah link gambarnya terisi, Copas semua kode di atas dan tempatkan di atas kode ]]</b:skin>

3. Save template!

Kini, mestinya, menu blog Anda sudah disertai gambar ikon atau symbol. Kalo ternyata hanya bikin "rame" dan mengurangi "kebersihan" tampilan blog, gak usah dipasang, apalagi jika mengurangi keceparan loading. (http://contohblognih.blogspot.com).*