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

• Tweet
• Share
• Share
• Share
• Share

TERIMAKASIH SUDAH BERKUNJUNG Afrizal Sulaiman

Semoga artikel yang saya bagikan bisa membantu dan bermanfaat bagi sobat yang membacanya. Jangan lupa untuk di-share ya. Jika ada yang kurang jelas atau ada yang ingin ditambahkan silahkan tulis di kolom komentar.

Related Post