NamaIconHeader CSS MENU HEADER

kali ini aku borongan aja ah...
bikin menu header with css
laku ga laku biarin aja , lumayan buat arsip sendiri..xixixixi
kali ini mainya javascript dan css
langsung aja ke TKP




pertama cari kode </head>
kemudian paste kode berikut ini sebelum / diatas kode </head>

<style type='text/css'>
#catmenucontainer{
height:29px;
background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/Swul0XJNShI/AAAAAAAAAT8/0MPzqd2ineY/catmenu.jpg) repeat-x;
display:block;
padding:0px 0 0px 0px;
font: 14px &quot;Century gothic&quot;,verdana, Arial, sans-serif;
font-weight:normal;
border-top:1px solid #686D6F;
}


#catmenu ,#catmenu ul {
margin: 0px 5px;
padding: 0px;
list-style: none;
height:29px;
}


#catmenu a {
color: #999;
display: block;
font-weight: normal;
padding: 4px 10px 6px 10px;
}


#catmenu a:hover {
background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/Swul3Dap3uI/AAAAAAAAAUE/DvKs0kZKwCA/catmenuhov.jpg) repeat-x;
color: #fff;
display: block;
text-decoration: none;
}


#catmenu li {
float: left;
margin: 0px;
padding: 0px;
}


#catmenu li li {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 130px;
}


#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/Swul0XJNShI/AAAAAAAAAT8/0MPzqd2ineY/catmenu.jpg) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#E8EBEE;
border-bottom:1px solid #2C3133;
}


#catmenu li li a:hover, #catmenu li li a:active {
background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/Swul3Dap3uI/AAAAAAAAAUE/DvKs0kZKwCA/catmenuhov.jpg) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;
border-bottom:1px solid #2C3133;
}


#catmenu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}


#catmenu li:hover ul {
left: auto;
display: block;
}


#catmenu li:hover ul, #catmenu li.sfhover ul {
left: auto;
}
</style>


step kedua masuk add gadget
masukan kode berikut ini
<div id='catmenucontainer'>

<div id='catmenu'>

<ul>

<li><a href='#' title='#'>Home</a></li>

<li><a href='#' title='#'>Web Design</a>
<ul class='children'>
<li><a href='#' title='#'>HTML</a></li>
<li><a href='#' title='#'>CSS</a></li>
<li><a href='#' title='#'>JavaScript</a></li>
</ul>
</li>

<li><a href='#' title='#'>Templates</a>
<ul class='children'>
<li><a href='#' title='#'>1 Column</a></li>
<li><a href='#' title='#'>2 Column</a></li>
<li><a href='#' title='#'>3 Column</a></li>
<li><a href='#' title='#'>4 Column</a></li>
</ul>
</li>

<li><a href='#' title='#'>Subscribe</a>
<ul class='children'>
<li><a href='#' title='#'>Email</a></li>
</ul>
</li>

<li><a href='#' title='#'>News</a></li>

<li><a href='#' title='#'>Google</a>
<ul class='children'>
<li><a href='#' title='#'>Yahoo</a></li>
<li><a href='#' title='#'>MSN</a></li>
</ul>
</li>

<li><a href='#' title='#'>About</a></li>

<li><a href='#' title='#'>Contact</a></li>

<li><a href='#' title='#'>PrivacyPolicy</a></li>

</ul>

</div>

</div>

untuk editing link cukup anda ganti kode yang berwarna merah
untuk judul tampilan cukup anda ganti kode yang berwarna biru

kemudian pratinjau / preview dulu
tapi dengan catatan yah...
sebelum nyoba ngedit template anda
terlebih dahulu backup template anda takut terjadi eror aja...xixixixixi
step terakhir simpan hasil kerja anda.


Baca Yang ini Juga Ya... :



15 comments:

zonda May 6, 2010 at 4:17 AM  

agak bingung mas/mbak tapi terima kasih telah sharing ilmunya...

hehehehe

Seri Bahasa May 8, 2010 at 2:57 AM  

lari dari hujan ingin berteduh sebentar disini.

kalau soal kode template kadang seri bingung juga.

Bayu Lebond May 10, 2010 at 1:39 PM  

makin cantik aja blog ini dengan balutan busana batiknya yg nasionalis

TUKANG COLONG May 10, 2010 at 7:37 PM  

buru-buru banget kawan. mau kemana?

Najibblog2010 May 14, 2010 at 1:28 AM  

Wah bagus nih sob......

Salam kenal.........n sukses selalu....

Oh ya anda sudah saya folow...follow balik ya??hehe......

Johnson Manurung June 19, 2010 at 8:01 PM  

lanjutkan terus sahabatku, sangat bermanfaat dan banyak membantu. Salam

angel_boy December 18, 2010 at 10:19 AM  

bagus gan...thank buat share ilmune ya????

N'ergy juice bar April 6, 2011 at 8:56 AM  

setelah sekian lama googling akhirnya ketemu juga yang paling bener

TERIMAKASIH ATAS SHARENYA :D

Moh Saifullah March 25, 2012 at 6:41 AM  

terimakasih gan ilmunya, bermanfaat bnget, salam sukses selalu.

Dani April 22, 2012 at 7:09 PM  

mantap tambah cantik

Fuadditiya Imaspadi Muharam September 17, 2012 at 9:13 PM  

Trimakasih gan infony..

sangat bermanfaat bagi perkembangan blog saya.. :)

Blog Fuadditiya | The FIM Site

Khabaran Unik November 18, 2012 at 10:53 PM  

Thanks ya Mas Info Tutor nya..., I Like...!

Sekalian mau laporin kalau Follow ke : 469 Succes...!

Follback ya Mas...!

Media Cyber November 18, 2012 at 10:54 PM  

Mantap lah Gan Info nya sangat membantu memang...! dan Menu nya bagus bangat...!

Blog Dofollow November 18, 2012 at 10:55 PM  

Terima kasih brade utor nya..., sudah saya pasang..., coba liat ya...!

Post a Comment

BUKU TAMU DAN ATRIBUT BLOG

Please Comment
Posting Populer
[..::::A::::..]
  • about Healty
  • ALL ABOUT LOVE
  • Aktivitas Sandal Jepit
  • Amru Site
  • AnjingGoblog
  • Attayaya Dot Net
  • Andalas Van Java
  • Aneh81
  • Aneh,Unik,Lucu
  • All In "tUmbuH"
  • Archv3nture
  • Anita Atax
  • Anak kolonX
  • Acatrazz Blogspot
  • Aldien Blog
  • Athene Blog
  • Andy Wong ECAkNYO
  • Aanworld Bloger Pemalang
  • Ayu Adine
  • About Finance
  • [..::::B::::..]
  • BAYU LEBOND
  • Bebens007
  • Bayu Saputra
  • Blog Kang Rohman
  • Blog Putra Jepang
  • Blogger Directories
  • Belajar Bisnis Internet
  • BIBIR SAKTI MASBEKEN
  • BLOGING VIA HP
  • Blog persahabatan
  • Bull^Bull & Coretannya
  • Blogging-Surfer
  • Blogging Bucks
  • BUNGLONBLOG
  • BOOK ONLINE
  • [..::::C::::..]
  • Coretan Si8ball Pekox's
  • Choe Link 2009
  • Celebes City
  • Computer Tips Tricks
  • Catatan Putra
  • [..::::D::::..]
  • Dunia Komputer
  • Dodi Odhievara Blog
  • DEDICATED COMPUTER SERVER
  • Dian Ambar Wasesha
  • Dhana Arsega
  • DARA WEBSITE
  • DEVIL COMPUTER
  • [..::::E::::..]
  • EFMED 2001
  • Elyas Anak Merana
  • EXOTICA
  • [..::::F::::..]
  • Fatur RumaH Curhat
  • FIGHT FOR WOMEN HEALTH
  • Forum Komunitas
  • Full Software Collextions
  • Fajar Pekox's
  • [..::::G::::..]
  • Gak Mutu Blog
  • Gustihana Blog
  • Ginanjar Kluwut
  • [..::::H::::..]
  • Harry Nuriman
  • Huyuh Blog
  • [..::::I::::..]
  • Indonesia Ku
  • Indo15 Blog
  • Ijo Punk Jutee
  • [..::::J::::..]
  • Jasa Pembuatan Blog
  • [..::::K::::..]
  • Keboo Kyut BC
  • KLUWAN dot COM
  • KLUWAN LOVE IS BEAUTY
  • KLUWAN backtrack
  • Kang Asep Blog
  • kakve-santi (Pr. 4)
  • Kartika Putri Pratama
  • KokoBotax
  • KelireirenG
  • KompiKita
  • K-Bejo
  • Komunitas Oedjoeng
  • [..::::L::::..]
  • Lia Amalia
  • [..::::M::::..]
  • Monika Hansen
  • Manfaat Bersama
  • Malindo fm
  • Mhz Maheswari Vania Yoga
  • [..::::N::::..]
  • Nurina Utami
  • Natha Lia Blog
  • Ngeposting ni yee
  • [..::::O::::..]
  • Oklubi Dot Com/
  • Oyah Saloon
  • Okygaul85
  • [..::::P::::..]
  • PakiesDjangan
  • Phonank bukan Ohang
  • Poter Punya
  • Paradise
  • Poeds On Girimukti
  • priagoenks.co.cc/
  • Psikonseling Evi Yulianti
  • Putra Blog
  • [..::::Q::::..]
  • ...
  • [..::::R::::..]
  • RUANGSC COMUNITY
  • RAHMAT TEA
  • RAKSAKA NALA
  • Rock Klasik tetep Asyik
  • rahad2six
  • Rizky2009
  • Rahmei Yuda
  • Rachmatea
  • Rizal Blog
  • Rival Aditya
  • Ririn Keyliana Blog
  • Ruang Hati
  • [..::::S::::..]
  • SATRIYO HP
  • SANG KHALIFAH
  • SOUND BLASTER
  • Saung Urip
  • Sulthan Yususf
  • Samsulmuna
  • Surakarta Entrepreneur
  • shirieen
  • Seputar Dunia Anak
  • SehatZBlog
  • Sugeng Pribadi DOT COM
  • Satrianews Dot Net
  • Satriacell Dot Com
  • Sebuah Berita
  • SOMBLERO
  • [..::::T::::..]
  • Toko Tas OnlinE
  • Tovarossi
  • Terminal LPG Semarang
  • Tourism of Indonesian
  • The JaeV
  • TIPS KELUARGA
  • Taekwondo Indonesia
  • Tech Info
  • Tubir Bloger
  • [..::::U::::..]
  • ....
  • [..::::V::::..]
  • vanmovic'S blog
  • VIPERX
  • Vienka Dot Com
  • [..::::W::::..]
  • Worldsenterprise
  • Witul4r BC
  • [..::::X::::..]
  • .....
  • [..::::Y::::..]
  • Yoga Kucing
  • Yahya Blog
  • [..::::Z::::..]
  • .....
  •   © Blogger template Webnolia by Ourblogtemplates.com 2009

    Back to TOP