Setelah sekian lama vakum karena kesibukan di kampus, di sela-sela waktu senggang saya sempatkan untuk mempublikasikan tutorial ini untuk menjawab pertanyaan teman saya tentang bagaimana membuah menu bar di blogspot. simak ulasannya di bawah ini :
Tutorial ini saya sajikan apabila kita
menggunakan template default (standar) dari blogger. dengan penambahan menu navigasi tersebut blog kita akan semakin elegan.
1.
Seperti biasa login dulu di
akun
2.
Pilih template dan
klik edit HTML dan lanjutkan
3.
Sobat cari kode
]]></b:skin> dan letakkan kode berikut tepat di atas kode ]]></b:skin>
untuk mempermudah pencariah tekan CTRL + F
#menu{
position:absolute;top:130px;
/*posisi Menu navigasi*/
clear:
both;
width:
900px;
height:
37px;
overflow:hidden;
margin:
0px 0px 10px 0px;;
padding:
0px;
border:0px
solid; border-color:black;
background: #2f2828; /*warna baground navigasi*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:5px;
}
.menuleft {
float:
left;
height:37px;
width:
10px;
}
.menuright {
float:
right;
height:37px;
width:
10px;
}
#menu ul {
margin:
0;
padding:
0px 0px 0px 15px;
list-style:
none;
text-align:
center;
font-family:'Segoe
UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif;
/*font
menu navigasi*/
font-size:
13px;
color:
#FFFFFF;
}
#menu ul li a {
float: left;
padding: 10px;
color: #FFFFFF; /*Warna font menu*/
text-decoration: none;
display: block;
height: 17px;
border: 1px solid #717171; /*pembatas navigasi*/
border-top: 0px;
border-bottom: 0px;
border-left: 0px;
}
#tmenu ul li a:visited{
color:
#5d5b5b;
}
#menu ul li a:hover, #menu ul li .current{
color:
#ffffff;
text-decoration:
none;
background:
#4b4848;
}
4.
Selanjutnya sobat blogger cari
kode berikut:
· <header> : untuk menempatkan menu di atas nama blog
· </header> : untuk
menempatkan menu di bawah nama blog
Jike kedua kode
di atas tidak ditemukan carilah kode <div id='content-wrapper'>
4.
Copy kode di bawah ini dan
letakkan tepat di atas kode <header> atau di bawah kode </header>
Atau <div id='content-wrapper'>
<div id='menu'>
<ul class='menunav
superfish'>
<li><a
href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSiLrW2h6elZvXKkrAcau5gnTI-lgVmfkBxzwal1Qo5aySTpslil7C7kg6lRdj2uu5nTsuzYTVnMSTU7n8NhrEF8Q7JcedFgvCQmLcuheWVnayDCipGgV5uuW_avF9EsVL5tn0c_3LiZw/s1600/home_white.png'
style='padding:0px;'/> Home</a></li>
<li class='page_item
page-item-2'><a
href='http://dempobarat.blogspot.com/2013/05/dowload-gratis-kbbi-offline-terbaru-2013.html'
title='About'>Download</a></li>
<li class='page_item
page-item-3'><a href='mailto:#'
title='Contact'>About</a></li></ul>
selamat mencoba,,,,,!
semoga bermamfaat bagi sahabat blogger
.jpg)
