NamaIconHeader Membuat Menu Header Unik

pernah lihat menu seperti dibawah ini..??

ada banyak template baru yang siap pakai..dan sudah menyediakan menu slide yang atraktif dan unik.
tapi alangkah baiknya tahu dasar pembuatanya..:D


langkah sederhananya seperti berikut :
1. Login pada Blogger.
2. Klik pada Layout pada Dashboard.
3. Pada Layout klik Edit HTML .
4. Temukan kode </b:skin>
5. copy kode dibawah ini

.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
dan paste tepat diatas kode </b:skin>

6. selanjutnya cari kode </head>
<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/Dropdownmenuwithjquery.js' type='text/javascript'/>
copy kode diatas dan paste tepat diatas kode </head>

7. cari kode
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Testing templates (Header)' type='Header'/>
</b:section>
</div>
setelah ketemu kemudian anda copy script dibawah ini
<div class='jqueryslidemenu' id='myslidemenu'>
<ul>
<li><a href='http://joxerz.blogspot.com/'>Home</a></li>
<li><a href='#'>Daftar Isi</a></li>
<li><a href='#'>Tutorial</a>
<ul>
<li><a href='#'>Sub Item 1.1</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
<li><a href='#'>Sub Item 1.4</a></li>
</ul>
</li>
<li><a href='#'>Download</a></li>
<li><a href='#'>Folder 2</a>
<ul>
<li><a href='#'>Sub Item 2.1</a></li>
<li><a href='#'>Folder 2.1</a>
<ul>
<li><a href='#'>Sub Item 2.1.1</a></li>
<li><a href='#'>Sub Item 2.1.2</a></li>
<li><a href='#'>Folder 3.1.1</a>
<ul>
<li><a href='#'>Sub Item 3.1.1.1</a></li>
<li><a href='#'>Sub Item 3.1.1.2</a></li>
<li><a href='#'>Sub Item 3.1.1.3</a></li>
<li><a href='#'>Sub Item 3.1.1.4</a></li>
<li><a href='#'>Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href='#'>Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='http://joxerz.blogspot.com/'>About</a></li>
</ul>
<br style='clear: left'/>
</div>
copy kode diatas dan paste dibawah kode <div id='blog-wrapper'>
atau kode
<div id='header-wrapper'>
dikarenakan tiap template kodenya kadang berbeda
langkah mudahnya anda tinggal mengedit link-linknya yang berwarna biru sesuai selera anda
selanjutnya simpan template anda.

catatan : jangan lupa backup dulu template anda, dengan maksud menjaga terjadinya eror/ gagal pada saat edit template.

posting disadur dari sini
dan sudah dipraktekan by cantik

Baca Yang ini Juga Ya... :



12 comments:

surya ramadhan December 23, 2011 at 8:48 PM  

sip tutornya bisa dicoba nih...

salam blogwalking

hmsf08.blogspot.com

budi March 1, 2012 at 7:47 PM  

lumayan boleh jga nih di coba

Rudy Hartono March 13, 2012 at 6:31 AM  

infonya menarik untuk disimak

Outbound Training Malang July 31, 2012 at 8:30 PM  

salam sukses gan, bagi2 motivasi .,
Pikiran yang positiv dan tindakan yang positiv akan membawamu pada hasil yang positiv.,.
ditunggu kunjungan baliknya gan .,.

Fuadditiya Imaspadi Muharam September 17, 2012 at 8:52 PM  

Trimakasih gan infony..

sangat bermanfaat bagi perkembangan blog saya.. :)

Blog Fuadditiya | The FIM Site

juli November 9, 2012 at 7:38 PM  


terimaksih atas infonya

juli November 9, 2012 at 7:39 PM  


terimaksih atas infonya

zul November 27, 2012 at 6:19 PM  

bermanfaat banget infonya-infonya bagi saya


makasih ya gan

Indra Antara January 9, 2013 at 6:08 PM  

waahh tab menunya keren...

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