RSS2.0

Pilihan Menu dengan Icon

Senin, 01 September 2008

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

Baca yang Lainnya



9 komentar:

feri mengatakan...

Wow keren... :D jalan2 dulu ah ke www.iconarchive.com

jaloee mengatakan...

huhuhu.. keren tips-nya bro :)

Syahuri mengatakan...

jadi kepengen pasang juga di blog ku neh...

anasku tips blog mengatakan...

seep tutorialnya nihh,... semoga bermanfaat bagi saudara-saudara yang lain.. go blogger indonesia

italina89 mengatakan...

oke...dicoba..
tapi gak bs di wordpress ya..hiks..

leenga mengatakan...

WAHH BINGUNGI KOYOTAEK

Nikmaya John mengatakan...

Wah keren banget ni tipsnya,,, jadi goodlooking blognya...

Muhammad wali mengatakan...

ini yang selama ini saya cari cari, mantap banget ni blog, thanks ya boss

Vimax Original Pembesar Mr.P Herbal mengatakan...


artikelnya sangat membantu gan thanks for sharing
kunjungi web kami gan => www.vimaxkapsuloriginal.com

Posting Komentar

Setiap Kali anda berkomentar maka anda akan mendapatkan link balik dari saya...

Terima kasih atas KOMENTAR-nya

Terjemahkan