SAS - Bunuh Diri (Sampek Engtay)

If we're going to accommodate many of the links, we can make a dropdown menu navigation. When a menu is highlighted, another menu will appear. Like this picture below.

How to make it as follows:
1. Log in to Blogger, then click the Layout> Edit HTML.

2. Backup your template first.

3. Search code:

]]></b:skin>

4. Type the following code above the code

]]></b:skin>

/* Navigasi Dropdown Menu */
#navdropdownmenu{
background:black; /*Warna Latar Belakang */
width:100%;
height:auto;
margin:0;
padding:0;
}
#navdropdownmenu ul{
float:left;
list-style:none;
margin:0;
padding:0;
}
#navdropdownmenu li{
list-style:none;
float:left;
}
#navdropdownmenu li a, #navdropdownmenu li a:link, #navdropdownmenu li a:visited{
color:yellow; /* Warna Teks */
display:block;
padding:9px 10px 9px 10px;
font-size: 12px; /* Ukuran Teks */
font-family: verdana; /* Jenis font */
text-decoration:none;
}
#navdropdownmenu li a:hover{
background:yellow; /* Warna latar saat kursor mouse berada di atasnya (hover) */
color:black; /* Warna teks saat kursor mouse berada di atasnya */
padding:9px 10px 9px 10px;
}
#navdropdownmenu li ul{
z-index:10;
position:absolute;
height:auto;
width:200px; /* Lebar submenu */
border-width:1px 0 0 0; /* Tebal garis pinggir submenu */
border-style:solid;
border-color:#ffff66; /* Warna garis pinggir submenu */
}
#navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{
float:none;
background:black; /* Warna latar belakang submenu */
width:200px; /* Lebar submenu. Isi dengan nilai yang sama */
border-width:0 1px 1px 1px; /* Tebal garis pinggir submenu */
border-style:solid;
border-color:#ffff66; /* Warna garis pinggir submenu */
}
#navdropdownmenu li ul li a:hover{
background:yellow; /* Latar belakang submenu ketika kursor mouse berada di atasnya */
color:black; /* Warna teks submenu ketika kursor mouse berada di atasnya */
}
#navdropdownmenu li:hover ul, #navdropdownmenu li a:hover ul#submenu, #navdropdownmenu li:hover a:hover ul#submenu{
z-index:10;
position:absolute;
height:auto;
width:200px; /* Lebar submenu */
left:auto;
}
.ngumpet{
display:none;
}
.muncul{
display:block;
}

5. Search code

</head>

6. Type the following code above the code

</head>

<script>
var auahgelap = &#39;&#39;;
function petakumpet(id)
{
var menu = document.getElementById(id);
var sangmantan = menu.className;
if (sangmantan == &#39;ngumpet&#39;) {
if (auahgelap != &#39;&#39;) {
var terlalu = document.getElementById(auahgelap);
terlalu.className = &#39;ngumpet&#39;;
}
menu.className = &#39;muncul&#39;;
auahgelap = id;
} else {
menu.className = &#39;ngumpet&#39;;
}
}
function umpetpetak(id)
{
var menu = document.getElementById(id);
var sangmantan = menu.className;
if (sangmantan != &#39;ngumpet&#39;) {
if (auahgelap == &#39;&#39;) {
var terlalu = document.getElementById(auahgelap);
terlalu.className = &#39;muncul&#39;;
}
menu.className = &#39;ngumpet&#39;;
auahgelap = id;
} else {
menu.className = &#39;muncul&#39;;
}
}
</script>

7. Look for similar code follows the code

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Judul Blog Anda) (Header)' type='Header'/>
</b:section>
</div>

8. Below, type the following code

<div id='navdropdownmenu'>
<ul id='navdropdownmenu'>
<li><a href="#">Home</a></li>
<li onmouseout='petakumpet(&quot;submenu1&quot;)' onmouseover='umpetpetak(&quot;submenu1&quot;)'><a href='#'>Menu 1</a>
<div class='ngumpet' id='submenu1'>
<ul>
<li><a href='#'>Separuh Jiwaku Pergi</a></li>
<li><a href='#'>Sang Mantan</a></li>
<li><a href='#'>Begadang</a></li>
<li><a href='#'>Buka Hatimu</a></li>
<li><a href='#'>Baik-baik Sayang</a></li>
</ul>
</div>
</li>
<li onmouseout='petakumpet(&quot;submenu2&quot;)' onmouseover='umpetpetak(&quot;submenu2&quot;)'><a href='#'>Menu 2</a>
<div class='ngumpet' id='submenu2'>
<ul>
<li><a href='#'>Wali</a></li>
<li><a href='#'>Nidji</a></li>
<li><a href='#'>Letto</a></li>
<li><a href='#'>ST 12</a></li>
<li><a href='#'>Hijau Daun</a></li>
<li><a href='#'>Warteg Boyz</a></li>
</ul>
</div>
</li>
<li onmouseout='petakumpet(&quot;submenu3&quot;)' onmouseover='umpetpetak(&quot;submenu3&quot;)'><a href='#'>Menu 3</a>
<div class='ngumpet' id='submenu3'>
<ul>
<li><a href='#'>Kang Rohman</a></li>
<li><a href='#'>O-OM</a></li>
<li><a href='#'>Mas Doyok</a></li>
<li><a href='#'>Anangku</a></li>
<li><a href='#'>Cebong Ipiet</a></li>
<li><a href='#'>Beben</a></li>
</ul>
</div>
</li>
<li onmouseout='petakumpet(&quot;submenu4&quot;)' onmouseover='umpetpetak(&quot;submenu4&quot;)'><a href='#'>Menu 4</a>
<div class='ngumpet' id='submenu4'>
<ul>
<li><a href='#'>Amerika</a></li>
<li><a href='#'>Indonesia</a></li>
<li><a href='#'>Australia</a></li>
<li><a href='#'>Inggris</a></li>
<li><a href='#'>Italia</a></li>
<li><a href='#'>Prancis</a></li>
</ul>
</div>
</li>
<li onmouseout='petakumpet(&quot;submenu5&quot;)' onmouseover='umpetpetak(&quot;submenu5&quot;)'><a href='#'>Menu 5</a>
<div class='ngumpet' id='submenu5'>
<ul>
<li><a href='#'>Wayne Rooney</a></li>
<li><a href='#'>Didier Drogba</a></li>
<li><a href='#'>Christiano Ronaldo</a></li>
<li><a href='#'>Del Piero</a></li>
</ul>
</div>
</li>
<li onmouseout='petakumpet(&quot;submenu6&quot;)' onmouseover='umpetpetak(&quot;submenu6&quot;)'><a href='#'>Menu 6</a>
<div class='ngumpet' id='submenu6'>
<ul>
<li><a href='#'>Afgan</a></li>
<li><a href='#'>Vidi Aldiano</a></li>
<li><a href='#'>Derby Romero</a></li>
<li><a href='#'>Agnes Monica</a></li>
<li><a href='#'>Sherina</a></li>
</ul>
</div>
</li>
</ul>
</div>

Information :
* Code Submenu1, Submenu 2, etc. must be adjusted with the menu will appear.
* Signs # in the code <a href='#'> is the link. Replace with the desired URL
* You can add or reduce the above menu.

9. Then click Save Template.

10. See the results.

Good luck! If confused, ask in a comment.