Sijago Keok: Cara Membuat Menu Dan Sub Menu Blogspot

Kali ini saya akan menulis sebuah tutorial tentang cara-cara membuat menu dan sub menu pada sebuah blogspot, tulisan ini dikhususkan untuk penulisnya yaitu saya sendiri, dan barangkali di antara para pembaca. langsung saja ke pokok pembahasan, Untuk langkah-langkahnya adalah sebagai berikut:

Masuk ke blogspot.com
Klik rancangan (Tata Letak)
Klik Edit HTML
Cari kode ]]></b:skin>
Letakan kode dibawah ini, Diatas kode ]]></b:skin>

/* ----- NAVBAR MENU ----- */

#NavbarMenu {
width: 875px;
height: 35px;
background:#FF6600 url(http://i802.photobucket.com/albums/yy308/penerjemah/navbar-hitam.png) repeat-x top;
color: #ffffff
margin: 0 auto 0;
padding: 0;
font: bold 11px Arial, Tahoma, Verdana;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #ffffff;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 15px Georgia, Times New Roman;
}
#nav li a:hover, #nav li a:active {
background:#FF6600;
color: #ffffff;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff url(http://i802.photobucket.com/albums/yy308/penerjemah/navbar-hitam.png) repeat-x top;
width: 150px;
color: #ffffff;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
font: normal 14px Georgia, Times New Roman;
}

#nav li li a:hover, #nav li li a:active {
background: #FF6600;
color: #ffffff;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

6. Kemudian cari kode ini:

</b:section>
</div>

</div>

7. Jika Sudah Ketemu kode no 6, Maka simpanlah kode dibawah ini Dibawah kode tersebut.

<li><a href='#'>Forum Mutiara</a>

<ul>

<li><a href='#'>Karya Sastra</a>

<li><a href='http://kerajinan-jari.blogspot.com/search/label/Puisi%20Para%20Master'>Puisi</a></li>

<li><a href='#'>Market</a></li>

<li><a href='#'>Stock</a></li>

</ul>

</li>

<li><a href='#'>Rangkaian Ilmu</a>

<li><a href='#'>Filsafat</a>

<li><a href='http://kerajinan-jari.blogspot.com/search/label/Filsafat%20Bahasa'>Filsafat Bahasa</a></li>

<li><a href='http://kerajinan-jari.blogspot.com/search/label/Filsafat%20Cinta'>Filsafat Cinta</a></li>

<li><a href='#'>Sub Child Category 3</a></li>

</ul>

</li>

<li><a href='http://kerajinan-jari.blogspot.com/search/label/Nahwu'>Ilmu Nahwu</a></li>

<li><a href='http://kerajinan-jari.blogspot.com/search/label/stilistika'>Stilistika</a></li>

<li><a href='#'>Child Category 4</a></li>

</ul>

</li>

<li><a href='#'>Learn SEO</a> </li>

<li><a href='#'>Adsense</a> </li>

<li><a href='#'>Blog Monetize</a> </li>

<li><a href='#'>Link Exchange</a> </li>

</ul> </li>

<li><a href='#'>Gudang Tugas</a>

<ul>

<li><a href='#'>Arud walqowafi</a></li>

<li><a href='#'>Semantik II</a></li>

<li><a href='#'>Sosio Linguistik</a></li>

<li><a href='#'>Teori-Teori Filologi</a></li>

<li><a href='#'>Metode Penelitian Bahasa</a></li>

<li><a href='#'>Metode Penelitian Sastra</a></li>

<li><a href='#'>Akhlak Tasawuf</a></li>

<li><a href='#'>Metode Pengajaran Bahasa Arab</a></li>

<li><a href='http://adab.sunan-ampel.ac.id/?page_id=1067'>Link Tambahan</a></li>

</ul>

</li>

<li><a href='#'>2 Column</a> </li>

<li><a href='#'>3 Column</a> </li>

<li><a href='#'>4 Column</a> </li> </ul> </li>

<li><a href='#'>Blogging Trick</a> </li>

<li><a href='#'>Downloads</a>

<li><a href='http://kerajinan-jari.blogspot.com/search/label/Download%20Kitab'>Kitab-Kitab</a></li>

<li><a href='http://kerajinan-jari.blogspot.com/search/label/Game'>Games</a></li>

<li><a href='http://kerajinan-jari.blogspot.com/search/label/Download%20Novel'>Download Novel</a></li>

<li><a href='http://kerajinan-jari.blogspot.com/search/label/Download%20Dvd'>Download Dvd</a></li>

<li><a href='http://kerajinan-jari.blogspot.com/search/label/Softwere'>Software</a>

<li><a href='#'>Office</a>

</li>

</ul>

</li>

</ul>

</li>

<li><a href='#'>politics</a></li>

<li><a href='#'>Rahasia Perusahaan</a>

<ul>

<li><a href='#'>2 Column</a> </li>

<li><a href='#'>3 Column</a> </li>

<li><a href='#'>4 Column</a> </li> </ul> </li>

</ul>

</div>

</div>

8. Simpan

9. Beres

Cara Membuat Menu Dan Sub Menu Blogspot

Kalam Tuan syaikh Abdul Qodir Bagian Awal Tentang I'tirod