Advertisement

Responsive Advertisement

Pilihan Menu dengan Icon


Wuih.. blognya keren mana dihiasi dengan menu bergambar lagi.. wah pengen nih.. tapi gimana cara buatnya.. ya??
Sering kita lihat kalo pemilihan menu yang ada pada header yang terdapat pada blog biasanya hanya tulisan dan warna-warna bila disetuh.. tapi kadang kala kita pengen dengan suasana laen misalnya, dengan gambar-gambar yang uniks.. seperti yang terlihat pada gambar dibwah ini :


Nah langkah membuatnya mudah kok' ga' susah amat dan ga' ribet..
Gini caranya:

Langkah Pertama :
1. Masuk ke akun google kmu.
2. Pilih menu Layout --> Edit html.
3. Masukkan kode ini :




#newnavbar ul li{
list-style-type: none;
display:inline;
margin:0px;
padding:30px;
border:0px solid;
}

4. Masukkan kode tersebut Dibawah /* Header */ letaknya dibagian tengah Template.
5. Save.

Langkah Kedua :
1. Pilih Page Element dan kli Add Pege Element.
2. Pilih Html/Javascript.

3. Masukkan kode dibwah ini kedalam konten box..



<div id='newnavbar'>
<ul>
<li><a href="URL "><img src="URL Image"></a></li>
<li><a href="URL "><img src="URL Image"></a></li>
<li><a href="URL "><img src="URL Image"></a></li>
<li><a href="URL "><img src="URL Image"></a></li>
<li><a href="URL "><img src="URL Image"></a></li>
</ul></div>

4. Save Dan lihat hasilnya.

Untuk Peletakkan terserah anda mau meletakkan dimana saja... Klo mo Meletakkannya pada header tapi ga' ada add page elementnya nah lihat Add Page element pada Header
Dan URL diisi dengan alamat blog anda/Home Page anda
URL image diisi dengan lokasi ICON /image anda..
Gambar/icon dapat diambil pada ICONARCHIVE
Cara Pengambilan Lokasi Icon:

1. Masuk ke icon archive
2. Pilih Icon yang kmu suka.. dan klik kanan pada download as ico.file. Pilih Copy Image Location
3. Pastekan URL tersebut ke URL image yang ada pada kode tadi..
4. Selesai..