Cara buat Slide Menu vertikal

Dilihat dari tampilan dan efek slidding yang muncul, Slide Menu vertikal ini tidak beda dengan tampilan menu accordion. Efek slidding pada menu vertikal ini menampilkan sebuah ikon sesuai dengan menu yang dituju. Sehingga akan tampak lebih indah bila anda menggunakan Slide Menu vertikal ini pada web ataupun blog anda. Cara pembuatannya sangat mudah, yaitu menggunakan fitur CSS dan beberapa kode HTML. Dan anda tinggal menyisipkan sedikit kode CSS tersebut pada template blog anda, dan sedikit kode HTML pada sidebar blog anda.

LIHAT DEMO

OK..., bila anda berminat memasang Slide Menu vertikal ini pada blog anda, silahkan anda bisa ikuti langkah - langkah berikut :

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 Slide Menu vertikal by noer cara buat web gratis.com*/ ul#Slide-Menu-vertikal-cbwg { list-style: none; z-index:999999; margin:0; padding:0; } ul#Slide-Menu-vertikal-cbwg li { width: 200px; display:inline; margin:0; padding:0; } ul#Slide-Menu-vertikal-cbwg li a { display: block; position:relative; width: 200px; height: 25px; background-color:#aaa; background-repeat:no-repeat; background-position:50% 10px; border:1px solid #aaa; text-decoration:none; text-align:center; -moz-border-radius: 5px; border-radius: 5px; margin:0; padding:0; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; } ul#Slide-Menu-vertikal-cbwg li a:hover{ background-color:#fff; border:1px solid #bbb; padding-top: 80px; } ul#Slide-Menu-vertikal-cbwg li a span{ background: -moz-linear-gradient(center top, #fff 0%,#bbb 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #bbb),color-stop(1, #fff)); border-top:2px solid #bbb; -moz-border-radius: 5px; border-radius: 5px; -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: 200px; height: 25px; font-size:14px; font-weight:bold; color:#000; margin:0; padding:0; } ul#Slide-Menu-vertikal-cbwg li a span:hover{ text-decoration:none; text-align:center; font-size:14px; font-weight:bold; color:#40954E; background-color:#eee; opacity: 0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } </style>

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

<style type='text/css'>

ul#Slide-Menu-vertikal-cbwg .ITEM 1 a:hover     { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV76FagwjPaRm3q8xEDD-kltG9gwP0eQE2XOPa_zLTxqvZxa88C6xh3A6Q93Q0X7F6ngPXVpfyjztOwk80QWr2W_Vb87XKOmP5F_yCKbUKPktT4AZ8C4o53snMr_xys5nR7t96Yc88l0iI/s104/home+2.png);}

ul#Slide-Menu-vertikal-cbwg .ITEM 2 a:hover      { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXt5IW5-oQCnyGIXyLULQAlQxWA8JL7H8My_ezLUv25GgZKxvErLPlUADSfW8FxHEamOBZHLL5Ggjx9iRpDoOFJLTVNF3dfWZjQjhYuVhFSTZdl7iPtiMp4uBx8WwFw90NN-4s9AnboDX9/s104/id_card.png);}

ul#Slide-Menu-vertikal-cbwg .ITEM 3 a:hover      { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdnLAypezGeKolALJ11I5bQfA9NWsVRbh7jr2Lw_tUE5HSxIvbqUsVK-f8f55JLv4NdfTjI_kF-33KgIHfcWaoLCBlsjxTMothUzpCcGgwfymiorTW5qANTK0Hn8iVNa3IVTLR31DJel7r/s104/html_file.png);}

ul#Slide-Menu-vertikal-cbwg .ITEM 4 a:hover  { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgETYUxQ9ChERKZVJXIZUukpjvS4OkawgIa_GHadmhS_fsZ_3ATZxSR-wZFleAu55xuIIBRU-Iw6mlIaoTre9HVZN1Ms-ceSinEZiHbZPxZAz73Qsk6h-_DhR0RFi39zzrrnRaQ7gVhbps3/s104/css_file.png);}

ul#Slide-Menu-vertikal-cbwg .ITEM 5 a:hover  { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjchh5IB_0HBXa8neq69_5do2gdYKPhI6W8RPqcrL6TlXDm00G9up4f23qTPM7M7M_qiuobNHg_smZFmRe5Op6QGV9A_5K9036uLET2Yqc_jn1FbLSoAeXO4KWSehH3kxdcyLPuYoElUlnZ/s104/js_file.png);}

ul#Slide-Menu-vertikal-cbwg .ITEM 6 a:hover  { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoSVSZkagN_5UR5-QlPEMWmus0whaOHhV-_X-q9FvQhn06i8PLNWJtmYWbB9uqrP4JqodgyZcpEKPfFYydb-r-dhm65fmJcRFzXCq9dlk9Rc1tnyQIA2daVGDIs3tPpLFTZDm_2l4ZtsNI/s104/edit_page.png);}

ul#Slide-Menu-vertikal-cbwg .ITEM 7 a:hover  { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdNdLPq7xBHkfWuhk8dmFat8Nlx-RLAmySVeHGYsvAVR1-PiKonSIw8LVWPejZUCcau7DSsMQksTEkMOTA6MNJlI0b-MkPrvPfd_IUnwcWKpJS8zh7c6IU09_AXV0fS-byPF91Hs0iIWPd/s104/book_accept.png);}

ul#Slide-Menu-vertikal-cbwg .ITEM 8 a:hover  { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_N7PBpVu9hhGrUykyNxxN5YFL3vB_tkmppRUpkWjjVvmBQmQJdaJcxklP_rf-P977cQbuC_xtd4WyHKT863gNo3zlo99ymgjcHsMiDNa2Ik1dHubFd6daQOZcmcvRgek7OqLLMuVa6fIR/s104/mail.png);}
</style>

Catatan :

• Teks merah adalah ULR Icon yang ada pada setiap menu. Silahkan anda bisa ganti ULR dan Iconnya sesuai dengan menu yang anda buat.
• Sebagai refrensi, anda bisa dapatkan macam - macam bentuk icon di http://dryicons.com/free-icons/
• Anda bisa menambah dan mengurangi jumlah item menu, sesuai kebutuhan anda, tapi disesuaikan dengan lebar area yang ada.

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 :

<ul id="Slide-Menu-vertikal-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>

<li class="ITEM 6">
<a href="ULR HALAMAN"><span>JUDUL MENU 6</span></a>
</li>

<li class="ITEM 7">
<a href="ULR HALAMAN"><span>JUDUL MENU 7</span></a>
</li>

<li class="ITEM 8">
<a href="ULR HALAMAN"><span>JUDUL MENU 8</span></a>
</li>
</ul>

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.

Judul: Cara buat Slide Menu vertikal; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts

• Cara buat menu navigasi Slide OutMasih terus memperbanyak jumlah koleksi menu navigasi. Menu ini bukan termasuk jenis drop down melainkan hanya sekedar navigasi biasa. Tapi menu ini memiliki kelebi ... readmore
• CSS BackgroundFitur dari css Background berfungsi untuk memberi efek latar belakang suatu elemen. Beberapa properti dan kelebihan dari fitur ini diantaranya kita bisa memberi efe ... readmore
• Modifikasi Tampilan Pesan KomentarMemodifikasi tampilan pesan formulir komentar, mungkin bagi anda yag bosan dengan tampilan pesan komentar yang biasa-biasa saja karena tidak ada warna background at ... readmore
• CSS BOX dan FungsinyaFitur Css Box digunakan pada saat kita membuat desain web termasuk mengatur tata letaknya. Css Box pada dasarnya adalah sebuah kotak yang membungkus elemen HTML, da ... readmore
• CSS PaddingProperti CSS padding berfungsi untuk mengatur jarak antara  elemen dengan isi elemen, misalnya mengatur posisi teks yang ada didalam border, tabel dll. Seperti ... readmore