Navbar Animasi tanpa Flash (JQuery)

Diposting oleh rizalfauzan's blog di 15.05
Daripada berlama-lama, dan aku tau kalian dah gak sabar. Mending langsung aja ke tutorìal
Pertama langsung aja ke edit HTML pada template kamu!
Pastein kode CSS ini diatas ]]></b:skin>

.menu2 a {
padding: 14px 10px;
display: block;
color: #CCF2FF;
width: 100px;
text-decoration: none;
font-weight: bold;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnfASZq8qKEYXZwevj-Jaoj26tnp3rzNpPE872XLMBWtXQfJ7xKSn2gEDy9uXwMiClP7-akidrAPAKiS7BzfRd3rtyCmZIdSLXKXzzMiw1PReUfvNsIfDKN8gpFd8FpElOXurml6Rnnns/s320/akeg.png) no-repeat center center;
}
.menu2 li em {
font-weight: normal;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCt-w24cmtZ9z7nF1c7pFxiz6Zx4NrJWg_g0dYkBjbXda1Jfwblk4b8rH9pepq77UAVE3bhjKFr6U6efO2J2q2Yeyyz7rlTI93WhofJSdwwn4621lurbkiI0bSmOINZL8268l5b2F0a_w/s1600/black_arrow.png) no-repeat;
width: 180px;
height:35px;
position: absolute;
top: 10px;
left: -25px;
text-align: center;
color:#fff;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
}

Kalo udah, install JQuery ini di template kamu! (paste di atas </head>)
(Kalo sebelumnya dah pernah instal lewati aja)
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js' type='text/javascript'/>
Lalu Paste script ini dibawah JQuery tadi
<script type='text/javascript'>
$(document).ready(function(){

$(&quot;.menu2 a&quot;).append(&quot;<em/>&quot;);

$(&quot;.menu2 a&quot;).hover(function() {
$(this).find(&quot;em&quot;).animate({opacity: &quot;show&quot;, top: &quot;-75&quot;}, &quot;slow&quot;);
var hoverText = $(this).attr(&quot;title&quot;);
$(this).find(&quot;em&quot;).text(hoverText);
}, function() {
$(this).find(&quot;em&quot;).animate({opacity: &quot;hide&quot;, top: &quot;-85&quot;}, &quot;fast&quot;);
});
});
</script>
Simpan dulu templatenya
Sekarang tinggal membuat menunya!
Kode HTMLnya sebagai berikut:

    <!-- Navigation Menu -->
<ul class='menu2'>
<li>
<a href='#' title='Kata yang Muncul'>Link1</a>
</li>
<li>
<a href='#' title='Kata yang Muncul'>Link2</a>
</li>
<li>
<a href='#' title='Kata yang Muncul'>Link3</a>
</li>
<li>
<a href='#' target='blank' title='Kata yang Muncul'>Link4</a>
</li>
<li>
<a href='#' target='blank' title='Kata yang Muncul'>Link5</a>
</li>
<li>
<a href='#' target='blank' title='Kata yang Muncul'>Link6</a>
</li>
</ul>
    <!-- /Navigation Menu -->
Perhatikan beberapa kode yang bisa kamu ubah!
  • kode berwarna hijau adalah tujuan dari menu
  • warna merah adalah kata yang ingin dimunculkan
  • yang berwarna biru adalah tulisan pada menu
Ada 2 cara pemasangan yang bisa kamu lakukan
Via tambah gadget seperti biasa
  1. Dari elemen halaman -> tambah gadget -> HTML/Javascript
  2. Pastein kodenya disitu!
  3. Simpan!
  4. Supaya bagus, pindahin gadget tadi tepat dibawah header!
  5. Pada beberapa template sering ditemui kasus sebuah gadget gak bisa diletakkan di bawah header
  6. Jika kamu mengalami hal ini, klik spoiler ini untuk mengatasinya!
  7. hapus kode kode locked='true' yang ada pada template kamu
Cara kedua adalah dengan menaruhnya di dalam elemen header pada template
  • Kode header kurang lebih:
<b:widget id='Header1' locked='true' title='JUDUL BLOG (Header)' type='Header'/>
</b:section>
  • Nah kode HTMLnya dipastein di BAWAH kode kuning
  • kalau sudah simpan templatenya!
Ditunggu lho komentarnya! semoga bermanfaat!!!!!
Label: