Cara Membuat Submenu di Blog

Home » Blog Tutorial » Cara Membuat Submenu di Blog

Cara Membuat Submenu di Blog

Posted by Unknown Sunday, 22 December 2013 4 comments

Salam Blogger, sekarang saya akan membagi tutorial Cara Membuat Submenu di Blog seperti gambar di bawah ini:

Menu dan sub menu Blog SEO Friendly 2013

Ada dua jalan buat agan, pertama jika agan belum berisi menu dan sub menu pada blog bisa menggunkan cara kedua. Namun jika blog agan sudah berisi menu tapi ingin menambah Sub menu saja pakai cara pertama . Sekarang langsung saja simak dengan baik ya :)

Cara Pertama:
1. Login ke Blogger.com dengan user dan pasword kalian tentunya

2. Kemudian klik desain dan pilih Edit HTML

3. Jangan Lupa memberi checklist pada Expand Template Widget
4. Temukan nama menu yang sesuai dengan blog kalian (gunakan tombol ctrl+f)
contohnya:

disana muncul menu "Home" "Game" dan satu menu yang mempunyai Submenu yaitu menu "Film"
Nah untuk menambahkan Submenu pada masing masing menu adalah dengan cara menambahkan script
di bawah ini pada menu anda


<div id='navbarsecond'>
<ul class='dropdown' id='secondmenu'>
<li><a href='/'>Home</a></li>
<li><a href=''>Game</a></li>
<li><a href=''>Software</a></li>
<li><a href=''>Blog Tutorial</a></li>
<li><a href=''>Kesehatan</a></li>
<li><a href=''>Teknologi</a></li>
<li><a href=''>Hiburan</a></li>
<li><a class='sf-with-ul' href=''>Film</a>
<ul class='sub-menu'>
<li><a href=''>Naruto</a></li>
<li><a href=''>One Piece</a></li>
</ul>
</li>
</ul>
<div class='clear'/>
</div>

Perhatian:
Ganti teks dalam merah (Submenu) dan teks dalam ungu (Menu) dengan yang Anda inginkan

Cara Kedua:
1. Login ke Blogger.com dengan user dan pasword kalian tentunya

2. Kemudian klik desain dan pilih Edit HTML

3. Jangan Lupa memberi checklist pada Expand Template Widget

4. Copy kode script di bawah ini tepat sebelum ]]> </ b: skin>, untuk memudahkan pencarian tekan saja
CTRL+F di keyboard (ya iya lah kalo bukan keyboard dimana lagi)

.chromestyle{
width: 90%;
font-weight: regular;
}

.chromestyle:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #000000;
width: 100%;
background: #000000
repeat-x;
padding: 10px 10px 0 45px;
margin: 0;
text-align: left;
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #7CFC00;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #000000;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{
background: #202020
repeat-x;
}

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #000000;
border-bottom-width: 0;
font:regular 11px Trebuchet;
line-height:18px;
z-index:100;
background-color: black;
width: 200px;
visibility: hidden;
filter: color=#7CFC00
,direction=135,strength=4);
}

.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #000000;
padding: 5px 0;
text-decoration: none;
text-align: left;
font-weight: regular;
color: Lawngreen;
}

.dropmenudiv a:hover{
background-color: #202020;
}

5. Kemudian copy script dibawah ini tepat dibawah kode ]]></b:skin>

6. Kemudian copy script di bawah ini tepat di bawah kode <body>

<div class='chromestyle' id='chromemenu'>

<ul>
<li><a href='/'>Home</a></li>
<li><a href='#' rel='dropmenu1'>Contoh Menu1</a></li>
<li><a href='#' rel='dropmenu2'>Contoh Menu2</a></li>
<li><a href='#' rel='dropmenu3'>Contoh Menu3</a></li>
<li><a href='#' rel='dropmenu4'>Contoh Menu4</a></li>
<li><a href='#' rel='dropmenu5'>Contoh Menu5</a></li>
<li><a href='#' rel='dropmenu6'>Contoh Menu6</a></li>
<li><a href='#' rel='dropmenu7'>Contoh Menu7</a></li>
<li><a href='#' rel='dropmenu8'>Contoh Menu8</a></li>
</ul>
</div>


<div class='dropmenudiv' id='dropmenu1'>
<a href='URL sub menu1'>Contoh Sub Menu1</a>
<a href='URL sub menu2'>Contoh Sub Menu2</a>
<a href='URL sub menu3'>Contoh Sub Menu3</a>
</div>


<div class='dropmenudiv' id='dropmenu2'>
<a href='URL sub menu1'>Contoh Sub Menu1</a>
<a href='URL sub menu2'>Contoh Sub Menu2</a>
<a href='URL sub menu3'>Contoh Sub Menu3</a>
</div>

<script type='text/javascript'>
cssdropdown.startchrome("chromemenu")
</script>

7. Sebelum klik simpan Template , ada baiknya jika sahabat preview template terlebih dahulu. Jika langkah

sahabat blogger benar maka akan muncul tampilan halaman Blog sahabat lengkap dengan menu

horizontal dan submenunya seperti yang telah sahabat tambahkan tadi

Perhatian:
Ganti teks dalam merah dengan menu dan submenu yang Anda inginkan

Itulah cara untuk membuat menu dan submenu di blogspot. Cara itu di coba dan berhasil, Kalian dapat melihat hasilnya pada menu di bagian atas blog saya ini

Demikian artikel tentang Cara Membuat Submenu di Blog yang bisa saya bagikan kali ini dan semoga bermanfaat buat sahabat blogger semua. Terima kasih