Slide Menu Vertikal

Cara pembuatannya sangat mudah , yaitu menggunakan fitur CSS dan beberapa kode HTML.
Anda tinggal menyisipkan sedikit kode CSS tersebut pada template blog anda , dan sedikit kode HTML pada sidebar blog anda.

Demo

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Template
3. Pilih Edit HTML
4. Centang Expand Widget Template
5. Tekan tombol Ctrl+F
6. Cari kode </head>
7. Masukkan script dibawah ini tepat diatas 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. Kemudian masukkan script dibawah ini tepat dibawah script diatas
<style type='text/css'>
ul#Slide-Menu-vertikal-cbwg .ITEM 1 a:hover     { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha7IEYbF5Nv13G7HJuQkr7kK2TuEmD1wCwRbo167cIIhj2qRjgWNSO3NbxDHjUpsx4e47t_hQ2kM9hptmJD3NdrwNF1L0098EKq2BLFaHtjat-kXCOUvJ-T-3SlSZfnhozo4c3o7jXWPPR/s104/home+2.png);}
ul#Slide-Menu-vertikal-cbwg .ITEM 2 a:hover      { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLKmwIOLe1MF94d7C4jeTuuocnw6xmdNuDsgEzRsz9Gi3-rhMC7sZjC0YwEyPTNY_8zcoPH7eraLBlzAecGBaHMLeZZu2x_4XuqfmB2cvBW_tv-GftQwrIoHwrs6qbdyROGRL9Nd32LR0F/s104/id_card.png);}
ul#Slide-Menu-vertikal-cbwg .ITEM 3 a:hover      { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIJ3TaEUo7o0fmvrtH4ybC4mDRAN5EXsqh6Qg2-tPt-Jla8hxMfZNHymcsO4ikiDjKFrcK0vLq3IMDuxYHwJu6JAX6JGkIpwNSSgRgf5e_d3d0p9JgCfcxzAwtdGqS2BqBwuLzJsdFqkQ-/s104/html_file.png);}
ul#Slide-Menu-vertikal-cbwg .ITEM 4 a:hover  { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXS6ud3x1f_g-9doNz1ko9mT4oOVnrdHH9-8dkg8O2oJ7lETK0xHt7Aeeirg_w3RW_poWxRMBrI0oavW_3VhNK3fbIRRkyU2cliTUvMYRPj1_rHUvPtzD8ITKM9k6NyMqHxhxHW6sGJ4aw/s104/css_file.png);}
ul#Slide-Menu-vertikal-cbwg .ITEM 5 a:hover  { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD6muVRWXPCJi68krv72H-7S_APdbvoFhd0YsHWyPuvRUEXkv9fdUVwPAkIfQfuJhPcuQnXgNzao4n1sYb8U6WhATTbXeL_hZqiMg0bKOsFYTP7Jbby4Eq9njjAMMVVywF_Z-m6nlp7JfJ/s104/js_file.png);}
ul#Slide-Menu-vertikal-cbwg .ITEM 6 a:hover  { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguoZYA4wDvFeBqvBT4ezX9a8gfOSv_qQLB7_trwg_9amIqJpqdaiVWkkZNg7TGkqUEN_LTRocHkiO-NlxjwyCL9RQVnI1FBtDxpzvud0vzM7Kggh-8f0SqpLcmu7GuhXTKlf25YPmBaRkI/s104/edit_page.png);}
ul#Slide-Menu-vertikal-cbwg .ITEM 7 a:hover  { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY1Lfs2_XI-Wz4m9vUQnmK71kwfF46rUL87CC2HWMlpAYHe50V48mVXpbuLd6Pj-UKBYdYxTFno9ZiKKoyooK4Z8wbF-byuBPRcaK3x9D7nUElEjINWqJZ6htL1sj8gHr2VX4Iwqk8ALOM/s104/book_accept.png);}
ul#Slide-Menu-vertikal-cbwg .ITEM 8 a:hover  { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRM_NHZKtzWjs56ml-Vbt_XmhHOS_9ByfzCm2qpDF2Euo0RytUbE67SSqJxoJ-BLIDUFu3Erlg3HkoumkkAw0vIvXgV642GxFpILW_5GSIe4YJzXXa9t46r9QUdGfatyon85QGS-hS0Oe0/s104/mail.png);}</style>
Catatan :
- Tulisan warna merah adalah ULR Icon yang ada pada setiap menu.
- Silahkan anda bisa ganti ULR dan Iconnya sesuai dengan menu yang anda inginkan.
- Sebagai referens i, 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. Klik simpan template

Langkah selanjutnya tinggal menaruh Slide Menu Vertikal ini pada Sidebar atau Gadget blog anda.
Ikuti langkah berikut ini :

1. Pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
2. Masukkan script dibawah ini
3. Klik simpan
<ul id="Slide-Menu-vertikal-cbwg">
<li class="ITEM 1">
<a href="http://AlamatLinkAnda"><span>Judul Menu 1</span></a>
</li>
<li class="ITEM 2">
<a href="http://AlamatLinkAnda"><span>Judul Menu 2</span></a>
</li>
<li class="ITEM 3">
<a href="http://AlamatLinkAnda"><span>Judul Menu 3</span></a>
</li>
<li class="ITEM 4">
<a href="http://AlamatLinkAnda"><span>Judul Menu 4</span></a>
</li>
<li class="ITEM 5">
<a href="http://AlamatLinkAnda"><span>Judul Menu 5</span></a>
</li>
<li class="ITEM 6">
<a href="http://AlamatLinkAnda"><span>Judul Menu 6</span></a>
</li>
<li class="ITEM 7">
<a href="http://AlamatLinkAnda"><span>Judul Menu 7</span></a>
</li>
<li class="ITEM 8">
<a href="http://AlamatLinkAnda"><span>Judul Menu 8</span></a>
</li>
</ul>
Catatan : 
- Tulisan warna biru pada kode ini harus sama dengan tulisan warna biru yang ada pada kode diatas.
- Tulisan warna merah ganti dengan URL halaman anda.
- Tulisan warna pink ganti dengan Judul Menu yang sesuai keinginan anda.

Semoga bermanfaat...!!!


Subscribe

2 Komentar Blogger
Komentar Facebook

2 komentar:

January 3, 2013 at 10:00 PM

Siip mas demo menu slide vertikalnya. Lanjutkan dan keep spirit.

January 4, 2013 at 1:50 PM

@mariyanto widodo @ sama2 gan , semoga bermanfaat.

Pasang Widget Otomatis



Submit Web / Blog Ke 20+ Search Engines

Cek Ukuran dan Kecepatan Loading Blog / Web

Masukkan URL blog max 10 URL
( Tools by Dhecun Blog : Get Widget )

Update Artikel Dhecun Blog

Berlangganan Artikel Gratis Lewat Email

Berlangganan artikel via email.

Dapatkan update artikel terbaru dari Dhecun Blog

yang akan dikirim ke email anda secara gratis...!

Jangan lupa buka Email anda untuk verifikasi.
RSS feeds















Space Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Kategori pasang iklan

Rp.10.000 per bulan
Rp.100.000 per tahun
Judul iklan
Deskripsi iklan
Gambar (220x150)

Iklan Sponsor 1

About Me

Profil Google+
My Facebook
Kirim SMS Gratis
Download Gratis
Print

Contact

Contact on Email
Contact on Facebook

Rekomendasi

Follow

RSS feeds

Widget Populer

Widget Zoom Detail Gambar

Widget Share Button Melayang

Share

Tukar Link

Traffic

Semua Artikel




Tampilkan semua artikel

10 Artikel Terbaru






Masukkan email anda

untuk berlangganan artikel




Dhecun Blog

Followers