Dark Style Css Drop Down Vertical Menu

ADIB 1:12 AM

Mengawali Tahun 2013 dengan Menu memenu, kembali menemani sobat Blogger mengutak atik Blog dengan menu Dark Style Css Drop Down Vertical yang tampilannya lumayan keren, terlepas nanti sobat ingin pakai atau tidak di blog tercinta ada baiknya nyimak dulu atau di simpan dulu karena mungkin suatu saat mau di coba.
Demo di bawah ini

Cara Pasang
Pertama
SIlahkan menuju Dasbord lalu klik Template ---> Edit HTML

Silahkan Cari kode ]]></b:skin>

Letakkan Code berikut diatas ]]></b:skin>

/* The CSS Code for the menu starts here kumpulancara.com */
#kumpulancara_box_menu{padding:0;margin:0;width:245px;list-style:none outside none}
#kumpulancara_box_menu li{background:#252525;position:relative;border-bottom:1px solid #110f0e;border-top:1px solid #3d3732;}
#kumpulancara_box_menu li ul{position:absolute;padding:0;margin:0;left:245px;top:-1px;display:none;width:160px;list-style:none outside none;z-index:9990;background:#00CC33}
#kumpulancara_box_menu li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSFcdVf2TvUDZJP2nzGxcdD71IUBpSba17w2267FK2-06DIIPHcc2ZMA4ys-JgzTGivP1urCj6tpdVNp15MIu0f_sHOVCEIMFgGdGQMIXrLlC6mV77HaYVDkRmPtyzjRXB-gu5XN0VFuI/s1600/bt-arrow-right-icon.png) no-repeat 5px 10px;display:block;min-height:30px;line-height:30px;margin:0;padding:0 5px 0 25px;text-decoration:none;color:#777;color:#b69786;font-size:14px;border-right:4px solid #35322c;cursor:pointer;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out}
#kumpulancara_box_menu li a:hover{border-right-color:#665d54;text-decoration:none;color:#ddd;background:#38332d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSFcdVf2TvUDZJP2nzGxcdD71IUBpSba17w2267FK2-06DIIPHcc2ZMA4ys-JgzTGivP1urCj6tpdVNp15MIu0f_sHOVCEIMFgGdGQMIXrLlC6mV77HaYVDkRmPtyzjRXB-gu5XN0VFuI/s1600/bt-arrow-right-icon.png) no-repeat 5px 10px;}
#kumpulancara_box_menu li:hover ul, #bloggertrix_box_menu li.over ul{display:block}

Silahkan di Simpan

Kedua
Sobat Sebaiknya pasang Menu ini pada widget di kiri atau kanan Blog supaya terlihat serasi.

Sekarang silahkan menuju Tata Letak + Tambah Gadget + HTML/JavaScript

Masukkanlah Code berikut kedalamnya

<ul id="kumpulancara_box_menu">
    <li><a href="#">Menu List 1</a>
        <ul>
              <li><a href="#">Menu List 1.1</a></li>
              <li><a href="#">Menu List 1.2</a></li>
              <li><a href="#">Menu List 1.3</a></li>
              <li><a href="#">Menu List 1.4</a></li>
        </ul>
    </li>
    
    <li><a href="#">Menu List 2</a>
        <ul>
              <li><a href="#">Menu List 2.1</a></li>
              <li><a href="#">Menu List 2.2</a></li>
              <li><a href="#">Menu List 2.3</a></li>
              <li><a href="#">Menu List 2.4</a></li>
              <li><a href="#">Menu List 2.5</a></li>
              <li><a href="#">Menu List 2.6</a></li>
        </ul>
    </li>
    
    <li><a href="#">Menu List 3</a>
        <ul>
              <li><a href="#">Menu List 3.1</a></li>
              <li><a href="#">Menu List 3.2</a></li>
        </ul>
    </li>
    
    <li><a href="#">Menu List 4</a>
        <ul>
            <li><a href="#">Menu List 4.1</a></li>
              <li><a href="#">Menu List 4.2</a></li>
              <li><a href="#">Menu List 4.3</a></li>
              <li><a href="#">Menu List 4.4</a></li>
              <li><a href="#">Menu List 4.5</a></li>
              <li><a href="#">Menu List 4.6</a></li>
        </ul>
    </li>
    
    <li><a href="#">Menu List 5</a>
          <ul>
            <li><a href="">Menu List 5.1</a></li>
              <li><a href="">Menu List 5.2</a></li>
              <li><a href="">Menu List 5.3</a></li>
              <li><a href="">Menu List 5.4</a></li>
              <li><a href="">Menu List 5.5</a></li>
              <li><a href="">Menu List 5.6</a></li>
              <li><a href="">Menu List 5.7</a></li>
              <li><a href="">Menu List 5.8</a></li>
        </ul>
    </li>
    
    <li><a href="#">Menu List 6</a>
        <ul>
            <li><a href="#">Menu List 6.1</a></li>
              <li><a href="">Menu List 6.2</a></li>
              <li><a href="#">Menu List 6.3</a></li>
              <li><a href="#">Menu List 6.4</a></li>
              <li><a href="#">Menu List 6.5</a></li>
              <li><a href="#">Menu List 6.6</a></li>
              <li><a href="#">Menu List 6.7</a></li>
              <li><a href="#">Menu List 6.8</a></li>
        </ul>
    </li>
    
    <li><a href="#">Menu List 7</a>
        <ul>
            <li><a href="#">Menu List 7.1</a></li>
              <li><a href="#">Menu List 7.2</a></li>
              <li><a href="#">Menu List 7.3</a></li>
              <li><a href="#">Menu List 7.4</a></li>
              <li><a href="#">Menu List 7.5</a></li>
              <li><a href="#">Menu List 7.6</a></li>
              <li><a href="#">Menu List 7.7</a></li>
              <li><a href="#">Menu List 7.8</a></li>
        </ul>
    </li>
    
    <li><a href="#">Menu List 8</a>
             <ul>
            <li><a href="#">Menu List 8.1</a></li>
              <li><a href="#">Menu List 8.2</a></li>
              <li><a href="#">Menu List 8.3</a></li>
              <li><a href="#">Menu List 8.4</a></li>
              <li><a href="#">Menu List 8.5</a></li>
              <li><a href="#">Menu List 8.6</a></li>
        </ul>
    </li>
      
</ul>

Silahhkan Ganti Code # dengan Link Blog anda dan Menu List dengan Nama Menunya

Post a Comment

0 Comments