Pada kesempatan kali ini saya akan membagikan Tutorial Blog : Cara Membuat Menu Horizontal dan Sub Menu di blog sahabat blogger. Biasanya ketika kita membuat blog seo friendly di blogspot belum ada menu fitur dan submenu, itu sebabnya ada baiknya jika kita bisa membuat sendiri. Berikut adalah cara untuk membuat menu dan submenu di blog :
1. Login ke Blogger.com dan klik desain dan pilih Edit HTML
2. Then checklist pada Expand Template Widget
3. Copy kode script di bawah ini tepat sebelum ]]> </ b: skin>
1. Login ke Blogger.com dan klik desain dan pilih Edit HTML
2. Then checklist pada Expand Template Widget
3. Copy kode script di bawah ini tepat sebelum ]]> </ b: skin>
 |
| Menu dan sub menu Blog SEO Friendly 2013 |
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;
}
4. Kemudian copy script dibawah ini tepat dibawah kode ]]></b:skin>
<script src='http://emoticmastergomaster.googlecode.com/files/chrome.js' type='text/javascript'>
</script>
</script>
5. 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>
<!--code sub menu vertikal -->
<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>
<!--code sub menu vertikal2 -->
<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>
<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>
<!--code sub menu vertikal -->
<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>
<!--code sub menu vertikal2 -->
<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>
6. 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, Anda dapat melihat hasilnya pada menu di bagian atas blog ini
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, Anda dapat melihat hasilnya pada menu di bagian atas blog ini
Demikian artikel yang bisa saya bagikan kali ini dan semoga bermanfaat buat sahabat blogger semua. Terima kasih