Penerapan Menu Horizontal Subnav Di Blogspot

Setelah menjelaskan penerapan Menu navigasi Mega Dropdown di blogspot, apakah anda sekalian menemukan kendala? ataukah tidak suka dengan menu dropdown tersebut? Memang Mega Dropdown tersebut menggunakan script yang lumayan banyak dan lumayan juga memberatkan blog anda namun kalau di bandingkan fungsinya mega dropdown tidak bisa kita salahkan sebagai widget pemeberat blog karena keuntungan dan kerugian yang di dapat itu hampir bisa di bilang seimbang menurut saya sendiri.

Mega Dropdown tersebut tidak anda sukai? Baik saya akan memberikan solusinya dengan Horizontal Subnav. Menu Horizontal Subnav ini memang beda dengan Menu Mega Dropdown, apa perbedaanya? link subnav yang di tampilkan oleh Mega Dropdown lebih banyak sedangkan link sub pada Menu Horizontal Subnav ini tidak sebanyak Mega Dropdown. Menu Horizontal Subnav ini juga menggunakan script jquery yang memungkinkan akan memberatkan blog anda namun menurut saya menu yang satu ini tidak memberatkan blog anda soalnya script yang di gunkan tidak terlalu banyak. Coba lihat Screenshout dari menu ini.

Screenshout

Cara Pemasangan :

Login ke blogger
Masuk ke Rancangan >> Edit HTML
masukan kode di bawah ini tepat diatas ]]></b:skin>

ul#topnav {
margin: 0; padding: 0;
float: left;
height:50px;
width: 970px;
list-style: none;
position: relative;
font-size: 1.2em;
background: url(http://www.sohtanaka.com/web-design/examples/horizontal-subnav/topnav_stretch.gif) repeat-x;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #555;
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 url(http://www.sohtanaka.com/web-design/examples/horizontal-subnav/topnav_active.gif) repeat-x; }
ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0; top:35px;
display: none;
width: 970px;
height:50px;
background: #1376c9;
color: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}
Setelah itu cari kode </head> dan tambahkan kode di bawah ini tepat di atasnya

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

$("ul#topnav li").hover(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9 url(http://www.sohtanaka.com/web-design/examples/horizontal-subnav/topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
$(this).find("span").hide(); //Hide the subnav
});

});
</script>
Lalu cari kode yang hampir sama seperti kode dibawah ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Oketrik (Header)' type='Header'/>
</b:section>
</div>
Kemudian Tambahkan kode di bawah ini ke dalamnya

<ul id="topnav">
<li><a href="#">Home</a></li>
<li>

<a href="#">About</a>
<span>
<a href="#">The Company</a> |
<a href="#">The Team</a> |
<a href="#">Careers</a>
</span>
</li>

<li>
<a href="#">Services</a>
<span>
<a href="#">What We Do</a> |
<a href="#">Our Process</a> |
<a href="#">Testimonials</a>
</span>

</li>
<li>
<a href="#">Portfolio</a>
<span>
<a href="#">Web Design</a> |
<a href="#">Development</a> |
<a href="#">Identity</a> |
<a href="#">SEO & Internet Marketing</a> |
<a href="#">Print Design</a>

</span>
</li>
<li><a href="#">Contact</a></li>
</ul>
Setelah di tambahkan kode akan menjadi seperti di bawah ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Oketrik (Header)' type='Header'/>
</b:section>

<ul id="topnav">
<li><a href="#">Home</a></li>
<li>

<a href="#">About</a>
<span>
<a href="#">The Company</a> |
<a href="#">The Team</a> |
<a href="#">Careers</a>
</span>
</li>

<li>
<a href="#">Services</a>
<span>
<a href="#">What We Do</a> |
<a href="#">Our Process</a> |
<a href="#">Testimonials</a>
</span>

</li>
<li>
<a href="#">Portfolio</a>
<span>
<a href="#">Web Design</a> |
<a href="#">Development</a> |
<a href="#">Identity</a> |
<a href="#">SEO & Internet Marketing</a> |
<a href="#">Print Design</a>

</span>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Pada langkah no 5-7 itu adalah bagaimana memasangkan kode tersebut langsung pada template anda tanpa menambahkan widget, namun kalau cara tersebut kurang efektif atau mengalami kesulitan silahkan jangan menggunakan cara tersebut.
Setelah langkah no 4 telah dilakukan, simpan template sobat dan menuju ke elemen halaman
Pada elemen Halaman tambahkan sebuah gadget yang letaknya di bawah header (kalau belum ada, anda bisa menambahkannya dengan tutorial yang satu ini >> Menambahkan elemen baru)
Pilih yang HTML/javascript dan masukan kode di bawah ini kedalamnya

<ul id="topnav">
<li><a href="#">Home</a></li>
<li>

<a href="#">About</a>
<span>
<a href="#">The Company</a> |
<a href="#">The Team</a> |
<a href="#">Careers</a>
</span>
</li>

<li>
<a href="#">Services</a>
<span>
<a href="#">What We Do</a> |
<a href="#">Our Process</a> |
<a href="#">Testimonials</a>
</span>

</li>
<li>
<a href="#">Portfolio</a>
<span>
<a href="#">Web Design</a> |
<a href="#">Development</a> |
<a href="#">Identity</a> |
<a href="#">SEO & Internet Marketing</a> |
<a href="#">Print Design</a>

</span>
</li>
<li><a href="#">Contact</a></li>
</ul>
Setelah itu simpan

Penerapan Menu Horizontal Subnav Di Blogspot ini diharapkan dapat bermanfaat bagi kalian. Script dan kode - kode saya dapatkan dari sohtanaka, seorang web designer asal luar negeri. Mungkin itu saja yang bisa saya sampaikan kepada anda. Terima kasih dan Happy Blogging.

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg