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.Hasilnya juga bisa kamu lihat disini.

Recent Post

 
The Diary of Science © 2011 | Design Template by science generation | Template Blogger Name | science generation | science Transparent 2.0