Menu yang terdapat pada sebuah web selain
berguna untuk memudahkan pengunjung membuka halaman-halaman tertentu,
juga bisa menambah estetika. Begitu pula dengan menu horizontal yang bisa membuat web kita menjadi lebih ergonimis dan keren. Nah, bagaimana dengan blogspot? Harus diakui bahwa pada template blogspot standart, fasilitas menu horizontal tidak ada didalamnya. Namun, kita tidak perlu berkecil hati sebab seperti yang telah saya katakan pada postingan sebelumnya bahwa kita bisa membuat menu termasuk menu horizontal pada blogspot. Berikut saya ulas langkah-langkah membuat menu horizontal pada Blogspot. Sebagai contoh kita akan membuat menu horizontal dibawah header.
1. Login ke akun Blogspot pembaca
2. Klik link menu Tata Letak, kemudian pilih Edit HTML.
3. Back up terlebih dahulu template pembaca dengan mengklik link Download Template Lengkap agar jika terjadi kesalahan saat mengedit, pembaca bisa mengembalikannya dengan menguploadnya kembali.
4. Silahkan beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
5. Cari kode seperti dibawah ini :
2. Klik link menu Tata Letak, kemudian pilih Edit HTML.
3. Back up terlebih dahulu template pembaca dengan mengklik link Download Template Lengkap agar jika terjadi kesalahan saat mengedit, pembaca bisa mengembalikannya dengan menguploadnya kembali.
4. Silahkan beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
5. 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>
6. Jika sudah ketemu, silahkan copy struktur berikut tepat dibawah kode-kode pada langkah 5
<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 1'>About Me</a></li>
<li><a href='URL 3'>Grymrealm</a></li>
</ul>
7. Setelah itu klik tombol SIMPAN TEMPLATE, lalu lihat hasilnya
8. Pembaca akan melihat bahwa menu-menu tersebut
muncul sebagai list vertikal, bukan horizontal. Oleh karena itu, kita
perlu mengatur tampilannya agar muncul berjejer secara horizontal dengan
menggunakan CSS. Selain itu, kita juga bisa mengatur tampilan dari menu
tersebut agar terlihat lebih menarik dengan CSS.
9. Buka kembali bagian Edit HTML pada blogspot pembaca, kemudian cari kode ]]></b:skin>.
10. Silahkan copy struktur berikut diatas kode ]]></b:skin>
.menuhor ul merupakan atribut class yang berfungsi untuk mengatur tampilan parent dari list menu horizontal tersebut./*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;
}
.menuhor ul li berfungsi untuk mengatur tampilan anak menu horizontal yang kita buat.
.menuhor ul li a berfungsi untuk mengatur tampilan link dari anak menu tersebut.
.menuhor ul li a:hover berfungsi untuk mengatur tampilan link anak menu ketika pointer digerakkan diatasnya.
11. Kemudian ubah struktur yang Anda copy pada langkah 6 diatas sehingga menjadi seperti berikut:
<div class="menuhor">
<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 2'>Grymrealm</a></li>
<li><a href='URL 3'>About Me</a></li>
</ul>
</div>
12. Silahkan ganti URL 1 dengan URL halaman yang akan dituju jika menu "Home" diklik. URL 2 diganti dengan URL halaman yang akan dituju jika menu "Grymrealm" diklik, dan seterusnya.
13.Klik tombol SIMPAN TEMPLATE.
Posted in: Blog Tutorial
0 Comment:
Posting Komentar