June 5, 2015

Cara Menambah Gambar Ikon di Navigasi Menu Blog

June 5, 2015

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).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

5 comments on Cara Menambah Gambar Ikon di Navigasi Menu Blog

  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
  3. saya coba di cms wordpress kok gak bisa yah mas. Apakah besar icon juga berpengaruh?

    ReplyDelete
  4. Bisa aja dipasang tapi saya itu ingat bahwa kalau ngaruh ke loading blog saya pikirkan dulu blog masih sepi tapi tampilannya rame?? Tapi buat Agan yang mau coba silahkan saja. Salam...

    ReplyDelete

Contact Form

Name

Email *

Message *