Tuesday, February 23, 2016

Cara Tepat dan Mudah Membuat menu Navigasi Drop Down Pada Blogger


Menjaga agar tampilan blog terlihat indah, dan menu navigasi yang mudah digunakan adalah bagian terbesar dari usaha untuk menciptakan desain yang efektif. Terlalu banyak link dapat membingungkan pembaca, sementara jika terlalu sedikit dapat membuat mereka bingung dan bertanya-tanya apa yang harus dilakukan selanjutnya. Sebuah menu drop down adalah suatu cara yang tepat untuk menyembunyikan link tambahan dari antarmuka blog, sementara hal itu masih membuat nya tersedia bagi pembaca blog agar tidak membingungkan.

Sementara pada WordPress sangat mudah untuk menambahkan menu drop down (sub item), namun ini akan sedikit lebih rumit pada Blogger. Ya... pada dasarnya hanyalah membuat daftar dalam daftar, namun tetap saja hal itu membutuhkan Coding dan styling!


Cara Membuat menu Navigasi Drop Down Pada Blogger

Cara Membuat Drop Down Menu


Letakkan kode ini dalam widget HTML/JavaScript di area navigasi.

<!--Start Navigation --> 
<div id="navigationbar">
<ul id='navigationcss'>
<li><a href="LINK1">Home</a></li> 
<li><a href="LINK2">Category</a>
<ul>
<li><a href='LINK3'>SUB-CATEGORY-1</a></li>
<li><a href='LINK4'>SUB-CATEGORY-2</a></li>
</ul>
</li>
<li><a href="">Category</a></li>
</ul>
</div>   
<!--End Navigation -->

Gunakan kode ini untuk menambahkan link lain:

<li><a href="LINK2">Category</a></li>

Dan kode ini untuk menambahkan link lain dengan model drop down:

<li><a href="LINK2">Category</a>
<ul>
<li><a href='LINK3'>SUB-CATEGORY-1</a></li>
<li><a href='LINK4'>SUB-CATEGORY-2</a></li>
</ul>
</li>

Isi informasi yang Anda butuhkan, simpan widget, dan selanjutnya pergi ke Template > Edit HTML
(backup template anda sebelum mengedit kode apapun!).
Sekarang kita akan menambahkan styling yang akan membuat menu Anda terlihat cantik! Pertama, buka pada bagian CSS dalam:

<b:skin> ... </b:skin>

Cari bagian yang terlihat seperti ini:

/* Style link pertama di menu anda */
.tabs-inner .section:first-child ul {
margin-top: -1px;
border: none;
}

/* Style semua navigation bar */
.tabs-inner .widget ul {
background: #000000;
border: none;
text-align: center;
}
/* Style individual link */
.tabs-inner .widget li a {
font: 12px Arvo;
border: none;
color: #ffffff;
}
/* Style link saat hover */
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #333333;
background-color: #ffffff;
text-decoration: none;
}

Anda juga dapat mengedit pada bagian ini sesuai dengan keinginan Anda, dan gunakan komentar untuk memudahkan Anda sendiri. Bermainlah dengan memasukkan value yang berbeda-beda sampai Anda mendapatkan tampilan yang Anda inginkan!

Kemudian di bawah nya (kode diatas), paste kode berikut:

#navigationbar {
width: 100%; /* mengubah lebar navigation bar */
height: 35px; /* mengubah tinggi navigation bar */
}

#navigationcss { 
margin: 0 auto;
padding: 0; 
}

#navigationcss ul { 
float: none; 
list-style: none; 
margin: 0; 
padding: 0; 
overflow: visible; 
}

#navigationcss li a, #navigationcss li a:link, #navigationcss li a:visited {
color: #ffffff; /* mengubah warna link utama */
display: block;
margin: 0;
padding: 10px 30px;  /* mengubah angka pertama untuk bagian spasi atas/bawah, dan angka kedua untuk bagian spasi kiri/kanan */
}

#navigationcss li a:hover, #navigationcss li a:active {
color: #FF69B4 ; /* mengubah warna link ketika cursor hover di atas nya */
margin: 0;
padding: 10px 30px; /* pastikan pada bagian ini sama seperti diatas! */
}

#navigationcss li li a, #navigationcss li li a:link, #navigationcss li li a:visited {
background: #ffffff;  /* mengubah warna latar belakang dari drop down box */
width: 150px;
color: #000000; /* mengubah warna drop down link */
float: none;
margin: 0;
padding: 7px 10px; /* 
mirip dengan di atas, untuk mengubah jarak di sekitar link */
}

#navigationcss li li a:hover, #navigationcss li li a:active {
background: #FF69B4 ; /* mengubah warna latar belakang dari item drop down saat hover */
color: #ffffff; /* mengubah warna link drop down saat hover */
padding: 7px 10px;  /* pastikan ini sama seperti bagian diatas */
}

#navigationcss li {
float: none; 
display: inline-block; 
list-style: none; 
margin: 0; 
padding: 0; 
}

#navigationcss li ul { 
z-index: 9999; 
position: absolute; 
left: -999em; 
height: auto; 
width: 150px; 
margin: 0;
padding: 0;
}

#navigationcss li:hover ul, #navigationcss li li:hover ul, #navigationcss li li li:hover ul, #navigationcss li.sfhover ul, #navigationcss li li.sfhover ul, #navigationcss li li li.sfhover ul { 
left: auto; 
} 

Bacalah komentar untuk memahami maksud dari setiap baris, dan edit sampai Anda memiliki gaya yang Anda inginkan. Karena template dapat berasal dari berbagai sumber, ada kemungkinan Anda bisa memiliki masalah dengan menggunakan kode ini di blog Anda jika kode Anda saat ini telah banyak diubah!


Emoticon Emoticon