Rabu, 25 April 2012

Tutorial cara membuat menu dropdown di blog


CARANYA MUDAH LOH.....:


1. Masuk dulu ke akun blogger anda
2. Setelah berada di Dashboard Klik Design --> Edit HTML
3. Backup Dulu Template anda dengan mengKlik Download Full Template
(Terserah anda Ya atau Tidak.tapi lebih baik Ya)
3. Centang Expand Template Widget
4. Cari Kode ]]></b:skin> 
5. Copy-Paste Kode CSS dibawah tepat Di Atas ]]></b:skin>
#subnavbar {
                background: #ffffff;
                width: auto;
                height: 26px;
                color: #FFF;
                margin: 0;
                padding: 0;
    }
    #subnav {
                margin: 0;
                padding: 0;
    }
    #subnav ul {
                float: left;
                list-style: none;
                margin: 0;
                padding: 0;
    }
    #subnav li {
                list-style: none;
                margin: 0;
                padding: 0;
    }
    #subnav li a, #subnav li a:link, #subnav li a:visited {
                color: #000000;
                display: block;
                font-size: 11px;
                font-weight: bold;
                text-transform: uppercase;
                margin: 0 5px 0 0;
                padding: 6px 13px;
    }
    #subnav li a:hover, #subnav li a:active {
                background: #888;
                color: #FFF;
                display: block;
                text-decoration: none;
                margin: 0 5px 0 0;
                padding: 6px 13px;
    }
    #subnav li li a, #subnav li li a:link, #subnav li li a:visited {
                background: #666;
                width: 140px;
                float: none;
                margin: 0;
                padding: 6px 10px;
                border-bottom: 1px solid #FFF;
                border-left: 1px solid #FFF;
                border-right: 1px solid #FFF;
    }
    #subnav li li a:hover, #subnav li li a:active {
                background: #888;
                margin: 0;
                padding: 6px 10px;
    }
    #subnav li {
                float: left;
                padding: 0;
    }
    #subnav li ul {
                z-index: 9999;
                position: absolute;
                left: -999em;
                height: auto;
                width: 160px;
                margin: 0;
                padding: 0;
    }
    #subnav li ul a {
                width: 140px;
    }
    #subnav li ul ul {
                margin: -25px 0 0 161px;
    }
    #subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
                left: -999em;
    }
    #subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
                left: auto;
    }
    #subnav li:hover, #subnav li.sfhover {
                position: static;
    }
 
6. Setelah Itu Cari Kode <b:widget id='Header1' locked='true'
Contoh :
<b:section class='art-header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='RezDown7 (Header)' type='Header'/>
</b:section>
7. Copy-Paste Kode HTML yang tersedia dibawah ini tepat di bawah kode </b:section> jika ingin menempatkan Di Bawah Header, Jika ingin menempatkan di atas header paste kode di bawah ini tepat Di Atas kode <b:section class='art-header' id='header' maxwidgets='1' showaddelement='no'>
<div id='subnavbar'>
          <ul id='subnav'>
    <span style='font-weight: bold; text-shadow: 3px 3px 3px rgb(204, 204, 204);'><li>
    <a href='http://najib-hunters.blogspot.com/'>Home</a>
    <ul>
    <li>
    <a href='http://najib-hunters.blogspot.com/'>HomePage</a>
    </li>           
    </ul>
    </li>

<li>
<a href='http://najib-hunters.blogspot.com/'>Artikel n Tutorial</a>
    <ul>
    <li>
    <a href='http://najib-hunters.blogspot.com/'>Tutorial</a>
    </li><ul>
    <li>
    <a href='http://najib-hunters.blogspot.com/'>Blogspot</a>
    </li></ul>
    <li>
    <a href='http://najib-hunters.blogspot.com/'>Artikel</a>
    </li>
   
<li>
    <a href='http://najib-hunters.blogspot.com/'>Islami</a>
    </li><li>
    <a href=http://najib-hunters.blogspot.com/'>NusantaraQ</a>
    </li><li>
    <a href='http://najib-hunters.blogspot.com/'>Indo. News</a>
    </li></ul></li>


</ul></li>
<li>
    <a href='http://najib-hunters.blogspot.com/'>PlayList</a>
    </li><li>
    <a href='http://najib-hunters.blogspot.com/'>Daftar Isi</a>
    </li>
<li>
    <a href='http://najib-hunters.blogspot.com/'><b>Link Exchange</b></a>
    </li></span></ul></div>
 Untuk Link Dan Titlenya Silahkan Di Edit Sendiri :D

Tidak ada komentar:

Posting Komentar