Cara Membuat Menu Horizontal Alternatif

Apa itu menu Horizontal ? Menu Horizontal adalah Menu(Link) Yang berbaris di bawah atau di atas header blog .gunanya adalah untuk membuat menu utama blog.untuk lebih jelasnya silakan liat link menu yang ada di blog saya ini yang ada tulisan Home,Free Template,Rubrik Gadget dan lain-lain atau biar lebih jelas silakan kamu liat gambar berikut ini.

Nah..dalam postingan kali ini klinik-it akan memposting artikel tentang bagaimana Cara Membuat Menu Horizontal Alternatif nich...Cara buatnya pun mudah karena dalam postingan yang ini klinik-it mencoba membuat menunya secara alternatif .yaitu dengan cara menambah element di bawah header blog kita.Dan buat kamu yang ingin Membuat Menu Horizontal bisa mengikuti tutorial Cara Membuat Menu Horizontal Alternatif Berikut ini.

Ikuti langkah-langkah berikut :

1.LOGIN ke Blogger

2.Klik "Tata Letak" lalu Klik "Edit HTML"

3.Cari kode ]]></b:skin> Lalu copy kode berikut dan paste diatas kode yang tadi.

#under_header{
margin:10px 0;
padding:1%;
width:98%;
}

4.Selanjutnya cari kode yang mirip dengan kode yang kaya dibawah ini.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>

5.Kemudian copy dan peste kode berikut persis dibawah kode yang diatas .

<div id="under_header">
<b:section class='header' id='underheader' preferred='yes'/>
</div>

6.Selanjutnya klik "Save Template" dan setelah tersimpan klik "Tata Letak" kemudain lihat hasilnya . ada elemen baru dibawah header blog kamu.Atau kamu bisa Klik Tata Letak untuk melihat element baru tersebut .Atau hasilnya adalah seperti gambar di bawah ini.

7.Setelah element halaman yang di bawah header jadi.Silakan klik Tambah Gadget pada element baru tersebut.lalu pilih HTML/javascript

8.Setelah itu Copy Kode berikut dan paste di dalamnya.

<div id="menu">

|<a href="link" title="back to home">Home</a>|

<a href="Link" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu1, '200px')" onmouseout="delayhidemenu()" title="free download blogger template">Free Template</a|

<a href="Link" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu2, '200px')" onmouseout="delayhidemenu()">Rubrik Gadget</a>|

<a href="Link" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu3, '200px')" onmouseout="delayhidemenu()" title="apa ajah">HTML tutorial</a>|

<a href="Link" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu4, '200px')" onmouseout="delayhidemenu()" title="cocok bagi anda yang ingin belajar lebih jauh tentang pembuatan website">Tuker Link Otomatis</a>|

</div>

9.Selanjutnya ubah tulisan link yang berwarna merah.Denan link-ling blog kamu dan udah Tulisan yang berwarna biru dengan Teks yang kamu inginkan .misalnya saja Home,Blogger atau yang lainya.

10.Kalo udah jangan lupa klik simpan. dan lihat hasilnya..

CARA 2

Untuk membuat menu horizontal pada blogger menggunakan widget:

pertama2 sign in seperti biasa
klik tata letak untuk bahasa indonesia atau layout untuk bahasa inggris
klik edit html
trus klik expand widget template

Sebelum membuat menu horizontal jangan lupa download template agar misal ada kesalahan bisa menggunakan template sebelumnya

kalau sudah cari kode berikut

b:section class='header' id='header' maxwidgets='1' showaddelement='no'

kemudian ganti angka 1 dengan 2 dan no dengan yes
terus dibawahnya ada kode

b:widget id='Header1' locked='true'

Ganti true dengan false Terus save template

Setelah itu untuk menambah menu horizontal tinggal kopi kode berikut

<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Product</a></li>
</ul>
</div>

Jangan lupa mengganti kode # dan nama yang berwarna merah.
Terus buka elemen halaman atau page elemen pada header klik add page elemen html terus paste kode itu terus save.

Untuk menu horizontal dalam template atau menggunakan html dan css
langsung saja kopi kode diatas kemudian paste di bawah <body>

Kemudian kopi kode dibawah ini:

#nav ul{
display:block;
margin: 0px;
padding: 0px;
}
#nav li{
float:left;
list-style-type:none;
padding:3px 5px 3px 5px;
margin:1px;
border:#CCCCCC 1px solid;
}
#nav li a{
text-decoration:none;
}
#nav li:hover{
background:#00FFFF;
}

Untuk warna menu horizontal ini bisa diganti sendiri jika ingin menggunakan warna yang lain.

Setelah itu paste diatas ]]></b:skin> lalu save template.

Lihat hasilnya.

CARA 3

Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header. Pada kesempatan ini, kita akan mengulas trik blogger tentang membuat menu horizontal secara sederhana. Mengapa dikatakan sederhana.....?
Karena jika kita optimasi lebih mendalam, ternyata terdapat beberapa varian dari menu horizontal tersebut. Fungsi dari trik blogger ini adalah sebagai salah satu navigasi dalam blog agar memberikan layanan kemudahan shortcut link bagi pengunjung blog kamu.

Singkat kata, berikut langkah membuat menu horizontal dalam blog kamu :

    * Login ke account blogger kamu.
    * Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

    * Cari Kode kode ]]></b:skin> dan Copy-Paste kode berikut di atasnya.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

/*=== Navigasi pulldown ===*/
body{ behavior:url("csshover2.htc"); }
.NavMenuPD {
float:left;
padding:0;
margin:0;
color: #FFFFFF;
background: transparent;
width:100%;
border:solid 1px #004080; clear:both;} /*Warna Navigasi Utama*/
.NavMenuPD a, .NavMenuPD a:visited {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #FFFFFF;
background-color: transparent;
text-decoration: none;}
.NavMenuPD ul {list-style-type:none;padding:0; margin:0;}
.NavMenuPD ul li {float:left; position:relative; z-index:auto !important ; z-index:1000 ; border-right:solid 1px #004080; border-left:solid 1px #004080;}
.NavMenuPD ul li a {color: #FFFFFF;background: transparent;float:none !important ; float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.NavMenuPD ul li ul {display:none; border:none;color: #FFFFFF;background: #000000; width:1px}
.NavMenuPD ul li:hover a {background-color:#C0C0C0; text-decoration:none; color:#000000;} /*Warna main cells mode hover */
.NavMenuPD ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.NavMenuPD ul li:hover ul li a {display:block; width:100px; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#C0C0C0; color:#FFFFFF;} /*warna subcells mode normal */
.NavMenuPD ul li:hover ul li a:hover {background-color:#808080; text-decoration:none;color:#FFFF00;} /*Warna subcells mode hover*/
.NavMenuPD ul li a:hover {background-color:#C0C0C0; text-decoration:none;color:#0000FF;} /*warna main cells mode hover */
.NavMenuPD ul li a:hover ul {display:block; width:100px; position:absolute; z-index:999; top:29px; left:0; }
.NavMenuPD ul li ul li a:visited { background-color:#C0C0C0; color:#FFFFFF;} /*Warna subcells normal mode*/
.NavMenuPD ul li a:hover ul li a {display:block; width:100px; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#C0C0C0; color:#FFFFFF;}
.NavMenuPD ul li a:hover ul li a:hover {background-color:#00FFFF; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
/*= by triwied77 url blog: http://triwied77.blogspot.com =*/

Catatan :

   1. Agar menu horizontal sesuai dengan template blog, kamu perlu mengganti kode-kode yang berwarna hijau dan merah.
   2. Khusus untuk kode yang berwarna hijau, sangat penting disesuaikan dengan lebar blog kamu.
   3. Untuk kode pewarnaan, kamu bisa melihatnya di kode warna ini.
* Kemudian cari kembali kode seperti di bawah ini.

    <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>

    * Copas kode berikut tepat di bawah kode yang berwarna hijau atau berwarna merah (sesuaikan dengan template blog kamu).

<div class='NavMenuPD'>
<ul><li><a href='/'>BERANDA</a>
</li></ul>

<ul><li><a href='http://triwied77.blogspot.com/search/label/Informasi'>INFORMASI</a>
</li></ul>

<ul><li><a href='#'>TIPS dan TRIK</a>
<ul>
<li><a href='http://triwied77.blogspot.com/search/label/Tips%20dan%20Trik%20Internet'>Tips dan Trik Internet</a></li>
<li><a href='http://triwied77.blogspot.com/search/label/Tips%20dan%20Trik%20Komputer'>Tips dan Trik Komputer</a></li>
<li><a href='http://triwied77.blogspot.com/search/label/Tips%20Blog'>Tips dan Trik Blog</a></li>
<li><a href='http://triwied77.blogspot.com/search/label/Tips%20dan%20Trik%20HP'>Tips dan Trik HP</a></li>
</ul>
</li></ul>

<ul><li><a href='#'>BLOG</a>
<ul>
<li><a href='http://triwied77.blogspot.com/search/label/SEO'>SEO</a></li>
<li><a href='http://triwied77.blogspot.com/search/label/CSS'>CSS</a></li>
</ul>
</li></ul>

<ul><li><a href='#'>SOFTWARE</a>
<ul>
<li><a href='http://triwied77.blogspot.com/search/label/Anti%20Virus'>Anti Virus</a></li>
<li><a href='http://triwied77.blogspot.com/search/label/Audio'>Audio</a></li>
<li><a href='http://triwied77.blogspot.com/search/label/Video%20Software'>Video</a></li>
<li><a href='http://triwied77.blogspot.com/search/label/Internet%20Sofware'>Internet Software</a></li>
<li><a href='http://triwied77.blogspot.com/search/label/Design%20Graphic'>Graphic Design</a></li>
<li><a href='http://triwied77.blogspot.com/search/label/Tools'>Tools</a></li>
<li><a href='http://triwied77.blogspot.com/search/label/Utility'>Utility</a></li>
</ul>
</li></ul>

<ul><li><a href='#'>HANDPHONE</a>
<ul>
<li><a href='http://triwied77.blogspot.com/search/label/Aplikasi%20HP'>Aplikasi HP</a></li>
<li><a href='http://triwied77.blogspot.com/search/label/Game%20HP'>Game HP</a></li>
</ul>
</li></ul>

<ul><li><a href='http://triwied77.blogspot.com/search/label/Komputer'>KOMPUTER</a>
</li></ul>

<ul><li><a href='#'>HUMOR</a>
<ul>
<li><a href='http://triwied77.blogspot.com/search/label/Humor%20Umum'>Humor Umum</a></li>
<li><a href='http://triwied77.blogspot.com/search/label/Humor%20Dewasa'>Humor Dewasa</a></li>
<li><a href='http://triwied77.blogspot.com/search/label/SMS%20Lucu'>SMS Lucu</a></li>
<li><a href='http://triwied77.blogspot.com/search/label/Gambar%20Lucu'>Gambar Lucu</a></li>
</ul>
</li></ul>
</div>

* Jangan lupa disimpan.oh iya jangan lupa ganti alamat urlnya dengan alamat url kamu.

referensi 1, 2, 3

< Blog untuk semua >

Cari Blog Ini

Cara Membuat Menu Horizontal Alternatif

Komentar