Membuat Menu Horisontal Pada Blogger

embuatat menu horisontal sangatlah penting yaitu agar memudahkan pengunjung untuk memilih topik yang di inginkan. Selain itu juga bisa mempercantik tampilan pada blog kita.

Cara membuatnya cukup mudah kok yaitu sebagai berikut:

Login ke akun Blogspot, Klik link menu Tata Letak, kemudian pilih Edit HTML.
Back up terlebih dahulu template pembaca dengan mengklik link Download Template Lengkap agar jika terjadi kesalahan saat mengedit, pembaca bisa mengembalikannya dengan menguploadnya kembali.
Silahkan beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
Cari kode seperti dibawah ini pada template Mas Bro:

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

6. Copy Paste Kode Dibawah ini tepat dibawah kode diatas:

<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 1'>About Me</a></li>
<li><a href='URL 3'>Tutorial Website</a></li>
</ul>

   7. Setelah itu klik tombol SIMPAN TEMPLATE.
         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.

   8. Buka kembali bagian Edit HTML
         Kemudian cari kode ]]></b:skin>
         Copy kode dibawah ini:

/*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;
}

9. Pastekan dibawah kode dibawah ]]></b:skin>
yang mas bro cari tadi

menuhor ul merupakan atribut class yang berfungsi untuk mengatur tampilan parent dari list menu horizontal tersebut.
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.

10.   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'>Tutorial Website</a></li>
<li><a href='URL 3'>About Me</a></li>
</ul>
</div>

11.   Silahkan ganti URL 1 dengan
          URL halaman yang akan dituju dan seterusnya

12.   Save Template

BACA JUGA ARTIKEL DIBAWAH INI:

SOFTWARE

ILMU WEBSITE

Fedora Net

Membuat Menu Horisontal Pada Blogger

0 Response to "Membuat Menu Horisontal Pada Blogger"

Post a Comment