Cara Membuat Menu diBlogspot

Hampir saja lupa, beberapa hari yang lalu ada yang nanya Bagaimana cara membuat menu seperti di Blognya Mbak Widha ini. Home-Dariku-Tutorial-BERITA-Dunia Bisnis-GojeG-Info Lowongan? itu sebenarnya bawaan dari template, jadi untuk kebawah dan kekanan tinggal aku kembangin sendiri gitu. Semalam aku dah berusaha nyari template yang sama seperti template ini, mungkin kalau ada yang pengen bisa donlod di http://anggaleoputra.blogspot.com/2010/05/3-kolom-rounded-colourfull-template.html di blog tersebut menyediakan beragam template gratis, bagus-bagus kok, ternyata yang model kayak template blog ini aja ada beberapa macam pilihan. Kalau templatenya enggak ada bawaan menu bisa juga dibuat, lalu Cara Membuat Menu diBlogspot (sebenarnya cara membuat menu seperti ini sudah banyak yang bahas, bahkan lebih keren dari sini):

1. Login

2. Klik Menu Rancangan (dulu tata letak)

3. Pilih Edit HTML (Jangan lupa centang dulu Expand Template Widget dan banckup, buat jaga-jaga kalau ada ketidak berhasilan)

4. Cari kode seperti dibawah ini:

<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

5. Jika sudah ketemu, silahkan copy struktur berikut tepat dibawahnya

<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 1'>Dariku</a></li>
<li><a href='URL 3'>Tutorial</a></li>
</ul>

6. Lalu tambahkan kode ccs dibawah ini, taruh diatas kode ]]></b:skin>

/*CSS untuk menu horizontal*/

.menuhor ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.menuhor ul li{
list-style: none;
display: inline;
}

.menuhor ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #33FFCC;
border: 2px solid #33FFCC;
}

.menuhor ul li a:hover{
background-color: #33CCFF;
border-style: outset;
}

7. Setelah itu klik tombol SIMPAN TEMPLATE, lalu lihat dulu hasilnya.

Soal warna bisa diatur sesuai selera, begitu pula dengan menu-menu yang ingin ditampilkan.

Ket:

a.menuhor ul merupakan atribut class yang berfungsi untuk mengatur tampilan parent dari list menu horizontal tersebut.
b.menuhor ul li berfungsi untuk mengatur tampilan anak menu horizontal yang kita buat.
c.menuhor ul li a berfungsi untuk mengatur tampilan link dari anak menu tersebut.
d.menuhor ul li a:hover berfungsi untuk mengatur tampilan link anak menu ketika pointer digerakkan diatasnya.
e.Silahkan ganti URL 1,URL 2, URL 3 dengan URL halaman yang akan dituju

Selamat mencoba, semoga postingan ini bermanfaat bagi teman-teman yang membutuhkan.


salam hormat dariku,

widhawati

IG @widhatok 6/17/2011 07:02:00 AM 2 Komentar

Related Posts