Menambahkan Menu horizontal di blog
Diposting oleh karya anak bangsa Label: TutorialApa yang dimaksud dengan menu horizontal? jawabannya sederhana yaitu menu-menu sebuah blog/web yang berjajar mendatar, ya seperti blog saya ini ada menu horizontalnya.
apa manpaat menu horizontal? tentu banyak, salah satunya membuat isi blog anda akan kelihatan tersusun dengan menu horizontal ini, kemudian tentu akan mempercantik blog sobat juga, dan masih banyak lagi.
Jika sobat membuat blog, kemudian masih menggunakan template bawannya, tentu tidak tersedia menu horizontal seperti pada blog saya ini, Atau ketika sobat memakai template yang sobat download secara gratisan dan pada template tersebut belum ada menu horizontalnnya, sobat bisa menambahkannya dengan mengikuti petunjuk di bawah ini.
ganti juga kode script yang berwarna hijaw dan merah jika merasa menu horizontal yang dibuat kurang sesuai dengan template blog sobat.
</b:section>
</div>
Blog yang berisikan segala macam informasi seperti bisnis, investasi, kesehatan, musik, politik, olahraga, dsb. ARTIKEL SELANJUTNYA.....
SILAHKAN BERKOMENTAR DITEMPAT YANG DISEDIAKAN, DAN JANGAN SPAM KAWANKU HEHEHE
apa manpaat menu horizontal? tentu banyak, salah satunya membuat isi blog anda akan kelihatan tersusun dengan menu horizontal ini, kemudian tentu akan mempercantik blog sobat juga, dan masih banyak lagi.
Jika sobat membuat blog, kemudian masih menggunakan template bawannya, tentu tidak tersedia menu horizontal seperti pada blog saya ini, Atau ketika sobat memakai template yang sobat download secara gratisan dan pada template tersebut belum ada menu horizontalnnya, sobat bisa menambahkannya dengan mengikuti petunjuk di bawah ini.
- Masuk ke blog kamu.
- Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".
- Cari Kode kode ]]></b:skin>
- kemudian simpan script di bawah ini sebelum kode ]]></b:skin>
/* navbar
================== */
#bg_nav {
background: #ffffff;
width: 850px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #ffffff;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #000000;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#bg_nav a:hover {
color: #000000;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}
#navleft {
width: 500px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav a, #nav a:visited {
background: #ffffff;
color: #000000;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #ffffff;
}
#nav a:hover {
background: #c06000;
color: #000000;
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: #ffffff;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
background: #c06000;
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;
}
850px adalah panjang menu ganti untuk menyesuaikan dengan blog sobat================== */
#bg_nav {
background: #ffffff;
width: 850px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #ffffff;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #000000;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#bg_nav a:hover {
color: #000000;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}
#navleft {
width: 500px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav a, #nav a:visited {
background: #ffffff;
color: #000000;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #ffffff;
}
#nav a:hover {
background: #c06000;
color: #000000;
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: #ffffff;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
background: #c06000;
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;
}
ganti juga kode script yang berwarna hijaw dan merah jika merasa menu horizontal yang dibuat kurang sesuai dengan template blog sobat.
- Kemudian cari kembali kode seperti di bawah ini
<div id='header-wrapper'>
... dan seterusnya sampai ke ...<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='true' title='test
(Header)' type='Header'/>
</b:section>
</div>
- Jika sudah di temukan simpan script di bawah ini tepat di bawah kode yang berwarna biru atau berwarna merah (sesuaikan dengan template blog kamu).
<div id='bg_nav'>
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://www.tipskom.co.cc'>home</a></li>
<li><a href='http://Link_yang_dituju'>Nama Link</a></li>
<li><a href='http://Link_yang_dituju'>Nama Link</a></li>
</ul>
</div>
</div>
<div id='navright'>
<form action='http://www.tipskom.co.cc/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>
</form>
</div>
</div><!-- ujung bg_nav -->
Catatan : ganti www.tipskom.co.cc dengan alamat blog sobat, ganti juga Link_yang_dituju dan Nama Link sesuaikan dengan menu yang sobat inginkan.<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://www.tipskom.co.cc'>home</a></li>
<li><a href='http://Link_yang_dituju'>Nama Link</a></li>
<li><a href='http://Link_yang_dituju'>Nama Link</a></li>
</ul>
</div>
</div>
<div id='navright'>
<form action='http://www.tipskom.co.cc/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>
</form>
</div>
</div><!-- ujung bg_nav -->
- Terakhir klik Simpan
