Cara Mudah Membuat Menu Ala Rak Buku di Blog

Lihat Dem0

Assalamualaikum..wr.wb... Kali ini ! Bakalan-Tlogorejo-city Akan berbagi  dengan sahabat bloger semua....
Walaupun Badan penuh dengan keringat Karena pas waktu rehat Nguli Bangunan....saya sempatkan untuk menulis artikel ini.....Oke Langsung saja,,,Bagi sahabat yang suka mendesain Blok Khususnya di bagian menu,Kali ini saya akan berbagi sebuah menu yang cantik dan mirip dengan rak buku....Apakah Sahabat tertarik dengan menu ini.....
Langsung aja ikuti langkah2 berikut ini

1. Login Blogger. 
2. Menuju Edit Html dan seperti biasa expand widget.
3. Lalu Cari Kode </head> dan letakkan kode di bawah ini tepat 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 Sahabat....
5. Kemudian Menuju Layout ( Tata Letak ), add gadget dan pilih HTML/Java Script.
6. Copy kode di bawah 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><em>Hover to open ...</em></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><em>Hover to open ...</em></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><em>Hover to open ...</em></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><em>Hover to open ...</em></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><em>Hover to open ...</em></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.
Dan lihat hasilnya......
Selamat mencoba....Semoga bermanfaat.......

NB :>> Shabatku Dalam hidup terkadang kita mendapatkan banyak apa yang tidak kita inginkan,,Tapi setelah kita mendapatkan apa yang kita inginkan,Terkadang tidak bisa membuat hidup kita lebih bahagia....
Dan mencari teman buatku sangat mudah...Tapi teman yang paling istimewa dan yang paling aku sukai adalah...?Teman Yang Mau menunjuukkan kesalahanku.......?
Untuk itu Berilah komentar,Karena kritik dan saran Sahabat Sangat saya Butuhkan.....

Terima kasihh........................................