Cara Membuat Menu Drop Down di Blogger

Cara Membuat Menu Drop Down di Blogger - Menu Dropdown pada blog sangat berguna selain agar tampilan blog menjadi lebih menarik, juga mempermudah pengunjung dalam memilih artikel, halaman dengan kategori dan menu-menu yang sudah kita buat.



Kali ini LenSul akan membahas mengenai bagaimana cara membuat menu dropdwon di blogspot

1. Masuk ke akun Blogger sobat


2. Pilih menu Template > klik Edit HTML


3. Lalu letakkan kode CSS di bawah ini tepat di atas ]]></b:skin> atau </style>
   
   
   
   #navigationbar {
   
   width: 100%; /* change the width of the navigation bar */
   
   height: 35px; /* change the height of the navigation bar */
   
   }
   
   
   
   #navigationcss {
   
   margin: 0 auto;
   
   padding: 0;
   
   }
   
   
   
   #navigationcss ul {
   
   float: none;
   
   list-style: none;
   
   margin: 0;
   
   padding: 0;
   
   overflow: visible;
   
   }
   
   
   
   #navigationcss li a, #navigationcss li a:link, #navigationcss li a:visited {
   
   color: #ffffff; /* change color of the main links */
   
   display: block;
   
   margin: 0;
   
   padding: 10px 30px;  /* change the first number for the top/bottom spacing, and the second number for left/right spacing */
   
   }
   
   
   
   #navigationcss li a:hover, #navigationcss li a:active {
   
   color: #00BFFF ; /* change the color of the links when hovered over */
   
   margin: 0;
   
   padding: 10px 30px; /* make sure these are the same as the section above! */
   
   }
   
   
   
   #navigationcss li li a, #navigationcss li li a:link, #navigationcss li li a:visited {
   
   background: #ffffff;  /* change the background color of the drop down box */
   
   width: 150px;
   
   color: #000000; /* change the color of the drop down links */
   
   float: none;
   
   margin: 0;
   
   padding: 7px 10px; /* similar to above, change for the spacing around the links */
   
   }
   
   
   
   #navigationcss li li a:hover, #navigationcss li li a:active {
   
   background: #00BFFF ; /* change the background color of drop down items on hover */
   
   color: #ffffff; /* change the color of drop down links on hover */
   
   padding: 7px 10px;  /* keep these the same as the above section */
   
   }
   
   
   
   #navigationcss li {
   
   float: none;
   
   display: inline-block;
   
   list-style: none;
   
   margin: 0;
   
   padding: 0;
   
   }
   
   
   
   #navigationcss li ul {
   
   z-index: 9999;
   
   position: absolute;
   
   left: -999em;
   
   height: auto;
   
   width: 150px;
   
   margin: 0;
   
   padding: 0;
   
   }
   
   
   
   #navigationcss li:hover ul, #navigationcss li li:hover ul, #navigationcss li li li:hover ul, #navigationcss li.sfhover ul, #navigationcss li li.sfhover ul, #navigationcss li li li.sfhover ul {
   
   left: auto;
   
   }
   
   


4. Selanjutnya masuk ke Tata Letak > Tambah Widget > HTML, copy-kan kode berikut
   
   
   
   <!--Start Navigation -->
   
   <div id="navigationbar">
   
   <ul id='navigationcss'>
   
   <li><a href="#">Home</a></li>
   
   <li><a href="#/">Menu</a>
   
   <ul>
   
   <li><a href="#">sub menu 1</a></li>
   
   <li><a href="#">sub menu 2</a></li>
   
   <li><a href="#">sub menu 3</a></li>
   
   </ul>
   
   </li>
   
   <li><a href="#">Contact</a>
   
   <ul>
   
   <li><a href="#">About</a></li>
   
   <li><a href="#">Other Sites</a></li>
   
   </ul>
   
   </li>
   
   
   
   </ul>
   
   </div> 
   
   <!--End Navigation -->
   
   

 *ganti tanda # dengan url blog sobat, misal : <li><a href="http://lensul.blogspot.com/">Home</a></li>



Demikianlah Cara Membuat Menu Drop Down pada Blogger. Semoga membantu dan bermanfaat bagi sobat yang membacanya. Jika ada yang kurang jelas silahkan tulis di kolom komentar