Cara Membuat Menu Vertikal di Blog - Smart Education

Sobat blogger pasti sudah tahu apa yang saya maksud. Pada tutorial kali ini Smart Eeducation mau berbagi tentang cara membuat menu navigasi dropdown vertikal. Caranya cukup mudah hanya tinggal memasukkan kode ke dalam gadget. Menu vertikal ini cukup unik karena akan bergeser turun saat cursor mouse diarahkan ke menu.

Berikut kodenya ;

<style type="text/css">
* {
  margin: 0px;
  padding: 0px;
}
nav {
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.5;
  margin: 50px auto; /*for display only*/
  width: 300px;
  -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.menu-item {
  background: #fff;
  width: 300px;
}
/*Menu Header Styles 1*/
.menu-item h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 7px 12px;
  background: #9DB6D7;
}
.menu-item h4 a {
  color: white;
  display: block;
  text-decoration: none;
  width: 300px;
}
/*Menu Header Styles 2*/
.menu-item h4 {
  border-bottom: 1px solid rgba(0,0,0,0.3);
  border-top: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 7px 12px;
  background: #a90329; /* Old browsers */
  background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
  background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.menu-item h4:hover {
  background: #cc002c; /* Old browsers */
  background: -moz-linear-gradient(top,  #cc002c 0%, #6d0019 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* IE10+ */
  background: linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.alpha p {
  font-size: 13px;
  padding: 8px 12px;
  color: #aaa;
}
/*ul Styles*/
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
}
.menu-item ul a {
  margin-left: 20px;
  text-decoration: none;
  color: #0A0A0A;
  display: block;
  width: 250px;
}
/*li Styles*/
.menu-item li {
  border-bottom: 1px solid #eee;
}
.menu-item li:hover {
  background: #eee;
}
/*ul Styles*/
.menu-item ul {
  background: #B2D8E0;
  font-size: 13px;
  line-height: 30px;
  height: 0px; /*Collapses the menu*/
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
}
/*ul Styles*/
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  height: 0px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
  /*Animation*/
  -webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;
}
.menu-item:hover ul {
  height: 115px;
}
</style>
<nav>
    <div class="menu-item">
      <h4><a href="http://namablog.com" target="_blank"">Membuat Blog</a></h4>
      <ul>
        <li><a href="http://namablog.com" target="_blank">Membuat Email </a></li>
        <li><a href="http://namablog.com" target="_blank">Membuat tabel </a></li>
        <li><a href="http://namablog.com" target="_blank">Promosi Blog</a></li>
       <li><a href="http://namablog.com" target="_blank">Setelan Blogger</a></li>
       <li><a href="http://namablog.com" target="_blank"> Membuat Gmail</a></li>
    </ul>
    </div>

    <div class="menu-item">
      <h4><a href="masukkan URL/Link postingan">Widget</a></h4>
      <ul>
    <li><a href="masukkan URL " target="_blank">Cara Pasang widget</a></li>
    <li><a href="masukkan URL " target="_blank">Cara Buat Laman Statis</a></li>
    <li><a href="masukkan URL " target="_blank">Cara Ganti Favicon</a></li>
    <li><a href="masukkan URL " target="_blank">Ganti Template Blog</a></li>
    <li><a href="masukkan URL " target="_blank">Cara Ubah Background Blog</a></li>
    </ul>
    </div>

    <div class="menu-item">
      <h4><a href="masukkan URL/Link postingan disini" target="_blank"">Widget</a></h4>
      <ul>
    <li><a href="masukkan URL disini" target="_blank">Cara Pasang Gadget</a></li>
    <li><a href="masukkan URL disini" target="_blank">Menu Vertikal</a></li>
    <li><a href="masukkan URL disini" target="_blank">Cara Ganti Favicon</a></li>
    <li><a href="masukkan URL disini" target="_blank">Ganti Template Blog</a></li>
    <li><a href="masukkan URL disini" target="_blank">Ubah Background Blog</a></li>
      </ul>
    </div>

    </nav>
Cara memasang
1. Masuk ke Dasbor Blog >> Tata Letak >> Tambahkan Gadget >> Pilih HTML/Javascript

2. Masukkan kode di atas.

Yang perlu sobat perhatikan antara lain;


1. Ukuran lebar menu disini adalah 300px, jangan lupa disesuaikan dengan ukuran sidebar blog sobat dgn mengurangi atau menambahnya.


2. Jumlah URL/Post maksimal 5 (saya gak tahu juga, kok cuma bisa segitu, hehe maklum super gaptek). Jika sobat mengisi dengan 6 Link, gak bakalan tampil semua.


3. Untuk menambah navigasi, silahkan copy saja kode yang sudah saya beri warna merah tebal sebagai contoh, kemudian ganti URL dan Judul Post


4. Kode berwarna hijau, sebagai judul/anchor text, sesuaikan dengan artikel sobat.


5. Untuk pewarnaan menunya silakan utak atik sendiri yee, hehehe. contoh pewarnaan nya ada pada kode color: #0A0A0A; masuk aja ke Color Generator untuk mengetahui kode warna

6. Selamat Mencoba.
 
Sumber : http://www.super-gaptek.com/2012/12/cara-membuat-menu-vertikal-di-blog.html

17 komentar untuk "Cara Membuat Menu Vertikal di Blog - Smart Education"

  1. keren sob artikel nya
    nyimak aja
    blog nya udah di follow
    di tunggu follback nya ya
    http://symbianerzs60v2.blogspot.com

    BalasHapus
    Balasan
    1. Oke :D, jangan lupa mampir lagi ke blog ane yaa.

      Hapus
  2. Mantap artikelnya ! Salam Kenal bro, saya Ahmad Ghulam Azkiya di FB !

    BalasHapus
  3. Trimaksih sob :v, eh itu web apaan ?

    BalasHapus
  4. bro, ane tertarik ama header agan yang "OPEN" itu loh. itu kan ke samping ya? kalau ke ke bawah tahu ga caranya?

    BalasHapus
    Balasan
    1. Maaf nih saya belum bisa membuat animasi bergeraknya ke bawah, saya hanya bisa membuat animasinya yang ke kiri saja :D, dan saya juga baru mengenal CSS.

      Hapus
  5. kalau theme yang sudah ada menu. editnya dimana nya sih

    BalasHapus
    Balasan
    1. Cara memasang :
      1. Masuk ke Dasbor Blog >> Tata Letak >> Tambahkan Gadget >> Pilih HTML/Javascript.
      2. Masukkan kode di atas.
      3. Lalu edit urlnya.

      Hapus
  6. Mohon ijin copas Mas Brow, Salam kenal. TQ ilmunya.

    BalasHapus
    Balasan
    1. silahkan mas, tapi cantumkan link sumbernya :D

      Hapus
  7. Maaf nih om, kalau ingin menulis artikel kaya gini mending dikasih demonya biar ketahuan kalau Anda emang paham dengan script yang Anda tulis.

    BalasHapus
  8. maksih bro... newbie ini.
    robertkarnanto-home.blogspot.com maen ya :)

    BalasHapus
  9. masih mencoba,,,untuk didalam menu itu ada beberapa sub menu itu gmna caranya,,?

    BalasHapus
  10. tolong aku gan saya masih pemula nih, kalau bisa share cara yang lebih ringan atau praktis..baca di sini
    baca selengkapnya

    BalasHapus
  11. makasih banyak buat infonya gan,, sangat bermanfaat sekali nih

    http://goo.gl/mc3qsD

    BalasHapus
  12. Wah sangat bermanfaat sekali buat saya pribadi, saya yakin artikel ini juga bermanfaat banyak terhadap pembaca lainnya seperti yang saya alami.
    Terimakasih bos atas infonya, sukses selalu ..!

    BalasHapus

Untuk menyisipkan kode, gunakan tag <i rel="code">Kode disini...</i> atau <i rel="pre">Kode disini...</i>
Untuk menyisipkan gambar, gunakan <i rel="image">URL gambar disini...</i>
Untuk menyisipkan catatan, gunakan <b rel="quote">Tulis catatan disini...</b>
Untuk menciptakan efek tebal, gunakan tag <b>Teks anda disini...</b>
Konversi Kode Back to Top

Back to Top