Cara Membuat Menu Horisontal Drop Down Sederhana - Hallo Sob Jody Blog, artikel kali ini berjudul Cara Membuat Menu Horisontal Drop Down Sederhana, kami telah menuliskan yang kami tahu pada artikel ini, semoga bermanfaat.

Judul : Cara Membuat Menu Horisontal Drop Down Sederhana
link : Cara Membuat Menu Horisontal Drop Down Sederhana

Cara Membuat Menu Horisontal Drop Down Sederhana

Beberapa waktu lalu ada pengunjung blog ini bertanya bagaimana cara membuat membuat menu navigasi yang ada pada blog ini ,tentunya untuk menjelaskan secara detil pada form komentar agak terlalu kepanjangan ,meski menu ini adalah menu yang paling sederhana yang pernah saya pasang pada blog ini ,maka tidaklah salah jika aku buatkan saja tutorialnya secara langsung dipostingan ini,ya sekalian Update artikel untuk bahan koleksi blog ini atau siapa tahu lain waktu ada pengunjuk blog yang bertanya tentang masalah yang sama .
Untuk Cara Membuat Menu Horisontal Drop Down Sederhana ini tentunya sobat harus loggin dulu ke blogger.
Untuk secara lengkap tutorialnya silahkan ikuti tutorialnya secara lengkap di bawah ini :

1. Anggap sobat sudah ada di dasboard 
2. Silahkan klik Template == Lalu Edit Html 
3. Dengan Bantuan Ctrl + F cari kode ]]></b:skin> pasang kode css di bawah ini tepat di atas kode ]]></b:skin> berikut kodenya :

   #menu {
     background: none repeat scroll 0 0 #A90329;
     height: 30px;
   }
   
   #menu ul {
     margin: 0;
     padding: 0;
   }
   
   #menu ul a {
     text-decoration: none;
   }
   
   #menu ul li {
     list-style: none;
     float: left;
     position: relative;
   }
   
   #menu ul li a {
     background: none repeat scroll 0 0 #A90329;
     color: #fff;
     display: block;
     padding: 4px;
     width: 100px;
     text-align: center;
   }
   
   #menu ul ul {
     padding: 0;
     overflow: hidden;
   }
   
   #menu ul ul li {
     float: none;
     display: none;
     border-bottom: 1px dotted red;
   }
   
   #menu ul ul li a {
     background: #A90329;
     color: #fff;
     border: none;
   }
   
   #menu ul ul li a:hover {
     background: #ccc;
     color: black;
   }
   
   #menu ul li a:hover,
   #menu ul li:hover ul li {
     display: block !important;
   }

4. Selanjutnya cari kode <div id='content-wrapper'> pasang kode HTML di bawah ini tepat di atas kode <div id='content-wrapper'> berikut kode nya :

   <div id="menu">
     <ul>
         <li><a href="/">HOME</a>
       </li>
       <li><a href="#">Blogger-Tool</a>
         <ul>
           <li><a href="#">Kompres Css</a></li>
           <li><a href="#">Konversi</a></li>
           <li><a href="#">Css Beauty</a></li>
         </ul>
       </li>
         <li><a href="#" title="Music">Music</a></li>
         <li><a href="#">Template</a>
         <ul>
             <li><a href="#">Responsive</a></li>
           <li><a href="#">Blue Thema</a></li>
           <li><a href="#">Two Colomb</a></li>
         </ul>  
       </li>
     </ul>
   </div>

5. Lakukan Preview jika tidak ada yang error silahkan Save Template

Untuk jenis Menu navigasi yang lain silahkan review ke link berikut.Atau jika sobat ada kesulitan / pertanyaan silahkan ajukan di form komentar Insya Allah akan saya jawab (Sebatas Kemampuan saya)

Demikianlah Artikel Cara Membuat Menu Horisontal Drop Down Sederhana

Sekian Cara Membuat Menu Horisontal Drop Down Sederhana, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.

Anda sedang membaca artikel Cara Membuat Menu Horisontal Drop Down Sederhana dan artikel ini url permalinknya adalah https://caratutorialgratis.blogspot.com/2013/07/cara-membuat-menu-horisontal-drop-down.html Semoga artikel ini bisa bermanfaat.

Tweet