Navigasi yang berbeda pada Top Blogger

Dalam tutorial ini kita tetap menggunakan jQuery, sepertihalnya tutorial sebelumnya yang membahas Cara membuat Sexy Vertical Sliding Panel mengggunakan jQuery And CSS3 di Blogger dan Cara membuat Tab Slick menggunakan Java Srcipt jQuery sekarang akan kita bahas dari beberapa referensi yang saya ambil tentang Cara buat Navigasi yang berbeda pada Top atau A Different Top Navigation pada Blogger.

Silahkan lihat untuk demo di link :
Demo

Berikut Cara Sebuah Navigasi yang berbeda-beda bagian atas atau A Different Top Navigation pada Blogger :

Silahkan Login dan masuk pada Edit Blogger kemudian Back Up template.
Tambahkan Script jQuery dibawah ini pada bagian <head> atau diatas kode <b:skin><![CDATA[ :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Setelah ditambahkan kemudian tambahkan diwahnya Script berikut ini :
<script type='text/javascript'>
$(document).ready(function(){
$("#main-nav li a.main-link").hover(function(){
$("#main-nav li a.close").fadeIn();
$("#main-nav li a.main-link").removeClass("active");
$(this).addClass("active");
$("#sub-link-bar").animate({
height: "40px"
});
$(".sub-links").hide();
$(this).siblings(".sub-links").fadeIn();
});
$("#main-nav li a.close").click(function(){
$("#main-nav li a.main-link").removeClass("active");
$(".sub-links").fadeOut();
$("#sub-link-bar").animate({
height: "10px"
});
$("#main-nav li a.close").fadeOut();
});

});
</script>
Kemudian masukan CSS dibawah ini ke Blog anda ( diatas kode ]]></b:skin> )

/*--------------------------------------------------
CSS TOP NAVIGATION
---------------------------------------------------*/
#wrap {
margin-left: auto;
margin-right: auto;
width: 900px;
position: relative;
}

#main-nav {
margin: 0px 0px 0px 2px;
text-align: left;
min-height: 25px;
padding-top: 10px;
padding-left: 0px;
}
#main-handle {
width: 605px;
float: right;
margin-top: -1px;
}
#main-nav li {
display: inline;
list-style: none;
}
#main-nav li a {
margin-right: 5px;
font-size: 15px;
text-decoration: none;
color: #f2f2f2;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-weight: bold;
padding: 10px;
outline: 0;
position: relative;
top: -2px;
}
#main-nav li a:hover, #main-nav li a.active {
background: #514539;
}
#sub-link-bar {
background: #514539;
min-height: 10px;
border-bottom: #645546 1px solid;
}
.sub-links {
display: none;
position: absolute;
width: 100%;
top: -30px;
text-align: left;
left: 0px;
}
#main-nav li .sub-links li a:hover{
background: #2d2620;
}
#main-nav li a.close{
display: none;
margin-top: 8px;
position: absolute;
background:url(http://lh5.ggpht.com/_HR8egC6j8tg/TEHTPAkPZJI/AAAAAAAAAOE/mvjEVRA-S3I/minus.png) 0px 0px no-repeat;
}
#main-nav li a.close:hover{
display: none;
margin-top: 8px;
position: absolute;
background:url(http://lh5.ggpht.com/_HR8egC6j8tg/TEHStBuH-BI/AAAAAAAAAOA/HmIDAZ33wYA/plus.png) 0px 0px no-repeat;
}
}


.round {
display:block
}
.round * {
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#645546
}
.round1 {
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #443a30;
border-right:1px solid #443a30;
background:#56493c
}
.round2 {
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #322a23;
border-right:1px solid #322a23;
background:#594c3e
}
.round3 {
margin-left:1px;
margin-right:1px;
border-left:1px solid #594c3e;
border-right:1px solid #594c3e;
}
.round4 {
border-left:1px solid #443a30;
border-right:1px solid #443a30
}
.round5 {
border-left:1px solid #56493c;
border-right:1px solid #56493c
}
.roundfg {
background:#645546
}
/*-- Akhir CSS Top Navigation --*/

Masukkan HTML dibawah ini pada blogger, atau pada bagian Body atau dibawah kode <body>

<div id='sub-link-bar'/>



<div id='wrap'>
<div id='main-handle'>
<div class='roundfg'>
<ul id='main-nav'>
<li><a class='main-link' href='http://stylebloggertemplate.blogspot.com'>Home</a>
<ul class='sub-links'>
<li><a class='main-link' href='http://stylebloggertemplate.blogspot.com'>Home</a></li>
</ul>

</li>
<li><a class='main-link' href='http://stylebloggertemplate.blogspot.com/'>Tutorials</a>
<ul class='sub-links'>
<li><a href='http://www.reogdesign.co.cc' title='Reog Design'>Design</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/search/label/' title='Tutorial HTML & CSS'>HTML & CSS</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/search/label/Jquery/' title='View all posts filed under HTML & CSS'>Jquery</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/search/label/Tutorial%20Blogger' title='Tutorial Blogger'>Blogger</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/search/label/' title='Tutorial Wordpress'>Wordpress</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/search/label/Tutorial%20Blogger' title='Tutorial PHP'>PHP</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/search/label/Tutorial%20Blogger' title='Tutirial Java Script'>Java Script</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/search/label/Tips%20Trik%20Blogger/' title='Tips & Triks'>Tips & Triks</a> </li>
</ul>
</li>

<li><a class='main-link' href='http://stylebloggertemplate.blogspot.com/'>Articles</a>
<ul class='sub-links'>
<li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under General'>General</a> </li>

<li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under Interviews'>Interviews</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under News'>News</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under Web Roundups'>Web Roundups</a> </li>
</ul>
</li>
<li><a class='main-link' href='http://stylebloggertemplate.blogspot.com/'>Freebies</a>

<ul class='sub-links'>
<li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under Books'>Books</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under Icons'>Icons</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under Lightboxes'>Lightboxes</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under Others'>Others</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under Plugins'>Plugins</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under Themes'>Themes</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under Tooltips'>Tooltips</a> </li>
</ul>
</li>

<li><a class='main-link' href='http://stylebloggertemplate.blogspot.com/'>Videos</a>
<ul class='sub-links'>
<li><a href='http://stylebloggertemplate.blogspot.com/' title='Screencasts'>Screencasts</a> </li>
</ul>
</li>

<li><a class='main-link' href='http://stylebloggertemplate.blogspot.com/'>About</a>
<ul class='sub-links'>
<li><a href='http://stylebloggertemplate.blogspot.com/' title='Screencasts'>Style Blogger Template</a> </li>
<li><a href='http://reogdesign.co.cc' title='Screencasts'>Reog Design</a> </li>
</ul>
</li>

<li><a class='close' href='#' title='Click to Collapse'/></li>
</ul>
</div>

<b class='round'> <b class='round5'/> <b class='round4'/> <b class='round3'/> <b class='round2'><b/></b> <b class='round1'><b/></b></b> </div>


</div>

Langkah terakhir silahkan Save Template dan lihat hasilnya.

Jika Java Script jQuery sudah ada/terpasang di template maka Java Script pada Langkah 2 tidak perlu ditambahkan kembali. Jika ingin lebih amanya silahkan simpan Java Script jQuery pada hosting anda sendiri

Dari berbagai sumber

IDIN ROHIDIN

Navigasi yang berbeda pada Top Blogger

Artikel Terkait

0 komentar:

Posting Komentar

Search This Blog

Tutorial

Recent posts

Popular posts