Cara Membuat Menu Navigasi Terkeren Ala Rak Buku

Navigasi Ala Rak Buku

     Sebelum ady menjelaskannya yuk kita chek out dulu :D :D :D

Demo

Nah sekarang pasti temen-temen sudah pada tau kan maksud judul artikel diatas. Okeh, saya jelaskan sedikit.

     Navigasi rak buku adalah navigasi yang disediakan layaknya rak-rak buku yang ada diperpustakaan. bedanya kali ini bukan di perpustakaan melainkan di blog/website ( hahahaa anak kecil gin tau ). Navigasi ini sangat menarik dikarenakan animasi-animasi yang begitu cantik nan indah. Menurut ady, navigasi rak buku ini mungkin bisa di bilang navigasi terkeren yang pernah ady temui. Permainan animasinya pun tak kalah dari navigasi keren yang lain. Sehingga banyak sekali peminatnya, yang ingin menaruh/memasang navigasi rak buku ini ke blog/websitenya. Saya gin rencananya ingin memasangnya heheee.....

Okeh, mungkin cukup untuk penjelasannya...

Dan saat yang di nanti-nantikan oleh pembaca/pengunjung,,,,,inilah diaaaaa ,,,, kita SAMBIT ,,ech salah maksudnya,,, kita SAMBUT tuuttoorriiaallnnyyaaaa...... hahahaaa  }:D  << IBLIS

1. Login Blogger.
2. Menuju Edit Html dan seperti biasa expand widget.
3. Lalu Cari Kode </head> dan letakkan kode ini diatasnya.

<style type="text/css">/* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/css3-cssplay6.html Copyright (c) 2005-2009 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ ul.topUL {padding:0; margin:0; list-style:none; width:250px; margin:0 auto; position:relative; z-index:100; font-family:verdana, arial, sans-serif;} ul.topUL > li {float:left; margin-right:1px; position:relative; z-index:10;} ul.topUL > li a.p1 {display:block; width:43px; border:2px solid #333; border-width:1px 3px; height:248px; color:#fff; top:0; left:0; text-decoration:none; position:relative; -o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; } ul.topUL > li > a span {display:block; width:43px; white-space:nowrap; position:absolute; left:0px; top:200px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } ul.topUL > li.b1 > a {background:#562; border-color:#340; background: -moz-linear-gradient(0, #562, #784 50%, #562 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#562), color-stop(50%, #784), color-stop(100%, #562)); } ul.topUL > li.b2 > a {background:#366; border-color:#144; background: -moz-linear-gradient(0, #366, #688 50%, #366 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#366), color-stop(50%, #688), color-stop(100%, #366)); } ul.topUL > li.b3 > a {background:#246; border-color:#024; background: -moz-linear-gradient(0, #246, #579 50%, #246 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#246), color-stop(50%, #579), color-stop(100%, #246)); } ul.topUL > li.b4 > a {background:#741; border-color:#520; background: -moz-linear-gradient(0, #741, #a74 50%, #741 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#741), color-stop(50%, #a74), color-stop(100%, #741)); } ul.topUL > li.b5 > a {background:#623; border-color:#401; background: -moz-linear-gradient(0, #623, #956 50%, #623 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#623), color-stop(50%, #956), color-stop(100%, #623)); } ul.topUL ul.sub {padding:0; list-style:none; position:absolute; left:-51px; top:230px; width:0; overflow:hidden; height:250px; margin:0 0 20px 0; -o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); -webkit-transition: 0s; -moz-transition: 0s; -o-transition: 0s; transition: 0s; transition-delay:0s; -o-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -webkit-transition-delay: 0s; } ul.topUL > li.b1 > ul {background:#784;} ul.topUL > li.b2 > ul {background:#688;} ul.topUL > li.b3 > ul {background:#579;} ul.topUL > li.b4 > ul {background:#a74;} ul.topUL > li.b5 > ul {background:#956;} ul ul li.content {width:0; height:190px; position:absolute; left:0; top:10px; background:#eee; padding:40px 0 0 0; text-indent:20px; font-size:11px; color:#444; overflow:hidden; -o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); -webkit-transition: 0s; -moz-transition: 0s; -o-transition: 0s; transition: 0s; transition-delay: 0s; -o-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -webkit-transition-delay: 0s; } ul ul li b {display:block;} ul ul li a {text-decoration:none; color:#444; padding-left:20px; line-height:20px;} ul ul li a:hover {color:#000; text-decoration:underline;} ul ul li.cover {width:0; height:220px; position:absolute; padding-top:30px; text-indent:10px; font-size:14px font-weight:bold; color:#fff; left:0; top:0; z-index:100; overflow:hidden; white-space:nowrap;} ul ul li.cover i {font-weight:normal; font-style:normal; font-size:10px; line-height:40px; padding-left:10px;} ul ul li.cover em {display:block; font-weight:normal; font-style:normal; margin-top:120px; font-size:10px; line-height:40px;} ul.topUL > li.b1 li.cover {background:#562; background: -moz-linear-gradient(0, #562, #784 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#562), color-stop(100%, #784)); } ul.topUL > li.b2 li.cover {background:#366; background: -moz-linear-gradient(0, #366, #688 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#366), color-stop(100%, #688)); } ul.topUL > li.b3 li.cover {background:#246; background: -moz-linear-gradient(0, #246, #579 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#246), color-stop(100%, #579)); } ul.topUL > li.b4 li.cover {background:#741; background: -moz-linear-gradient(0, #741, #a74 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#741), color-stop(100%, #a74)); } ul.topUL > li.b5 li.cover {background:#623; background: -moz-linear-gradient(0, #623, #956 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#623), color-stop(100%, #956)); } ul.topUL > li:hover {direction:ltr; z-index:100;} ul.topUL > li:hover a.p1 {top:230px;left:-100px; -o-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7); box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7); -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; transition-delay: 0s; -o-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -webkit-transition-delay: 0s; } ul.topUL li:hover ul {width:200px; -o-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7); box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7); -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; transition-delay: 0.5s; -o-transition-delay: .5s; -moz-transition-delay: 0.5s; -ms-transition-delay: 0.5s; -webkit-transition-delay: 0.5s; } ul.topUL li:hover ul li.cover {width:200px; -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; } ul.topUL li:hover ul li.content {width:190px; background: -moz-linear-gradient(0, #ddd, #fff 50%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#ddd), color-stop(50%, #fff)); -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } ul.topUL li:hover ul:hover {overflow:visible;} ul.topUL li.b1:hover ul:hover li.cover {border-right:4px solid #451;} ul.topUL li.b2:hover ul:hover li.cover {border-right:4px solid #255;} ul.topUL li.b3:hover ul:hover li.cover {border-right:4px solid #135;} ul.topUL li.b4:hover ul:hover li.cover {border-right:4px solid #630;} ul.topUL li.b5:hover ul:hover li.cover {border-right:4px solid #512;} ul.topUL li.b1:hover ul:hover li.cover {border-right:4px solid #451;} ul.topUL li.b2:hover ul:hover li.cover {border-right:4px solid #255;} ul.topUL li.b3:hover ul:hover li.cover {border-right:4px solid #135;} ul.topUL li.b4:hover ul:hover li.cover {border-right:4px solid #630;} ul.topUL li.b5:hover ul:hover li.cover {border-right:4px solid #512;} ul.topUL li:hover ul:hover li.cover {left:-2px; width:1px; height:235px; top:-15px; padding-top:45px; -o-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; } .shelf {clear:left; width:350px; height:25px; background:#620; margin:0 auto; background: -moz-linear-gradient(90deg, #620, #950 20%, #620 30%); background: -webkit-gradient(linear, 0 100%, 0 0 , from(#620), color-stop(20%, #950), color-stop(30%, #620)); -o-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7); box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7); } </style>

4. Save Template.
5. Menuju Layout ( Tata Letak ), add gadget dan pilih HTML/Java Script.
6. Copy kode ini dan pastekan.

<div id="info"> <ul class="topUL"><li class="b1"><a class="p1" href="#url"><span>Product Guide</span></a><ul class="sub"><li class="cover">Product Guide<br /><i>by HYG </i><i>Hover to open ...</i></li><li class="content"><b>Contents</b><a href="#url">1. Mak erot</a><a href="#url">2. Mak Icih</a><a href="#url">3. Bang Kumis</a><a href="#url">4. Bang Jenggot</a><a href="#url">5. Bang Brewok</a><a href="#url">6. Si Jambang</a></li></ul></li><li class="b2"><a class="p1" href="#url"><span>A Concise History</span></a><ul class="sub"><li class="cover">Menu Sarapan<br /><i>by HYG </i><i>Hover to open ...</i></li><li class="content"><b>Contents</b><a href="#url">1. Sarapan Pagi</a><a href="#url">2. Sarapan Siang</a><a href="#url">3. Sarapan Malam</a><a href="#url">4. Mandi Kembang</a></li></ul></li><li class="b3"><a class="p1" href="#url"><span>Design for Beginners</span></a><ul class="sub"><li class="cover">Halaman Cinta<br /><i>by HYG</i><i>Hover to open ...</i></li><li class="content"><b>Contents</b><a href="#url">1. Cerita Cinta</a><a href="#url">2. Cinta Pertama</a><a href="#url">3. Cinta Kedua</a><a href="#url">4. Cinta Ketiga</a><a href="#url">5. Putus Cinta</a></li></ul></li><li class="b4"><a class="p1" href="#url"><span>Address Book</span></a><ul class="sub"><li class="cover">Alamat ku<br /><i>by HYG</i><i>Hover to open ...</i></li><li class="content"><b>Contents</b><a href="#url">1. Facebook ku</a><a href="#url">2. Twitter ku</a><a href="#url">3. Google+ ku</a><a href="#url">4. Skype ku</a><a href="#url">5. Alay sekali</a><a href="#url">6. Cape deh</a></li></ul></li><li class="b5"><a class="p1" href="#url"><span>Travellers Tales</span></a><ul class="sub"><li class="cover">Musik Koe<br /><i>by HYG</i><i>Hover to open ...</i></li><li class="content"><b>Contents</b><a href="#url">1. Dangdut</a><a href="#url">2. Pop</a><a href="#url">3. Rock</a><a href="#url">4. Melayut</a><a href="#url">5. Blues</a></li></ul></li></ul><div class="shelf"></div></div><!-- end of info -->

7. Klik Save dan Lihat Website/Blog anda.

Adik : wwaaawwww keeerreeeennnnn ,,,,, (y) (y) (y)
kakak : apakah aku harus bilang waw juga gtu ,,,,,, ?????

8. Heheheeee Selamat Mencoba yah temen-temen... Good Luck!




Demo by : oto website