Dark Style Css Drop Down Vertical Menu - Hallo Sob Jody Blog, artikel kali ini berjudul Dark Style Css Drop Down Vertical Menu, kami telah menuliskan yang kami tahu pada artikel ini, semoga bermanfaat.

Judul : Dark Style Css Drop Down Vertical Menu
link : Dark Style Css Drop Down Vertical Menu

Dark Style Css Drop Down Vertical Menu

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/AVvXsEgrj6leGiFRLotoQlodlG7u6EwAo_6c5ULTvU0hqUGO9xOpzp-12IC6TkwAcWdnq_MtdkTOM-RAB77RlvZSGaQMKuunwU1WmvndTwLoQVwFNQyOBGCdfrfN7AIphbkDS46FRiBE9FHCm2I/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/AVvXsEgrj6leGiFRLotoQlodlG7u6EwAo_6c5ULTvU0hqUGO9xOpzp-12IC6TkwAcWdnq_MtdkTOM-RAB77RlvZSGaQMKuunwU1WmvndTwLoQVwFNQyOBGCdfrfN7AIphbkDS46FRiBE9FHCm2I/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

Semoga Bermanfaat

Demikianlah Artikel Dark Style Css Drop Down Vertical Menu

Sekian Dark Style Css Drop Down Vertical Menu, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.

Anda sedang membaca artikel Dark Style Css Drop Down Vertical Menu dan artikel ini url permalinknya adalah https://caratutorialgratis.blogspot.com/2012/12/dark-style-css-drop-down-vertical-menu.html Semoga artikel ini bisa bermanfaat.

Dark Style Css Drop Down Vertical Menu

lihat juga

Dark Style Css Drop Down Vertical Menu

Demikianlah Artikel Dark Style Css Drop Down Vertical Menu

Related Posts :