A little piece of sharing

CODING DROP DOWN MENU:

Untuk mencantikkan blog, banyak benda boleh dibuat oleh pengguna blog. Antaranya dengan mewujudkan sistem 'drop-down menu'. Apa itu drop-down menu? Drop-down menu adalah sistem yang membolehkan pelawat untuk memilih salah satu daripada senarai yang telah ditetapkan oleh Blogger itu sendiri. Selalunya tools berada di bahagian atas sekali dan mempunyai isi kandungan yang sama (kebanyakannya). Sebagai contoh :

Rajah 1

Untuk menggunakan tools ini, anda perlu/wajib mulakan atau bermain dengan sedikit coding. Sebenarnya, just copy n paste je.

LANGKAH 1 :

Pergi ke GOOGLE DASHBOARD, pergi ke bahagian TEMPLATE dan klik pada butang edit, kemudian cari bahagian HTML/Javascript dan klik. 

Kemudian, masukkan sahaja coding dibawah.

<!--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 -->

LANGKAH 2:

Selepas siap copy n paste, kalian kena edit bahagian yang bertulis LINK1/LINK2/LINK3/LINK4. Untuk bahagian ini, masukkan link kalian sendiri. Misalnya :

Dan jika sudah memasukkan link, baru sistem dapat berfungsi dengan betul.

Contohnya, 

<li><a href="http://akupombegitu.blogspot.my/2015/03/ciptaan-aneh-zaman-dahulu.html">Home</a></li>

LANGKAH 3:

Setelah siap memasukkan coding serta link-link yang sepatutnya, langkah seterusnya adalah save hasil kerja tadi dan kembali ke GOOGLE DASHBOARD. Dari situ anda boleh mengakses ke bahagian 

template-->customize-->advanced-->scroll down sampai jumpa add css.

Masukkan pula coding di bawah dan tampalkan di ruangan yang disediakan.

/* Styles the first link in your menu */
.tabs-inner .section:first-child ul {
margin-top: -1px;
border: none;
}

/* Styles the overall navigation bar */
.tabs-inner .widget ul {
background: #000000;
border: none;
text-align: center;
}
/* Styles the individual links */
.tabs-inner .widget li a {
font: 12px Arvo;
border: none;
color: #ffffff;
}
/* Styles the links when hovered over */
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #333333;
background-color: #ffffff;
text-decoration: none;
}

#navigationbar {
width: 100%; /* change the width of the navigation bar */
height: 35px; /* change the height of the 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; /* change color of the main links */
display: block;
margin: 0;
padding: 10px 30px;  /* change the first number for the top/bottom spacing, and the second number for left/right spacing */
}

#navigationcss li a:hover, #navigationcss li a:active {
color: #FF69B4 ; /* change the color of the links when hovered over */
margin: 0;
padding: 10px 30px; /* make sure these are the same as the section above! */
}

#navigationcss li li a, #navigationcss li li a:link, #navigationcss li li a:visited {
background: #ffffff;  /* change the background color of the drop down box */
width: 150px;
color: #000000; /* change the color of the drop down links */
float: none;
margin: 0;
padding: 7px 10px; /* similar to above, change for the spacing around the links */
}

#navigationcss li li a:hover, #navigationcss li li a:active {
background: #FF69B4 ; /* change the background color of drop down items on hover */
color: #ffffff; /* change the color of drop down links on hover */
padding: 7px 10px;  /* keep these the same as the above section */
}

#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; 
} 

Nah, dengan 3 langkah sahaja anda sudah siap dalam menghasilkan sistem drop-down menu.

Moga bermanfaat dan selamat berstylo.