Membuat Menu dan Submenu di Blogger di Template Baru
Sahabat Kerja Jabodetabek & Karawang, Pada kesempatan ini kami akan berikan info Blogger.
Sekian informasi dari kami dan semoga info ini bermanfaat bagi anda.
Membuat Menu dan Submenu di Blogger di Template Baru
Pada kesempatan kali ini saya akan membagikan Bagaimana Caranya Membuat Menu Horizontal dan Sub Menu di blog Template baru . Biasanya ketika kita membuatnya 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. Copy kode script di bawah ini tepat sebelum ]]> </ b: skin>
.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;
}
4. Kemudian copy script dibawah ini tepat dibawah kode
<script src='http://emoticmastergomaster.googlecode.com/files/chrome.js' type='text/javascript'>
</script>
5. Kemudian copy script di bawah ini tepat di bawah kode <bodyexpr:class='"loading" + data:blog.mobileClass'>
<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>
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
Sekian informasi dari kami dan semoga info ini bermanfaat bagi anda.
