Blogging is my hobby!
Dalam postingan atau articles atau tutorial atau semacamnya deh, hehehe . . . Blog O.W alias Oto Website kali ini kita akan membahas tentang Membuat Menu Navigasi Ala Rak Buku, Menu navigasi ini kalo saya bilang sangat keren dan unik karna tampilannya yang berbeda dan keren pula..
Untuk contohnya sobat bisa lihat gambar beerikut ini? Kalo kurang paham sobat bisa lihat Demonya lansung!



Udah pahamkan?
Gimana apa sobat berminat Membuat Menu Navigasi Ala Rak Buku di blog sobat? kalo iya silahkan sobat ikuti petunjuk cara memasangnya di blogger sobat.

1. Masuk ke akun blogger sobat.

2. Pada menu klick Rancangan ➨ Edit HTML ➨ Centang Expand Template Widget.

3. Download dulu template sobat, untuk mengantisipasi bila terjadi kesalahan.

4. Selanjutnya sobat cari kode </head> Jika kesulitan mencarinya coba baca Cara Cepat Mencari Kode HTML.

5. Kalo sudah ketemu sekarang sobat copy kode Css berikut dan paste atau letakkan di atas kode tadi.

<style type="text/css">
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>

6. Simpan.

7. Sekarang pada menu sobat klick Rancangan ➨ Tambah gadget(di bagian mana saja sobat ingin menu ini muncul)

8. Selanjutnya sobat copy kode script berikut dan paste atau letakkan di dalamnya.

<div id="info">
<ul class="topUL">
<li class="b1"><a class="p1" href="#url"><span>Menu 1</span></a>
<ul class="sub">
<li class="cover">Menu 1<br /><i>by Oto Website </i><em>Hover to open ...</em></li>
<li class="content">
<b>Contents</b>
<a href="http://otowebsite.blogspot.com/">1. Home</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>Menu 2</span></a>
<ul class="sub">
<li class="cover">Menu 2<br /><i>by Oto Website </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>Menu 3</span></a>
<ul class="sub">
<li class="cover">Menu 3<br /><i>by Oto Website</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>Menu 4</span></a>
<ul class="sub">
<li class="cover">Menu 4<br /><i>by Oto Website</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>Menu 5</span></a>
<ul class="sub">
<li class="cover">Menu 4<br /><i>by Oto Website</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 -->

9. Simpan.

Keterangan:
SilahkanGanti tanda # dengan Alamat Url yang diinginkan,
Ganti Nama Menu sesuai sesuai keinginan sobat.

Oke saya rasa cukup untuk kali ini.

Bagaimana, apakah sobat berhasil menerapkannya ke blog sobat?

Silahkan tinggalakan tanggapan atau komentar sobat tentang postingan atau articles di atas!

Posting Komentar Blogger Disqus

  1. Maksih ya kang,, mohon komentar balik disini,,, http://rasyashare.blogspot.com/2012/05/rebutan-rumah-gratis-semudah-1-2-3.html
    dan kalau mau belanja online disini ya mas http://untung-shop.blogspot.com/

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top