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.
Artikel Terkait
Cara Pasang Breadcrumb Yang Terindeks Google
Kali ini saya akan memberi tutorial kepada sahabat Blogger cara memasang breadcrumb agar terindeks Google. Tutorial ini saya dapatkan dari Maskolis, tapi rubah sedikit gaya Bre ... 
Membuat Daftar Menu Dengan Toggle
Oke sebagai awalan saya ingin memberitahu bahwa toggle yang dimaksud bukan angka togel yah =D.
Kali ini singkat saja, saya akan memberikan sebuah tutorial tentang cara membuat ... 
Template Pak Tani 21 Untuk Blog Film
Lagi saya akan menawarkan sebuah template hasil project saya
secara premium, template yang sangat cocok untuk kawan yang punya blog
untuk sharing khusus film/anime, template ... 
Buat Template Sendiri Dari 0
Kali ini saya akan berbagi pengalaman tentang pembuatan template blogger yang mandiri, maksudnya eksklusif karena kita bikin sendiri. Saya awalnya iseng-iseng saja ingin ... 
Ngarepnya SNMPTN Dapatnya SBMPTN
Setelah sekian lama saya melalui lika-liku perjalanan pendaftaran masuk PTN, akhirnya saya sampai juga di bagian pembayaran UKT dan sudah menjadi MABA. Dalam artikel ini, saya ...
