Tulisan Dika

Selamat sore, gimana kabar sobat tulisan-dika sekalian???tentunya baik lah

di kesempatan ini saya kebetulan baru selesai membuat menu horizontal baru saya nih dan saya bermaksud untuk memberi tahu cara membuatnya kepada sobat semua, sebelumnya apa sih menu horizontal itu???

Menu horizontal adalah kumpulan beberapa link yang diletakkan secara berkelompok dan biasanya diletakkan dibawah header suatu website.
hmm kali ini kita akan membuat suatu menu horizontal yang ada search engine-nya, jadi praktis de sob, tapi dalam versi sederhana saja yah.. hehe
pokoknya dengan adanya menu horizontal di dalam blog sobat, pengunjung merasa dimudahkan deh blogwalking-nya karena bisa dengan terarah ke artikel-artikel sobat lewat menu horizontal yang berupa shortcut gitu sob...

yasudah langsung saja yah, disimak biar gampang ok..

• Login ke Blogger sobat
• di menu dasboard pilih rancangan
• lalu edit HTML
• tandai kotak disamping tulisan expand template widgets
• biar mudah tekan tombol ctrl+F dan cari kode ]]></b:skin>
• kalau sudah ketemu, copy kode berikut dan letakkan diatas 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;
}

• Silahkan sobat semua, ganti kode bewarna merah dengan kode warna yang anda inginkan, dan kode biru untuk ukuran yang anda inginkan
• lalu tekan ctrl+F lagi dan 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'/>

... dan seterusnya ...

</b:section>
</div>

• untuk para sobat kode blogger kalian pasti berbeda-beda, kode bewarna merah coba anda cari untuk akhiran script diatas, jika tidak ada, mungkin cari kode biru untuk akhiran script diatas.
• copy kode berikut dan letakkan dibawah persis kode yang bewarna merah atau biru. (kode warna merah atau biru di sesuaikan dengan template anda)

<div id='bg_nav'>

<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
<li><a href='http://Link_yang_dituju'>Nama</a></li>
<li><a href='http://Link_yang_dituju'>Nama</a></li>
<li><a href='http://Link_yang_dituju'>Nama</a></li>
<li><a href='http://Link_yang_dituju'>Nama</a></li>
</ul>
</div>
</div>

<div id='navright'>

<form action='http://Alamat_Blog_Kamu.blogspot.com/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><!-- akhir bg_nav -->

• Silahkan ubah kode bewarna merah dengan URL Sobat, dan kode bewarna biru ubah dengan nama yang sobat inginkan
• Lalu Save deh sob, selesai deh...

Oiya ada cara lain sob nih, bagi anda yang kesulitan untuk menemptakan script kode yang ke 2(yang bawah), anda bisa meletakkannya di add gadgets

• Login ke Blogger sobat
• di dasboard pilih rancangan
• lalu elemen laman
• klik tambah widgets/add gadgets dibagian header
• pilih HTML/javascript
• lalu copy dan paste kode script berikut di kotak konten gadgets baru anda

<div id='bg_nav'>

<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
<li><a href='http://Link_yang_dituju'>Nama</a></li>
<li><a href='http://Link_yang_dituju'>Nama</a></li>
<li><a href='http://Link_yang_dituju'>Nama</a></li>
<li><a href='http://Link_yang_dituju'>Nama</a></li>
</ul>
</div>
</div>

<div id='navright'>

<form action='http://Alamat_Blog_Kamu.blogspot.com/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><!-- akhir bg_nav -->

• Lalu save deh sob,

hehe sudah jadi deeh menu horizontal+search engine milik anda sob, tinggal anda hias-hias sedemikian rupa saja biar bagus, kembangkan kreativitas anda yah buat menghias dan menata menu horizontal ini, agar menarik dilihat

Selamat mencoba yah sobat, berkomentarlah bila anda kesulitan hehe, see you !!