Posts Subscribe comment Comments

Monday, April 07, 2025

Loading
Copy and paste in your website
rumahku sorgaku » » Cara Membuat Menu Horisontal Drop Down Pada Blogspot

Cara Membuat Menu Horisontal Drop Down Pada Blogspot


Cara Membuat Menu Horisontal Drop Down silahkan langkah-langkahnya:


1. Login ke akun blogger anda
2. Pilih Dashboard - Tata letak (Rancangan) - Edit HTML
3. Cari code ]]></b:skin>  Ctr+F untuk mempermudah pencarian
4. Kopi kode dibawah letakan tepat di atas ]]></b:skin> 

menu{
 border:none;
 border:0px;
 margin:0px;
 padding:0px;
 font: 67.5% "Arial", Arial;
 font-size:14px;
 font-weight:bold;

 }
 .menu ul{
 background:#333333;
 height:35px;
 list-style:none;
 margin:0;
 padding:0;
 font-size:14px;
 font-weight:bold;
 }
 .menu li{
 float:left;
 padding:0px;
 }
 .menu li a{
 background:#333333 url("http://i47.tinypic.com/qp53sw.jpg") bottom right no-repeat;
 color:#cccccc;
 display:block;
 font-weight:normal;
 line-height:35px;
 margin:0px;
 padding:0px 25px;
 text-align:center;
 text-decoration:none;
 }
 .menu li a:hover, .menu ul li:hover a{
 background: #2580a2 url("http://i49.tinypic.com/13zbc53.jpg") bottom center no-repeat;
 color:#FFFFFF;
 text-decoration:none;
 }
 .menu li ul{
 background:#333333;
 display:none;
 height:auto;
 padding:0px;
 margin:0px;
 border:0px;
 position:absolute;
 width:225px;
 z-index:200;
 /*top:1em;
 /*left:0;*/
 }
 .menu li:hover ul{
 display:block;

 }
 .menu li li {
 background:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;
 display:block;
 float:none;
 margin:0px;
 padding:0px;
 width:225px;
 }
 .menu li:hover li a{
 background:none;

 }
 .menu li ul a{
 display:block;
 height:35px;
 font-size:12px;
 font-style:normal;
 margin:0px;
 padding:0px 10px 0px 15px;
 text-align:left;
 }
 .menu li ul a:hover, .menu li ul li:hover a{
 background:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;
 border:0px;
 color:#ffffff;
 text-decoration:none;
 }
 .menu p{
 clear:left;
 }


 5. Simpan Tempelate
     Setelah tempelate tersimpan, silahkan kembali ke Rancangan --> tambah gadget-->> Pilih HTML/                  JavaScript, kemudian  copy dan paste kode dibawa kedalam  HTML/ JavaScript.
   
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
 <li><a href="#">Tutorial</a>
 <ul>
 <li><a href="#">Windows Tricks</a></li>
 <li><a href="#">Internet</a></li>
 <li><a href="#">Software</a></li>
 <li><a href="#">Microsoft Excel</a></li>
 <li><a href="#">Microsoft Word</a></li>
 <li><a href="#">Data recovery</a></li>
 <li><a href="#">Antivirus</a></li>
 </ul>
 </li>
 <li><a href="#">Blog</a>
 <ul>
 <li><a href="#">Blog Tips</a></li>
 <li><a href="#">SEO Tips</a></li>
 <li><a href="#">Adsense</a></li>
 <li><a href="#">Feed</a></li>
 </ul>
 </li>
 <li><a href="#">Phone Tips</a>
 <ul>
 <li><a href="#">Phone Secret Codes</a></li>
 <li><a href="#">Phone Screenshot</a></li>
 </ul>
 </li>
 <li><a href="#">Link</a>
 <ul>
 <li><a href="#">Artikel Komputer</a></li>
 <li><a href="#">Panduan SEO</a></li>
 </ul>
 </li>

 <li><a href="#">ArcGIS Tutorial</a></li>
<li><a href="#">Free Translator</a></li>
 <li><a href="#">Link Exchange</a></li>
 </ul>
 </div>


Keterangan :
Untuk tanda Pagar ( # )= anda isi gengan URL tujuan anda
Untuk Warna biru = anda isi dengan judul menu utama
Untuk warna  hijau = anda isi dengan bagian bagian /sub menu utama anda

Selamat mengulik.





0

Silahkan Tulis Komentar Anda ...