GRATIS Panduan ECourse Cara Membuat Landing Page 2023 bersama Agungnesia Klik Disini

Membuat dropdown page dibawah header

Mungkin ada banyak tutorial membuat drop down. akan tetapi cara berikut ini adalah cara yang sudah ane terapin dan cocok. Jadi ane rekomendasikan buat anda yang mungkin kebetulan mampir dan mencari cara untuk membuat drop down atau menu bertingkat untuk halaman atau page blogspot dibawah header.

  1. Sign in di blogger
  2. Klik Opsi lainnya
  3. Klik Templete
  4. klik Edit HTML
  5. Centang tulisan Expand Widget Templates
  6. Cari kode ]]></b:skin> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
  7. Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin>

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: #ff0000 repeat-x;width:980px;margin:0 auto;padding:0 auto} #menuwrapper{width:980px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#000000;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuaK7877HVXSCb5qny8lQGBzRP1uIi4Z1l_oxlgoFOuBzGpVJPCcuPf_ka4b9EjnddbQ6EWrFkIPD9bj96xuw26yjErTXzgpodkKPNVzMwHP0qSidI7lBIdBVtID8HzbZtTlfCdz1wqGI/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

8. Cari kode </header> dan paste kode dibawah ini dibawah kode tersebut

<div id='menuwrapperpic'>

<div id='menuwrapper'>

<ul id='menubar'>

<li><a href='nama-alamat-blog.html' target='new'>Home </a></li>

<li><a href='nama-alamat-blog.html' target='new'>Menu 1</a></li>

<li><a href='nama-alamat-blog.html' target='new'>Menu 2</a></li>

<li><a class='trigger'>Menu 3</a>

<ul>
<li class='hr'/>

<li><a href='nama-alamat-blog.html' target='new'>Sub Menu 3</a></li>

<li class='hr'/>

<li><a href='nama-alamat-blog.html'  target='new'>Sub Menu 3</a></li>

<li class='hr'/>

<li><a href='nama-alamat-blog.html'  target='new'>Sub Menu 3</a></li>

</ul>

</li>

<li><a class='trigger'>Menu 4</a>

<ul>
<li class='hr'/>

<li><a href='nama-alamat-blog.html'  target='new'>Sub Menu 4</a></li>

<li class='hr'/>

<li><a href='nama-alamat-blog.html'  target='new'>Sub Menu 4</a></li>

</ul>

</li>

</ul> <div class='menusearch'>

<div style='float:right;padding:8px 8px 0 0;'>

<form action='http://bloganda.blogspot.com/search' method='get' target=''>

<input name='sitesearch' style='display:none;' value='http://bloganda.blogspot.com'/>

<input id="search-box" name="q" size="25" type="text" style="background: #EEEDED; border: 1px solid #000000 "/>

<input id="search-btn" value="Search" type="submit"/>

</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

9. klik save dan lihat

Note : Jangan lupa untuk mengganti url dan alamat blog sesuai yang anda inginkan

Cara-cara yang saya publish disini hanyalah cara-cara yang ane pakai dan manjur di blog ane.

Sumber : http://ketutjoel.blogspot.com/2013/07/cara-membuat-menu-dropdown-dibawah-dan.html

Posting Komentar untuk "Membuat dropdown page dibawah header"