Tutorial Cara Membuat Menu DROPDOWN Pada Blog

Diposting oleh Raymond Warta Kurnia In ,

Apa kabar nih? pasti baik aik sajakan nah sahabat osaind kali ini saya akan share tips dan trik yaitu cara membuat menu drop down pada blog,.yang pasti dengan adanya menu dropdown bisa memperindah tampilan pada blog kita,memudahkan pengunjung mencari konten yang ada diblog kita banyak sekali tutorial yang ada untuk membuat menu drop down dan awalnya saya dulu juga kesusahan,setelah googling berkali kali hasilnya sangat tidak memuaskan akhirnya saya belajar sedikit demi sedikit, tentang html,.setelah rutin belajar saya baru mengerti bahwa dalam pengeditan blog sebenarnya kita sendiri yang harus berperan dan paham tentang html jika hanya copas saya yakin tidak akan berhasil. berhasilpun tidak menghasilkan kepuasan tersendiri jadi ketika kita belajar itu hanya sebagai referensi saja, apalagi baru baru ini blogger mengeluarkan tampilan baru jadi juga tak salah jika susah , nah kali ini saya hanya akan memberikan bagaimana caranya membuat menu dropdown

1. Masuk ke akun blogger agan -> klik Template -> Edit HTML





saya sarankan untuk mengcopy html pada notepad agar jika terjadi kesalahan tidak merusak blog, copy semua dan edit pada notepad jika sudah selesai kalian bisa mengcopy lagi di menu html blog 
 
2. Centang “Expand Widget Templates ”
3. Lalu agan cari kode ]]></b:skin> ( gunakan Ctrl + F untuk memudahkan proses pencarian )
4. Terus taruh script di bawah ini tepat diatas kode ]]></b:skin>

---------------------------------------------------------------------------------
#catmenucontainer{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlvFUce_sfsL85fahnm_7CA9Lys0NbLkN1IWg847tcTI1-O6sV0FgZuSRVl9l3E2pKGh9MLEGoRrEn9Sobw30sE5MGKiwlD3Lwr_7JdNrc32cmcUAvKr9Jg2mYNNkFpr3zF0AM8_gy5rN9/s1600/2.gif) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}
#catmenu{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3mwl1G0aNBwv9qj_5QKHZPAXmyP-clnGOxjaqaO2EZ1U3Z-RiC3dyyQH3NXJh9E3TMPN1eCOciuEmm8X1y9Y2328FHtGwDSTndXHbV_JvNNlK2pwHyyVEepbbf6rbuxlEmBJFJ6wz_j7u/) repeat-x;
height:33px;
}

#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}

#catmenu li a:hover, #catmenu li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAZnEab5egp9C5Poa3Wb3Mzf1CUl6hgQzPIooodDg-0tFMqq0PwAHbcCJm_NjhuwfrwB9Vmr1Ic-gzxWzLTWxDH-EkBmxVxCLuEzol_Y0bx_hpee37EvZoZTJd05-YcebaqeK1fBwCPWGL/) repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}

#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;

}

#catmenu li li a:hover, #catmenu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAZnEab5egp9C5Poa3Wb3Mzf1CUl6hgQzPIooodDg-0tFMqq0PwAHbcCJm_NjhuwfrwB9Vmr1Ic-gzxWzLTWxDH-EkBmxVxCLuEzol_Y0bx_hpee37EvZoZTJd05-YcebaqeK1fBwCPWGL/) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}

#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}

#catmenu li li {
}

#catmenu li ul a {
width: 140px;
}

#catmenu li ul a:hover, #catmenu li ul a:active {
}

#catmenu li ul ul {
margin: -34px 0 0 170px;
}

#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
left: -999em;
}

#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
left: auto;
}

#catmenu li:hover, #catmenu li.sfhover {
position: static;
}

-------------------------------------------------------------------------------
Kemudian cari <head>
dan copy script berikut dibawahnya

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
  <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='OSaind DYK (Header)' type='Header'>
  <b:includable id='main'>

  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
      <!--
      Show image as background to text. You can't really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width's worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->
      <b:if cond='data:mobile'>
          <div id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        <b:else/>
          <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        </b:if>
    <b:else/>
      <!--Show the image only-->
      <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        <!--Show the description-->
        <div class='description'>
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
          <b:include name='description'/>
        </b:if>
        </div>
        </b:if>
  <b:else/>
    <!--No header image -->
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
        <div class='description'>
        <b:include name='description'/>
        </div>
  </b:if>
</b:includable>
  <b:includable id='description'>
    <data:description/>
</b:includable>
  <b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
</b:widget>
</b:section>
          <b:section class='advert' id='advert' maxwidgets='1' showaddelement='yes'/>
<ul id='coolMenu'>
    <li><a href='http://osaind.blogspot.com'>Home</a></li>
    <li><a href='http://osaind.blogspot.com/search/label/About Blog'>About Blog</a></li>
    <li><a href='http://osaind.blogspot.com/search/label/Artikel'>Artikel</a></li>
    <li>
    <a href='http://osaind.blogspot.com/search/label/Anime'>Anime</a>
    <ul class='noJS'>
        <li><a href='http://osaind.blogspot.com/search/label/Naruto'>Naruto</a></li>
        <li><a href='http://osaind.blogspot.com/search/label/Bleach'>Bleach</a></li>
        <li><a href='http://osaind.blogspot.com/search/label/One Piece'>One Piece</a></li>
          <li><a href='http://osaind.blogspot.com/search/label/Fairy Tail'>Fairy Tail</a></li>
    </ul>
</li>
<li>
    <a href='http://osaind.blogspot.com/search/label/Download Games'>Download Games</a>
    <ul class='noJS'>
     <li><a href='http://osaind.blogspot.com/search/label/Game PC'>Game PC</a></li>
        <li><a href='http://osaind.blogspot.com/search/label/Emulator'>Emulator</a></li>
</ul>
</li>
<li>
    <a href='http://osaind.blogspot.com/search/label/Download Software'>Download Software</a>
    <ul class='noJS'>
    <li><a href='http://osaind.blogspot.com/search/label/Internet Utilities'>Internet Utilities</a></li>
    <li><a href='http://osaind.blogspot.com/search/label/Multimedia'>Multimedia</a></li>
      <li><a href='http://osaind.blogspot.com/search/label/Driver'>Driver</a></li>
    <li><a href='http://osaind.blogspot.com/search/label/Security'>Security</a></li>
    <li><a href='http://osaind.blogspot.com/search/label/Social Network'>Social Network</a></li>
</ul>
</li>
<li>
    <a href='http://osaind.blogspot.com/search/label/Tentang IT'>Tentang IT</a>
    <ul class='noJS'>
        <li><a href='http://osaind.blogspot.com/search/label/Blogging'>Blogging</a></li>
        <li><a href='http://osaind.blogspot.com/search/label/Emulator'>Emulator</a></li>
    <li><a href='http://osaind.blogspot.com/search/label/Multimedia'>Multimedia</a></li>
    <li><a href='http://osaind.blogspot.com/search/label/Tips Trick'>Tips Trick</a></li>
</ul>
</li>
</ul> 

-------------------------------------------------------------------------------------- 
#catmenucontainer{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlvFUce_sfsL85fahnm_7CA9Lys0NbLkN1IWg847tcTI1-O6sV0FgZuSRVl9l3E2pKGh9MLEGoRrEn9Sobw30sE5MGKiwlD3Lwr_7JdNrc32cmcUAvKr9Jg2mYNNkFpr3zF0AM8_gy5rN9/s1600/2.gif) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}
#catmenu{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3mwl1G0aNBwv9qj_5QKHZPAXmyP-clnGOxjaqaO2EZ1U3Z-RiC3dyyQH3NXJh9E3TMPN1eCOciuEmm8X1y9Y2328FHtGwDSTndXHbV_JvNNlK2pwHyyVEepbbf6rbuxlEmBJFJ6wz_j7u/) repeat-x;
height:33px;
}
#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}
#catmenu li a:hover, #catmenu li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAZnEab5egp9C5Poa3Wb3Mzf1CUl6hgQzPIooodDg-0tFMqq0PwAHbcCJm_NjhuwfrwB9Vmr1Ic-gzxWzLTWxDH-EkBmxVxCLuEzol_Y0bx_hpee37EvZoZTJd05-YcebaqeK1fBwCPWGL/) repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}
#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;
}
#catmenu li li a:hover, #catmenu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAZnEab5egp9C5Poa3Wb3Mzf1CUl6hgQzPIooodDg-0tFMqq0PwAHbcCJm_NjhuwfrwB9Vmr1Ic-gzxWzLTWxDH-EkBmxVxCLuEzol_Y0bx_hpee37EvZoZTJd05-YcebaqeK1fBwCPWGL/) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}
#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}
#catmenu li li {
}
#catmenu li ul a {
width: 140px;
}
#catmenu li ul a:hover, #catmenu li ul a:active {
}
#catmenu li ul ul {
margin: -34px 0 0 170px;
}
#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
left: -999em;
}
#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
left: auto;
}
#catmenu li:hover, #catmenu li.sfhover {
position: static;
}
- See more at: http://langkah2membuatblog.blogspot.com/2012/11/cara-membuat-menu-dropdown-di-bawah.html#sthash.9IRiyCrI.dpuf
Ganti tulisan merah dengan alamat blog kalian
dan warna hijau dengan judul menu dropdown kalian
kalian bisa mengedit sendiri dengan menambahkan menu dan submenu dengan menulis sendiri seperti contoh script dan dengan format yang sama

jika ada yan kurang jelas anda bisa tinggalkan komentar
 
di Rabu, Februari 12, 2014