Cara membuat/memasang Menu Tersembunyi Unik dengan CSS

Kemarin beberapa kawan blogger bertanya bagaimana cara membuat menu navigasi yang tampil beda tapi lumayan ringan alias tidak mengganggu saat loading blog. Ini bukan suatu widget yang terbaiuk, tapi setidaknya ini adalah tawaran yang mungkin bisa memecah kebuntuan dari kebutuhan tersebut. Sekarang mari kita bahas cara membuat menu tersembunyi unik dengan css. Ikuti langkah berikut.

Masuk blogger
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode ]]></b:skin>

.blogonol-hiddenmenu{ position:fixed;font-family:Arial;font-size:12px;width:30px;overflow:hidden;left:-10px; padding:4px; border:6px solid transparent;bottom:0;height:158px;background:url(http://i1138.photobucket.com/albums/n524/blogonol/blogonol-moreinfo-1.jpg) bottom right no-repeat;transition:width 0.5s ease-out 0.8s,background 0.4s linear;-o-transition:1s ease-outwidth 0.5s ease-out 0.8s,background 0.4s linear;-moz-transition:width 0.5s ease-out 0.8s,background 0.4s linear;-webkit-transition:width 0.5s ease-out 0.8s,background 0.4s linear;-ms-transition:width 0.5s ease-out 0.8s,background 0.4s linear}
.blogonol-hiddenmenu:hover{z-index:11;width:390px;left:0;height:425px;background:#666;border-color:#aaa}
.blogonol-hiddenmenu:hover, .blogonol-hiddenmenu .hiddenmenu ul li{transition:0.5s ease-out;-o-transition:0.5s ease-out;-moz-transition:0.5s ease-out;-webkit-transition:0.5s ease-out;-ms-transition:0.5s ease-out}
.blogonol-hiddenmenu .hiddenmenu{float:left;padding:5px;background:transparent;opacity:0;margin:3px;border-radius:8px}
.blogonol-hiddenmenu:hover .hiddenmenu{opacity:1.0;background:#aaa}
.blogonol-hiddenmenu .hiddenmenu ul{margin:0;padding:0 3px 0 3px;width:368px;height:380px;list-style:none;float:left;background:#eee;overflow:auto}
.blogonol-hiddenmenu .hiddenmenu ul li{padding:5px 6px 5px 30px;background:#888 url(http://i1138.photobucket.com/albums/n524/blogonol/blogonol-trail6.gif) 6px 7px no-repeat;line-height:18px;border-bottom:1px dotted #999;margin:0}
.blogonol-hiddenmenu .hiddenmenu ul li:hover{ background-color:#aaa;  border-left:6px solid red}
.blogonol-hiddenmenu .hiddenmenu ul li a{ text-decoration:none;  color:#000;  text-shadow:#888 2px 2px 2px}
.blogonol-hiddenmenu .hiddenmenu ul li a:hover{ color:#C30}
.blogonol-link{display:inline-block; padding:5px 15px; width:91%; text-align:right; font-size:14px; text-shadow:3px 3px 3px #000; color:#09F; margin:2px; background:#555; text-decoration:none}
.blogonol-link:hover{color:red}

Klik Simpan Template
Selanjutnya Klik lagi Rancangan
Klik Tambah Gadget
Pilih HTML/ JavaScript
Masukkan kode berikut ke dalamnya

<div class="blogonol-hiddenmenu">
<div class="hiddenmenu">
   <ul>
<li><a href='MASUKKAN ALAMAT LINK ANDA DI SINI' target='_blank'>JUDUL</a></li>
<li><a href='MASUKKAN ALAMAT LINK ANDA DI SINI' target='_blank'>JUDUL</a></li>

..........DST..........

   </ul>
</div>
<a class="blogonol-link" target="_blank" href="blogonol.blogspot.com">blogonol | blogger tutorial</a>
</div>

DST itu hanya contoh saja dalam pemasangannya jangan di masukkan gan.

Klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu

Sumber : http://blogonol.blogspot.com/2012/06/menu-tersembunyi-unik-dengan-css.html

Artikel Terkait:

jQuery

• Cara Gampang Memasang/Membuat Tab Menu Tanpa Edit HTML
• Membuat/Memasang Recent Comment Dengan Jquery pada Blog
• Widget Sharing Is Caring - Cara Memasang Widget Caring Is Sexy
• Cara membuat Buku tamu melayang Dengan Light Effect jQuery
• Cara Membuat Menu Horizontal Drop Down Dengan Animasi
• Cara Memasang Menu Horizontal Kwicks JQuery Slide

CSS

• Membuat Tepi Gambar Bershadow Dengan CSS 3
• Cara Gampang Memasang/Membuat Tab Menu Tanpa Edit HTML
• Membuat/Memasang Recent Comment Dengan Jquery pada Blog
• Widget Sharing Is Caring - Cara Memasang Widget Caring Is Sexy

Blog

• Jquery Multi Level Menu Horizontal
• Membuat Tepi Gambar Bershadow Dengan CSS 3
• Cara Memasang Optimasi Template Menjadi SEO Friendly
• Cara Memasang Meta Tag SEO Friendly
• Membuat Gambar Slider Carousel Otomatis Berdasarkan Label
• Cara Gampang Memasang/Membuat Tab Menu Tanpa Edit HTML
• Membuat/Memasang Recent Comment Dengan Jquery pada Blog
• RPP Membukukan penyesuaian kas di bank
• Widget Sharing Is Caring - Cara Memasang Widget Caring Is Sexy
• Cara membuat Buku tamu melayang Dengan Light Effect jQuery
• Cara Membuat/Memasang Menu Tab View di Blog
• Cara Membuat Gambar Berdampingan pada posting
• Cara Membuat Menu Horizontal Drop Down Dengan Animasi
• Cara Memasang Menu Horizontal Kwicks JQuery Slide
• Cara mudah memasang Iklan diatas postingan
• Cara Mendapatkan Google Adsense lewat Docstoc
• Cara Membuat Sitemap Blog
• Membuat Iklan Berdampingan
• Cara Pasang Meta Tag SEO pada Blog
• Cara Mudah Membuat Kotak Komentar Facebook di Blogger
• Cara Mendaftarkan Blog di Webmaster Google
• Cara Membuat Artikel Terkait Dengan Fungsi Scroll
• Cara Membuat Dan Memasang Scroll Pada Label Kategori Blog
• Mengatur Jumlah Posting Pada Halaman Label (widget)