Cara Membuat Menu Horizontal Dropdown di Blogspot
Selasa, 07 Februari 2012
0
komentar
Kesempatan Kali Ini saya akan membagikan cara membuat/menambahkan Menu Horizontal Dropdown di blog kita..fungsinya menurut saya adalah sebagai pelengkap blog kita dan sebagai fasiitas untuk mempermudah pengunjung menjelajahi blog kita. okey kita langsung saja lihat contohnya pada gambar di bawah atau lihat menu horizontal yang saya gunakan
Caranya Cukup Mudah Yaitu :
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
(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='#'>Home</a>
<ul>
<li>
<a href='#'>HomePage</a>
</li>
</ul>
</li>
<li>
<a href='#'>Download Movie</a>
</li>
<li>
<a href='#'>Download Mp3</a>
<ul>
<li>
<a href='#'>Lagu Indo.</a>
</li>
<li>
<a href='#'>Religi</a>
</li>
<li>
<a href='#'>Western</a>
</li>
</ul></li>
<li>
<a href='#'>Download Software</a>
<ul>
<li>
<a href='#'>Tools</a>
</li>
<li>
<a href='#'>Security</a>
</li>
<li>
<a href='#'>Multimedia n Desaign</a>
</li>
<li>
<a href='#'>Musik</a>
</li>
<li>
<a href='#'>Internet</a>
</li>
<li>
<a href='#'>Drivers</a>
</li>
<li>
<a href='#'>Utilities</a>
</li>
</ul></li>
<li>
<a href='#'>Artikel n Tutorial</a>
<ul>
<li>
<a href='#'>Tutorial</a>
</li><ul>
<li>
<a href='#'>Blogspot</a>
</li></ul>
<li>
<a href='#'>Artikel</a>
</li>
<li>
<a href='#'>Islami</a>
</li><li>
<a href='#'>NusantaraQ</a>
</li><li>
<a href='#'>Indo. News</a>
</li></ul></li>
<li>
<a href='#'>Tv Online</a>
<ul>
<li>
<a href='#'>Tv One</a>
</li>
<li>
<a href='#'>Antv</a>
</li>
<li>
<a href='#'>Tv Islam</a>
</li>
<li>
<a href='#'>Mivo.Tv</a>
</li>
<li>
<a href='#'>Indoweb.Tv</a>
</li>
</ul></li>
<li>
<a href='#'>PlayList</a>
</li><li>
<a href='http://www.rizkyariff.co.vu/2011/04/link-exchange.html'>Link Exchange</a>
</li><li>
<a href='http://www.rizkyariff.co.vu/2012/02/cara-membuat-menu-horizontal-dropdown.html'><b><blink>FULLKA DOT</blink></b></a>
</li></span></ul></div>
Untuk Link Dan Titlenya Silahkan Di Edit Sendiri :D
Ganti Tanda # ( Biru ) Dengan Link Anda Sendiri
Sekian Dulu Dari Saya
Lebih dan Kurangnya Tolong Di Maafkan,hehe Jika Terdapat Kesalahan Silahkan Di Laporkan
Mudah2n Apa Yang Saya Bagikan Bisa Bermanfaat Buat Sahabat
Terima Kasih.
Lebih dan Kurangnya Tolong Di Maafkan,hehe Jika Terdapat Kesalahan Silahkan Di Laporkan
Mudah2n Apa Yang Saya Bagikan Bisa Bermanfaat Buat Sahabat
Terima Kasih.
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Cara Membuat Menu Horizontal Dropdown di Blogspot
Ditulis oleh Unknown
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://azharadzuan.blogspot.com/2012/02/cara-membuat-menu-horizontal-dropdown.html. Terima kasih sudah singgah membaca artikel ini.Ditulis oleh Unknown
Rating Blog 5 dari 5
Categories:
Trik dan Tips Blog
0 komentar:
Posting Komentar