Home » » Cara Menambah Gambar Ikon di Navigasi Menu Blog

Cara Menambah Gambar Ikon di Navigasi Menu Blog

Gambar Ikon di Navigasi Menu Blog
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).*

Thanks for reading & sharing Cara Menambah Gambar Ikon di Navigasi Menu Blog

Previous
« Prev Post

2 comments:

Comment Page:
  1. Gampang bener ya caranya. Kirain harus pake kode-kode tertentu lagi. Harus dicoba. Bego banget kalo gak pernah mau belajar hal baru.

    ReplyDelete
  2. kayaknya ini berlaku buat blog doang mas soalnya saya pake di website ga bisa

    ReplyDelete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox