Under88 - Navigation Menu ini terinspirasi dari Bang fianhar yang pada tahun 2011 sudah di release dan kali ini saya akan update dengan sedikit perubahan style. atau memperbaiki HTML pada navigati menu tersebut.
ya yang pada dasarnya menu navigasi inipun sudah di terapkan pada Vimeo.com. Dibawah ini bagian artikel pada bang fianhar:
Bang Fianhar mengatakan :
"Saya sangat suka navigasi atas diterapkan pada Vimeo.com. Pertama kali aku melihatnya aku ingin menciptakan itu. Dan ini persis apa yang akan saya lakukan dalam tutorial ini.
Apa yang paling saya sukai adalah menu yang turun ke bawah ketika Anda membawa kotak pencarian. Ia menawarkan pilihan pencarian yang berbeda yang dapat Anda pilih dan mempersempit pencarian Anda.
Aku sudah menampilkan tutorial ini Janko's beberapa waktu lalu, tapi kadang-kadang saya akan mengulangi diriku sendiri, karena artikel ini benar-benar didedikasikan untuk menampilkan menu drop-down lanjutan. Sangat rinci dan ditulis dengan baik tutorial, dengan drop-down pencarian penyempitan dan menargetkan pencarian dengan memeriksa pilihan. Menu ini dilakukan sepenuhnya hanya menggunakan CSS"
Cara Menerapkan Mega Menus Navigation to Blogger Template
silahkan ikuti langkah sebagai berikut :- Langkah 1 : Back Up template Anda. Sebelum melakukan pengeditan template. untuk berjaga-jaga bila terjadi kesalahan.
- Langkah 2 : Login Blogger -> Template -> Edit HTML: atau lihat pada gambar di bawah ini :
"Tanpa expand juga masih bisa di lakukan."
- Langkah 3 : Copy kode CSS di bawah ini di atas kode ]]></b:skin> atau tekan CTRL+F untuk mempercepat pencarian.
#janko #menu{ margin:0px; padding:0px; list-style:none; color:#fff; line-height:45px; display:inline-block; float:left; z-index:1000; } #janko #menu a { color:#fff; text-decoration:none; } #janko #menu > li {background:#172322 none repeat scroll 0 0; cursor:pointer; float:left; position:relative;padding:0px 10px;} #janko #menu > li a:hover {color:#B0D730;} #janko #menu .logo {background:transparent none repeat scroll 0% 0%; padding:0px; background-color:Transparent;} /* sub-menus*/ #janko #menu ul { padding:0px; margin:0px; display:block; display:inline;} #janko #menu li ul { position:absolute; left:-10px; top:0px; margin-top:45px; width:150px; line-height:16px; background-color:#172322; color:#0395CC; /* for IE */ display:none; } #janko #menu li:hover ul { display:block;} #janko #menu li ul li{ display:block; margin:5px 20px; padding: 5px 0px; border-top: dotted 1px #606060; list-style-type:none; } #janko #menu li ul li:first-child { border-top: none; } #janko #menu li ul li a { display:block; color:#0395CC; } #janko #menu li ul li a:hover { color:#7FCDFE; } /* main submenu */ #janko #menu #main { left:0px; top:-20px; padding-top:20px; background-color:#7cb7e3; color:#fff; z-index:999;} /* search */ #janko .searchContainer div { background-color:#fff; display:inline; padding:5px;} #janko .searchContainer input[type="text"] {border:none;} #janko .searchContainer img { vertical-align:middle;} /* corners*/ #janko #menu .corner_inset_left { position:absolute; top:0px; left:-12px;} #janko #menu .corner_inset_right { position:absolute; top:0px; left:150px;} #janko #menu .last { background:transparent none repeat scroll 0% 0%; margin:0px; padding:0px; border:none; position:relative; border:none; height:0px;} #janko #menu .corner_left { position:absolute; left:0px; top:0px;} #janko #menu .corner_right { position:absolute; left:132px; top:0px;} #janko #menu .middle { position:absolute; left:18px; height: 20px; width: 115px; top:0px;} - Langkah 4 : Langkah 4 : Tambahkan kode dibawah ini pada bagian Header Blog atau pada bagian <body> atau jika template masih setandar letakkan pada bagian <div id='outer-wrapper'> :
<div id='janko'> <div style='margin-left:50px;'> <ul id='menu'> <li class='logo'> <img alt='' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/menu_left.png' style='float:left;'/> <ul id='main'> <li>Welcome to <b>Create Vimeo-like top navigation</b> tutorial!</li> <li class='last'> <img alt='' class='corner_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_blue_left.png'/> <img alt='' class='middle' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/dot_blue.png'/> <img alt='' class='corner_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_blue_right.png'/> </li> </ul> </li> <li><a href='#'>Login</a> </li> <li><a href='#'>Help</a> <ul id='help'> <li> <img alt='' class='corner_inset_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_left.png'/> <a href='#'>General help</a> <img alt='' class='corner_inset_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_right.png'/> </li> <li><a href='#'>Posts</a></li> <li><a href='#'>Pages</a></li> <li><a href='#'>Posts</a></li> <li><a href='#'>Pages</a></li> <li><a href='#'>Posts</a></li> <li class='last'> <img alt='' class='corner_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_left.png'/> <img alt='' class='middle' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/dot.gif'/> <img alt='' class='corner_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_right.png'/> </li> </ul> </li> <li><a href='#'>Contact</a> <ul id='help'> <li> <img alt='' class='corner_inset_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_left.png'/> <a href='#'>General help</a> <img alt='' class='corner_inset_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_right.png'/> </li> <li><a href='#'>Posts</a></li> <li><a href='#'>Pages</a></li> <li><a href='#'>Posts</a></li> <li><a href='#'>Pages</a></li> <li><a href='#'>Posts</a></li> <li class='last'> <img alt='' class='corner_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_left.png'/> <img alt='' class='middle' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/dot.gif'/> <img alt='' class='corner_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_right.png'/> </li> </ul> </li> <li class='searchContainer'> <div> <input id='searchField' type='text'/> <img alt='Search' onclick='alert('You clicked on search button')' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/magnifier.png'/></div> <ul id='search'> <li> <img alt='' class='corner_inset_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_left.png'/> <input id='cbxAll' type='checkbox'/>All <img alt='' class='corner_inset_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_right.png'/> </li> <li><input id='Articles' type='checkbox'/>Articles</li> <li><input id='Tutorials' type='checkbox'/>Tutorials</li> <li><input id='Reviews' type='checkbox'/>Reviews</li> <li><input id='Resources' type='checkbox'/>Resources</li> <li class='last'> <img alt='' class='corner_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_left.png'/> <img alt='' class='middle' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/dot.gif'/> <img alt='' class='corner_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_right.png'/> </li> </ul> </li> </ul> <img alt='' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/menu_right.png' style='float:left;'/> </div> </div>
- Langkah 5 : Simpan dan lihat hasilnya
Kode yang terdapat pada langkah ke-4 masukkan pada HTML Blogger Template Anda, tetapi lebih baik penempatan Mega Drop Down Menus pada Header Template
Terima kasih sudah berkunjung semoga artikel Mega Menus Navigation pada Blogger Template ini bisa bermanfaat.
Wassalamullaikum Wr.Wb
Sumber
nyolong dr vimeo nih wkwkw =D
ReplyDeletewkwkwk... ini artikel pertama... cuman saya update lagi waktunya... soalnya artikel baru belum kelar semuanya...
Deleteminjem pelanginya yah, yang "...ada langkah ke-4 masukkan pada HTM..." itu :)
ReplyDeleteokkkkkkkkkkk
ReplyDelete