Cara Menciptakan Sajian Horizontal Pada Blogspot

Menu yang terdapat pada sebuah web selain mempunyai kegunaan untuk memudahkan pengunjung membuka halaman-halaman tertentu, juga sanggup menambah estetika. Begitu pula dengan menu horizontal yang sanggup membuat web kita menjadi lebih ergonimis dan keren. Nah, bagaimana dengan blogspot? Harus diakui bahwa pada template blogspot standart, kemudahan menu horizontal tidak ada didalamnya. Namun, kita tidak perlu berkecil hati alasannya yaitu menyerupai yang telah saya katakan pada postingan sebelumnya bahwa kita sanggup membuat menu termasuk menu horizontal pada blogspot. Berikut saya ulas langkah-langkah menciptakan sajian horizontal pada Blogspot. Sebagai pola kita akan menciptakan menu horizontal dibawah header

1. Login ke akun Blogspot pembaca
2. Klik link sajian Tata Letak, kemudian pilih Edit HTML.
3. Back up terlebih dahulu template pembaca dengan mengklik link Download Template Lengkap supaya kalau terjadi kesalahan dikala mengedit, pembaca sanggup mengembalikannya dengan menguploadnya kembali.
   
4. Silahkan beri tanda centang pada kotak kecil disamping goresan pena Expand Template Widget
5. Cari isyarat menyerupai dibawah ini pada template pembaca:
   

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

Jika sudah ketemu, silahkan copy struktur berikut sempurna dibawah kode-kode pada langkah 5

• Home
• About Me
• Tutorial Website

Setelah itu klik tombol SIMPAN TEMPLATE, kemudian lihat hasilnya

Pembaca akan melihat bahwa menu-menu tersebut muncul sebagai list vertikal, bukan horizontal. Oleh lantaran itu, kita perlu mengatur tampilannya supaya muncul berjejer secara horizontal dengan memakai CSS. Selain itu, kita juga sanggup mengatur tampilan dari sajian tersebut supaya terlihat lebih menarik dengan CSS.

Buka kembali bab Edit HTML pada blogspot pembaca, kemudian cari isyarat ]]>.

Silahkan copy struktur berikut diatas isyarat ]]>
/*CSS untuk sajian 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 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 sajian tersebut.
.menuhor ul li a:hover berfungsi untuk mengatur tampilan link anak sajian ketika pointer digerakkan diatasnya.

Kemudian ubah struktur yang Anda copy pada langkah 6 diatas sehingga menjadi menyerupai berikut:

• Home
• Tutorial Website
• About Me

Silahkan ganti URL 1 dengan URL halaman yang akan dituju kalau sajian "Home" diklik. URL 2 diganti dengan URL halaman yang akan dituju kalau sajian "Tutorial Website" diklik, dan seterusnya.

Klik tombol SIMPAN TEMPLATE.

Untuk melihat risikonya silahkan membuat CSS tersebut, silahkan klik disini. Saya yakin pembaca akan lebih mengerti bagaimana CSS tersebut bekerja. Dengan adanya menu horizontal tersebut blog pembaca niscaya menjadi lebih keren dan ergonomis.

Selamat mencoba dan jangan lupa meninggalkan komentar ya