Cara buat menu dengan efek image sliding down

Menu ini sangat cocok digunakan pada web dan blog untuk berbisnis. Sebab dari segi tampilan memang menu ini tampak sangat elegan, sehingga dengan menu ini web atau blog kita akan lebih bagus dan lebih mantab untuk menawarkan sebuah produk.
Tapi tentunya bukan hanya untuk berbisnis saja, blog yang bergerak dibidang yang lain juga tetap lebih menarik jika menggunakan menu ini. Yang jelas intinya menu dengan efek image sliding down ini bisa kita manfaatkan sebagai penunjang yang menggambarkan tentang web ataupun blog kita.

Cara bekerja menu dengan efek image sliding down ini sangat ringan, sebab tidak menggunakan jQuery, melainkan hanya menggunakan fitur CSS, dan beberapa kode HTML.

LIHAT DEMO

Bila anda berminat dengan menu ini, silahkan anda bisa ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

7. Copy kode dibawah ini dan paste sebelum kode </head>:

<style type='text/css'>/*widget by noer cara buat web gratis.com*/ .menu-slide-cbwg{ position:relative; width:900px; height:350px; margin:auto; overflow:hidden; background:#000; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji9IbCIiCt8wwzoMeYcdlaIYhU2IQngesOVJ82BRxDJX2vzD0VCKxZljEOAGfAA0d7Fwp-vYcG7fsQu2goDGNkdDZGwuicD_Bam-zjFL6GWm4ZOHj2jBfC_HN5yOCBZR2_WwowgCEFlBHC/s900/background-image.jpg) no-repeat bottom right; background-repeat:no-repeat; background-position:50% 50%; -moz-box-shadow:1px 1px 5px #000; -webkit-box-shadow:1px 1px 5px #000; box-shadow:1px 1px 5px #000; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px 4px 4px 4px; } .titel-menu-slide-cbwg{ display: block; position:absolute; width:100%; float: left; margin:30px 360px 10px ; font-size:70px; cursor:pointer; text-shadow:1px 1px 1px #000; text-decoration:none; font-weight:bold; color:#339025; z-index:999999; } .titel-menu-slide-cbwg a:link { color:#339025; text-decoration:none; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; } .titel-menu-slide-cbwg a:visited { color:#339025; text-decoration:none; } .titel-menu-slide-cbwg a:hover { color:#C3E9A4; text-decoration:none; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; } ul#menu-slide-cbwg { display:inline; list-style: none; z-index:999999; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; } ul#menu-slide-cbwg li { width:180px; float:left; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; } ul#menu-slide-cbwg li a:hover{ position:relative; height:350px; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; border:1px solid #bbb; } ul#menu-slide-cbwg a { display: block; position:relative; width:100%; height:40px; background-repeat:no-repeat; background-position:50% 50%; text-decoration:none; text-align:center; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -moz-box-shadow:1px 1px 5px #000; -webkit-box-shadow:1px 1px 5px #000; box-shadow:1px 1px 5px #000; } ul#menu-slide-cbwg a span{ text-align:center; font-size:20px; line-height:40px; margin-top:0px; margin-top:310px; cursor:pointer; text-shadow:0px 0px 1px #000; text-decoration:none; color:#fff; background-color:#488040; border-top:1px solid #fff; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; opacity: 0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); display: block; width: 180px; font-size:14px; font-weight:bold; color:#fff; } ul#menu-slide-cbwg li a span:hover{ font-size:14px; color:#4152A7; background-color:#eee; opacity: 0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; } </style>

8. Copy kode dibawah ini dan paste setelah kode diatas :

<style type='text/css'>

ul#menu-slide-cbwg .item-1 a:hover
{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg_pTqpPSX0PlY7q2RQLDoe8DIpkuG-mtLvbF2i6F7IXWYOKdhwtIeB5CHoBzdaHyJaWmh34vOBYoTPTLmIPjo4o7dIc9rq-QWwVZthOj7ISbsVKwdL9Bd3rAO-NFdkHf6mxs9QRFicD_3/s400/RUANG+KELURGA+a.jpg);}

ul#menu-slide-cbwg .item-2 a:hover
{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcrUHpT2PCPibaQJR9g8DJYp0tOPLzmTyedM3yw0U4neLj6Nik6G7CaUVkc0gXg49BGauyqsKkWT5tQjtrsUOgKeDAHY_mQVGsZDiWpH73A7d6tiCucBR8ANZeZxeNSjIMnYo9LVMhFWnF/s400/RUANG+KELURGA.+b.jpg);}

ul#menu-slide-cbwg .item-3 a:hover
{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhHoGSYbnukwHsqlSWqNk3qTsXEKsBxcn7l5ob-KU8Q0Gn4SKIDykZ9SW1TkhmVdv-DbjO505RIDW-H3EPhG1cr4WAW8unB41wJ52eNzSPVLosNzacXvzz0EXznHcY2Zz5ZadVgDvhtdr2/s400/RUANG+KELURGA.+c.jpg);}

ul#menu-slide-cbwg .item-4 a:hover
{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxmMnaFKBdogIltNNjRGQVtDdPnjc4vzZTggqXBtg851c4w6qIvq4ZY9lk1i_uLRwCEohufMQ0Cc7C-8Y6jXGpG2uK_PGOjcBxRJGrJPI_bnBr9RSM1TJh_g4H_d20wYSAKLsk02bx4fTS/s400/RUANG+KELURGA.+d.jpg);}

ul#menu-slide-cbwg .item-5 a:hover
{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEjsbkbLkTWo5yRNy2HsU1aIa0_w1LGd4jSv2WyokBYfYZQhEfC3P9nOdWTFG9Uvup15pFsAbsPNGxVAgNv-ouxdW67lO1lSS7YWFNGnrYoESPDGOgdc7ferPhnHd4lFF44Nbjm8nvkEME/s400/RUANG+KELURGA.+e.jpg);}
</style>

Catatan :

• Teks merah adalah ULR Gambar atau foto yang ada pada setiap menu. Silahkan anda bisa ganti ULR dan Gambar atau foto sesuai dengan menu yang anda buat.

9. SIMPAN TEMPLATE.

Langkah selanjutnya tinggal menaruh Slide Menu vertikal pada sidebar. Ikuti langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

 3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<div id="menu-slide-cbwg" class="menu-slide-cbwg">
<div class="titel-menu-slide-cbwg"><a href="ULR BLOG">NAMA BLOG</a></div>
<ul id="menu-slide-cbwg">
<li class="item-1">
<a href="ULR HALAMAN"><span>JUDUL MENU 1</span></a>
</li>

<li class="item-2">
<a href="ULR HALAMAN"><span>JUDUL MENU 2</span></a>
</li>

<li class="item-3">
<a href="ULR HALAMAN"><span>JUDUL MENU 3</span></a>
</li>

<li class="item-4">
<a href="ULR HALAMAN"><span>JUDUL MENU 4</span></a>
</li>

<li class="item-5">
<a href="ULR HALAMAN"><span>JUDUL MENU 5</span></a>
</li>
</ul>
</div>

Catatam : 

• Teks warna BIRU pada kode ini harus sama dengan teks warna BIRU yang ada pada kode diatas.
• Teks warna MERAH ganti dengan ULR HALAMAN anda.
• Teks warna PINK ganti dengan JUDUL MENU milik anda.

11.SIMPAN TEMPLATE.
Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.