Assalaamu'alaikum..sahabatku semua. Kali ini kita akan mencoba cara membuat menu navigasi pada blogspot sahabat. Disamping akan terlihat indah, blog sahabat juga akan terlihat rapi dan yang pasti blog sahabat tidak berantakan.
Oiya..berdasarkan pengalaman saya sendiri setelah men-surfing kesana kemari akhirnya menemukan banyak cara dan metode membuat menu navigasi pada blog. Diantara sekian banyak cara tersebut, kali ini saya akan menampilkan cara membuat menu yang cukup simple dan mudah. Dimana sahabat cukup meletakkan kode-kode tersebut pada widget.
Berikut langkah membuat menu blog :
1. Login ke blog sahabat,
2. Masuk Dashboard terus Pilih tata letak trus Tambahkan gadget > pilih HTML/Javascript. (silahkan di-paste-kan kode di bawah ini ya....)
<style>
#menunavigasihorisontal {
background: #848484;
width: 100%;
color: #FFF;
margin: 10px 0;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px; }
#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: #FFF;
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: #EDEFF4;
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: #EDEFF4;
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: #627AAD;
color: #FFF;
display: block;}
</style>
<div id='menunavigasihorisontal'>
<ul id='bb2nav'>
<li>
<a href='http://nagariblogger.blogspot.com/'>Home</a>
</li>
<li>
<a href='http://nagariblogger.blogspot.com/'>Menu1</a>
</li>
<li>
<a href='http://nagariblogger.blogspot.com/'>Menu2</a>
</li>
<li>
<a href='http://nagariblogger.blogspot.com/'>Menu3</a>
</li>
</ul>
</div>
3. Silahkan ganti alamat url yang berwarna BIRU dengan alamat url sahabat ya.....
4. Trus label menu yang berwarna HIJAU sahabat ganti dengan label menu yang sahabat inginkan....
5. Setelah itu safe...
nah..selesai deh menunya....gampang bukan....
0 komentar:
Posting Komentar