Asslamu'alaikum.....Melanjutkan yang kemarin, Untuk kali ini saya mau berbagi cara membuat
Menu Horisontal yang beberapa hari kemarin teman teman saya ingin tahu caranya.
Sebenarnya pada banyak templet baru Menu sudah tersedia, tetapi kadang kita tidak puas karena bukan hasil modif sendiri, okey sipakan Tang dan obeng, he...heee gak nyambung :-) magsudnya sipakan koneksi internet tentunya. lansung aja :
Lamhkah Pertama
1.Loggin ke blogger
2. Pada dasbor klik tata letak
3. klik edit HTML kemudian cari kode ]]>
4. kemudian letakkan kode berikut diatas ]]>
/* navbar
================== */
#bg_nav {
background: #000000;
width: 660px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFFFFF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #FFFFFF;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#bg_nav a:hover {
color: #FFFFFF;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}
#navleft {
width: 440px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 200px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 0px;
}
#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav a, #nav a:visited {
background: #222222;
color: #FFFFFF;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #000000
}
#nav a:hover {
background: #6e6d6d;
color: #FFFFFF;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}
#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #333333;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
#nav li li a:hover, #nav li li a:active {
background: #666666;
padding: 7px 30px 7px 10px;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}
#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
Sesuaikan lebarnya dengan templete blog kamu width: 660px; dibagian #bg_nav ganti dengan ukuran blog kamu.
kemudian cari kode berikut :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
lalu copas scrip berikut dibwahnya :
<div id='bg_nav'>
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://www.blogspottutorial.com/'>home</a></li>
<li><a href='http://www.kangrohman.com/'>My Notes</a></li>
<li><a href='http://template-unik.blogspot.com/'>Free Template</a></li>
<li><a href='http://rubrik-elektronik.blogspot.com/'>Electronic Rubric </a></li>
</ul>
</div>
</div>
<div id='navright'>
<form action='http://setyacel.blogspot.com/search' id='searchform' method='get' name='searchform'>
<input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Search'/> </form>
</div>
</div><!-- akhir bg_nav -->
silahkan kamu ganti tulisan HOME,MY NOTE,FREE TEMPLETE dengan tulisan yang kamu inginkan dan gati juga linknya contoh www.blogspottutorial.com dengan link kamu
untuk kotak search silahkan ganti setycel.blogspot.com dengan link kamu.
klik pratinjau...
jika jadi maka menu akan muncul..
selamat mencoba...
ya kan... langsung aja jangan pikir panjang lagi yuk di praktekan...
