-pertama buka dasbor blog kamu, trus sorot kursor pada panah dan cari 'tata letak" kemudian klik sehingga akan tampak tampilan seperti ini
kemudian klik tambah gatget,( jangan lupa pilih yang paling atas persis dibawah header)
kemudian pilih tambah java script
lalu copy kode dibawah ini terus paste ke kotak konten java script pada blog kamu..
kemudian simpan, selesai dehhh
silahkan di coba, kalau berhasil tampilannya akan seperti punya saya lihat menu navigasi yang diatas itu....
oh ya jangan upa untuk menganti nama menu dan menghapus yang tidak diperlukan, untuk link yang ingin kamu tautkan masukkan pada tanda #( tanda # nya dihapus lho)
selamat mencoba dan semoga berhasil
<style>
#menunavigasihorisontal {
background: #4169E1;
width: 75%;
color: #FF5600;
margin: 10px 0;
padding: 0;
position: relative;
border-top:0px solid #FA8072;
height:30px; }
#bb2nav {
margin: 0;
padding: 0;}
#bb2nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;}
#bb2navli {
list-style: none;
margin: 0;
padding: 0;}
#bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {
color: #FFF;
display: block;
font:bold 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 11px 12px;
text-decoration: none;
border-right:0px solid #627AAD;}
#bb2nav li a:hover, #bb2nav li a:active {
background: #2E9AFE;
color:#7FFF00;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 11px 12px;}
#bb2nav li {
float: left;
padding: 0;}
#bb2nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;}
#bb2nav li ul a {
width: 140px;}
#bb2nav li ul ul {
margin: -25px 0 0 161px;}
#bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav
li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {
left: -999em;}
#bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li
li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav
li li li.sfhover ul {
left: auto;}
#bb2nav li:hover, #bb2nav li.sfhover {
position: static;}
#bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {
background:#FFEBCD;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 1px 0 0 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
-moz-border-radius:4px;
-webkit-border-radius:4px;}
#bb2nav li li a:hover, #bb2nav li li a:active {
background: #627AAD;
color: #FFF;
display: block;}
#bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li
a:visited {
background: #7FFF00;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
margin: 1px 0 0 -14px;}
#bb2nav li li li a:hover, #bb2nav li li li a:active {
background:#7FFF00;
color: #FFF;
display: block;}
</style>
<div id='menunavigasihorisontal'>
<ul id='bb2nav'>
<li>
<a
href='http://mandkasan.blogspot.com/#'>BERANDA</a>
</li>
<li>
<a
href='http://mandkasan.blogspot.com/2013/02/profil.html'>KULO</a>
</li>
<li>
<a href='#'>KESEHATAN ▼</a>
<ul>
<li><a href='#'>UMUM</a></li>
<li><a href='#'>TIPS</a></li>
<li>
</li></ul>
</li>
<li>
<a href='#'>BLOG ▼</a>
<ul>
<li><a href='#'>TUTORIAL</a></li>
<li><a href='#'>BELAJAR</a></li>
<li><a href='#'>NGEBLOG</a></li>
</ul>
</li>
<li>
<a href='#'>CERITO ▼</a>
<ul>
<li><a href='http://mandkasan.blogspot.com/2013/02/sejarah-hidup-nabi-muhammad-saw.html'>NABI MUHAMMAD</a></li>
<li><a href='#'>INSPIRATIF</a></li>
<li><a href='#'>LUCU</a></li>
<li><a href='#'>HOT/PUANAS</a></li>
</ul>
</li>
<li>
<a href='#'>WEJANGAN ▼</a>
<ul>
<li><a href='#'>SOFTWERE</a></li>
<li><a href='#'>REPARASI</a></li>
<li><a href='#'>Sub Halaman 3</a></li>
<li><a href='#'>Sub Halaman53</a></li>
</ul>
</li>
<li>
<a href='#'>MAKALAH
▼</a> <ul>
<li><a href='#'>FIQIH</a></li>
<li><a href='#'>KALAM</a></li>
<li><a href='#'>UMUM</a></li>
<li><a href='#'>DESIGN</a></li>
<li><a href='#'>HADITS</a></li>
<li><a href='#'>PSIKOLOGI</a></li>
<li><a href='#'>KURIKULUM</a></li>
<li><a href='#'>SAKKAREP-KAREPKU</a></li>
<ul>
</ul>
</ul></li>
<li>
</li></ul></div>
#menunavigasihorisontal {
background: #4169E1;
width: 75%;
color: #FF5600;
margin: 10px 0;
padding: 0;
position: relative;
border-top:0px solid #FA8072;
height:30px; }
#bb2nav {
margin: 0;
padding: 0;}
#bb2nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;}
#bb2navli {
list-style: none;
margin: 0;
padding: 0;}
#bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {
color: #FFF;
display: block;
font:bold 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 11px 12px;
text-decoration: none;
border-right:0px solid #627AAD;}
#bb2nav li a:hover, #bb2nav li a:active {
background: #2E9AFE;
color:#7FFF00;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 11px 12px;}
#bb2nav li {
float: left;
padding: 0;}
#bb2nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;}
#bb2nav li ul a {
width: 140px;}
#bb2nav li ul ul {
margin: -25px 0 0 161px;}
#bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav
li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {
left: -999em;}
#bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li
li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav
li li li.sfhover ul {
left: auto;}
#bb2nav li:hover, #bb2nav li.sfhover {
position: static;}
#bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {
background:#FFEBCD;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 1px 0 0 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
-moz-border-radius:4px;
-webkit-border-radius:4px;}
#bb2nav li li a:hover, #bb2nav li li a:active {
background: #627AAD;
color: #FFF;
display: block;}
#bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li
a:visited {
background: #7FFF00;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
margin: 1px 0 0 -14px;}
#bb2nav li li li a:hover, #bb2nav li li li a:active {
background:#7FFF00;
color: #FFF;
display: block;}
</style>
<div id='menunavigasihorisontal'>
<ul id='bb2nav'>
<li>
<a
href='http://mandkasan.blogspot.com/#'>BERANDA</a>
</li>
<li>
<a
href='http://mandkasan.blogspot.com/2013/02/profil.html'>KULO</a>
</li>
<li>
<a href='#'>KESEHATAN ▼</a>
<ul>
<li><a href='#'>UMUM</a></li>
<li><a href='#'>TIPS</a></li>
<li>
</li></ul>
</li>
<li>
<a href='#'>BLOG ▼</a>
<ul>
<li><a href='#'>TUTORIAL</a></li>
<li><a href='#'>BELAJAR</a></li>
<li><a href='#'>NGEBLOG</a></li>
</ul>
</li>
<li>
<a href='#'>CERITO ▼</a>
<ul>
<li><a href='http://mandkasan.blogspot.com/2013/02/sejarah-hidup-nabi-muhammad-saw.html'>NABI MUHAMMAD</a></li>
<li><a href='#'>INSPIRATIF</a></li>
<li><a href='#'>LUCU</a></li>
<li><a href='#'>HOT/PUANAS</a></li>
</ul>
</li>
<li>
<a href='#'>WEJANGAN ▼</a>
<ul>
<li><a href='#'>SOFTWERE</a></li>
<li><a href='#'>REPARASI</a></li>
<li><a href='#'>Sub Halaman 3</a></li>
<li><a href='#'>Sub Halaman53</a></li>
</ul>
</li>
<li>
<a href='#'>MAKALAH
▼</a> <ul>
<li><a href='#'>FIQIH</a></li>
<li><a href='#'>KALAM</a></li>
<li><a href='#'>UMUM</a></li>
<li><a href='#'>DESIGN</a></li>
<li><a href='#'>HADITS</a></li>
<li><a href='#'>PSIKOLOGI</a></li>
<li><a href='#'>KURIKULUM</a></li>
<li><a href='#'>SAKKAREP-KAREPKU</a></li>
<ul>
</ul>
</ul></li>
<li>
</li></ul></div>
kemudian simpan, selesai dehhh
silahkan di coba, kalau berhasil tampilannya akan seperti punya saya lihat menu navigasi yang diatas itu....
oh ya jangan upa untuk menganti nama menu dan menghapus yang tidak diperlukan, untuk link yang ingin kamu tautkan masukkan pada tanda #( tanda # nya dihapus lho)
selamat mencoba dan semoga berhasil
Tidak ada komentar:
Posting Komentar