NamaIconHeader MENU HEADER WITH CSS

variasi header kadar perlu
mau ga yang seperti ini...??
simple dropdown menu dengan CSS
baca cara petunjuknya disini...

script ini jujur aku ambil adi sobat blogger seniorku kang amatulah 83
Langsung pada tutorial


1. Setelah sig in pada account blogger sobat>>> pada dasbor
>>> Klik Tata Letak
>>> Edit HTML

2. Tambahkan kode CSS berikut diatas tag


]]></b:skin>:


inget yang paste atau taruh diatas kode ]]></b:skin>:
#pad {height:100px;}
#menuPositioner {width:100%; position:relative; float:left; top:-40px; margin-bottom:-40px; }

#menuHolder {position:relative; float:left; left:50%;}

#menu,
#menu ul {padding:0; margin:0; list-style:none; font: 12px arial, verdana, sans-serif; background:url(http://sites.google.com/site/amatullah83/background/trans.gif); position:relative; z-index:100;}
#menu {height:40px; float:left; padding:0; background:#4b4d3f; position:relative; right:50%;}
#menu ul {position:absolute; left:-9999px; top:-9999px;}

#menu table {border-collapse:collapse; margin:-1px; padding:0; width:0; height:0;}
#menu li {float:left;}

#menu li a {display:block; float:left; color:#fff; height:40px; padding:0 20px 0 0; line-height:38px; text-decoration:none; background:url(http://sites.google.com/site/amatullah83/background/button1a.gif) no-repeat right top;}
#menu li a.sub {background:url(http://sites.google.com/site/amatullah83/background/button3a.gif) no-repeat right top;}
#menu li a b {display:block; float:left; height:40px; background:url(http://sites.google.com/site/amatullah83/background/button1.gif) left top; padding:0 0 0 20px; cursor:pointer;}

#menu li:hover {position:relative; z-index:100;}
#menu a:hover {position:relative; z-index:100; color:#fc0;}
#menu a.sub:hover {background:url(http://sites.google.com/site/amatullah83/background/button3a.gif) no-repeat right top;}

#menu li:hover > a {color:#fc0;}
#menu li:hover > a.sub {background:url(http://sites.google.com/site/amatullah83/background/button3.gif) no-repeat right top;}

#menu :hover ul {left:0; top:40px; z-index:300; width:130px; padding-top:4px; background:url(http://sites.google.com/site/amatullah83/background/trans.gif);}
#menu :hover ul li a {height:25px; width:120px; padding:0 0 0 10px; line-height:25px; background:#546775; color:#fff; border-bottom:1px solid #a3b6c4; font-size:11px;}
#menu :hover ul li a.fly {background:#546775 url(http://sites.google.com/site/amatullah83/background/fly.gif) no-repeat right center;}

#menu :hover ul li a:hover {color:#fc0;}
#menu :hover ul li a:hover.fly {background:#546775 url(http://sites.google.com/site/amatullah83/background/fly-over.gif) no-repeat right center;}
#menu :hover ul li:hover > a {color:#fc0;}
#menu :hover ul li:hover > a.fly {background:#546775 url(http://sites.google.com/site/amatullah83/background/fly-over.gif) no-repeat right center;}

#menu :hover ul ul {position:absolute; left:-9999px; top:-9999px;}

#menu :hover ul :hover ul {left:117px; top:0; padding:0;}
#menu :hover ul :hover ul li a {background:#a3b6c4; color:#000; border-bottom:1px solid #546775; font-size:11px;}
#menu :hover ul :hover ul li a:hover {color:#fff;}


next cari kode ini <div id='header-wrapper'>
atau bisa jadikan kode dibawah ini sebagai widget di add gadget,java script dan paste kode dibawah ini kedalam gadget tersebut.
andai tetep gagal cobalah paste kode dibawah ini diatas <div id='header-wrapper'>

berikut kode yang harus anda copy

<div id="menuPositioner">
<div id="menuHolder">
<ul id="menu">
<li><a href="index.html"><b>Home</b></a></li>
<li><a href="single.html"><b>Single Level</b></a></li>
<li class="current"><a class="sub" href="dropdown.html"><b>Dropdown</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub1">
<li><a class="fly" href="#url">Dropdown one<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="fly1">
<li><a href="#url">Dropdown 1.1</a></li>
<li><a href="#url">Dropdown 1.2</a></li>
<li><a href="#url">Dropdown 1.3</a></li>
<li><a href="#url">Dropdown 1.4</a></li>
<li><a href="#url">Dropdown 1.5</a></li>
<li><a href="#url">Dropdown 1.6</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="currentsub"><a class="fly" href="#url">Dropdown two<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="fly2">
<li><a href="#url">Dropdown 2.1</a></li>
<li><a href="#url">Dropdown 2.2</a></li>
<li class="currentfly"><a href="#url">Dropdown 2.3</a></li>
<li><a href="#url">Dropdown 2.4</a></li>
<li><a href="#url">Dropdown 2.5</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#url">Dropdown three</a></li>
<li><a href="#url">Dropdown four</a></li>
<li><a class="fly" href="#url">Dropdown five<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="fly3">
<li><a href="#url">Dropdown 5.1</a></li>
<li><a href="#url">Dropdown 2.2</a></li>
<li><a href=http://amatullah83.blogspot.com>Dropdown 3.3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="sub" href="dropline.html"><b>Dropline</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub2">
<li><a href=http://amatullah83.blogspot.com>Dropline one</a></li>
<li><a href="#url">Dropline two</a></li>
<li><a href="#url">Dropline three</a></li>
<li><a href="#url">Dropline four</a></li>
<li><a href="#url">Dropline five</a></li>
<li><a href="#url">Dropline six</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="sub" href="flyout.html"><b>Flyout</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub3">
<li><a href="#url">Flyout one</a></li>
<li><a href="#url">Flyout two</a></li>
<li><a href="#url">Flyout three</a></li>
<li><a href="#url">Flyout four</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="support"><a href="support.html"><b>Support</b></a></li>
<li id="contact"><a href="contact.html"><b>Contact</b></a></li>
</ul>
</div>
</div>

terakhir simpan template

tapi dengan catatan yah...
sebelum nyoba ngedit template anda
terlebih dahulu backup template anda takut terjadi eror aja...xixixixixi



Baca Yang ini Juga Ya... :



6 comments:

Anonymous May 1, 2010 at 1:14 AM  

Untuk menambah pengetahuan ttg CSS penting tuk dibaca dan terus dipelajari. thanks infonya.

komunitas oejoeng May 1, 2010 at 1:24 AM  

Tips oke sob, bljr CSS susah banget, pernah aku oprek blog, eh..pada ancur. happy weekend gan...thanks your post tuk kusimpan.

Rinda May 2, 2010 at 10:38 PM  

waw bagus banget menunya,,,^0^

Sujud Dermawan December 3, 2010 at 1:47 AM  

kk kok ini aq gak bsa jalan, kenapa ya!!....http://serba-uniks.blogspot.com/. tlong kk ini knp sbabnya pdahal printah kode cssnya udah di masukin smua!!... ap ad yg salah ??

putunewarok March 29, 2011 at 8:51 PM  

hehe... cantik an mana sama yang komentar di page aku tadi.... mkasih atas kunjungannya

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