Mungkin Tutorial ini sudah ketinggalan jaman atau hal yang sudah diketahui oleh kebanyakan Blogger-blogger, tetapi sekali lagi saya memberikan tutorial ini untuk para sobat saya yang masih bingung dan kesulitan dalam memasang submenu ini.
Sebenarnya sih agak ragu memberikan tutorial ini, karena saya masih bingung untuk menempat kode submenunya dimana, tetapi setelah coba teliti sedikit (soq teliti nih Johny :D) akhirnya saya mengerti juga dengan kode Submenu yang ditaruh Maskolis pada template ini.
Ok, jika sobat ingin memasang Submenu ini, silahkan sobat ikuti cara berikut.
- Sobat cari dulu kode ]]></b:skin
- Lalu masukan kode berikut diatasnya.
#menu a{display:block;line-height:42px;padding:0 14px;text-decoration:none;color:#fff;font-family:'Oswald', Arial, sans-serif;text-shadow: 0 -1px 0 #222;}
#menu li a{border-right:1px solid #222;}
#menu li a:hover {color:#fff;background-color:#222;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;transition: all 0.3s ease-in;}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font-size:20px;display:none;width:35px;height:20px;line-height:20px;text-align:center;color:#fff}
#menu label span{font:normal 14px Oswald;position:absolute;left:35px;}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#444;border-top:1px solid #222;border-left:1px solid #000;border-bottom:1px solid #000;position:absolute;z-index:99;display:none;left:-1px;}
#menu ul.menus li{display:block;width:100%;font-size:13px;text-transform:none;text-shadow:none}
#menu ul.menus a{color:#fff;text-transform:uppercase}
#menu li:hover ul.menus{display:block}
#menu a.dropdown{padding:0 27px 0 14px}
#menu a.dropdown::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#f0f0f0 transparent transparent transparent;position:absolute;top:16px;right:9px}
#menu ul.menus a:hover{background:#222;color:#fff}
- Setelah memasukan kode diatas, silahkan sobat cari kode yang hampir mirip dengan kode.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Cara Blogger' type='Header'/>
</b:section>
</div>
- Lalu Masukan kode dibawah ini dibawah kode </div> pada kode diatas.
<nav id='menu'>
<input type='checkbox'/>
<label><i class='icon-reorder'/><span>Navigation</span></label>
<ul>
<li><a href='http://my-topsite.blogspot.com/' title='Home'>Home</a></li>
<li><a href='#' title='Template Blogger'>Template</a></li>
<li><a href='#' title='Best Blogger'>Best Blogger</a></li>
<li><a class='dropdown' href='#'>More</a>
<ul class='menus'>
<li><a href='#' title='Index'>Blog Index</a></li>
<li><a href='#' title='About Me'>About Me</a></li>
<li><a href='#' title='Tukar Review Alexa'>Tukar Review Alexa</a></li>
<li><a href='#' title='Gosip Yuk !'>Forum</a></li>
</ul>
</li>
<li><a class='dropdown' href='#'>More</a>
<ul class='menus'>
<li><a href='#' title='Index'>Blog Index</a></li>
<li><a href='#' title='About Me'>About Me</a></li>
<li><a href='#' title='Tukar Review Alexa'>Tukar Review Alexa</a></li>
<li><a href='#' title='Gosip Yuk !'>Forum</a></li>
</ul>
</li>
<li><a class='dropdown' href='#'>More</a>
<ul class='menus'>
<li><a href='#' title='Index'>Blog Index</a></li>
<li><a href='#' title='About Me'>About Me</a></li>
<li><a href='#' title='Tukar Review Alexa'>Tukar Review Alexa</a></li>
<li><a href='#' title='Gosip Yuk !'>Forum</a></li>
</ul>
</li>
</ul>
</nav>
Note :Sesuaikan sendiri link yang sobat ingin masukan pada submenu.
Demikian Tutorial dari saya, yang saya kutip dari template Maskolis dan Kang Ismet, semoga bermanfaat.
