Berikut langkah - langkah project latihan kita kali ini.
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : <head>
5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini sebelum atau diatas kode <head> kalau tidak bisa taruh dibawahnya saja.
<link rel="stylesheet" href="https://sites.google.com/site/jayanaktkj/fancy-menu/style.css?attredirects=0&d=1" type="text/css" media="screen"/>
<script type="text/javascript" src="https://sites.google.com/site/jayanaktkj/fancy-menu/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/jayanaktkj/fancy-menu/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#navigation > div').hover(
function () {
var $this = $(this);
//$this.find('.images').fadeIn();
$this.find('a.menu').removeClass('menu').addClass('hovered');
$this.find('.images').stop().animate({
'width' :'230px',
'height' :'390px',
'opacity' :'1.0'
},400,'easeOutBack',function(){
$(this).parent().find('div').fadeIn('fast');
});
},
function () {
var $this = $(this);
$this.find('div').fadeOut(500);
//$this.find('.images').hide();
$this.find('a.hovered').removeClass('hovered').addClass('menu');
$this.find('.images').stop().animate({
'width' :'100px',
'height' :'0px',
'top' :'0px',
'left' :'0px',
'opacity' :'0.9'
},600,'easeOutBack');
}
);
});
</script>
6. Setelah Itu Beralihlah dan cari kode <body>
Jika Sudah, taruh kode dibawah ini sebelum atau diatas kode <body> , kode ini juga bisa juga diletakan di sidebar yaitu dengan cara tanbag Gadget.
KET:<br clear="all" />
<div id="content">
<div class="total_images" id="navigation">
<div class="eachs" id="link1">
<a href="#" class="menu" style=" width:90px;">Beranda</a>
<img src="http://stashbox.org/1072268/bg.png" alt="" width="140" height="140" class="images"/>
<div>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Sub Item 5</a></li>
<li><a href="#">Sub Item 6</a></li>
<li><a href="#">Sub Item 7</a></li>
<li><a href="#">Sub Item 8</a></li>
</ul>
</div>
</div>
<div class="eachs" id="link4">
<a href="#" class="menu" style=" width:90px;">Web</a>
<img src="http://stashbox.org/1072268/bg.png" alt="" width="140" height="140" class="images"/>
<div>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
<li><a href="#">Sub Item 5</a></li>
<li><a href="#">Sub Item 6</a></li>
<li><a href="#">Sub Item 7</a></li>
<li><a href="#">Sub Item 8</a></li>
<li><a href="#">Sub Item 9</a></li>
</ul>
</div>
</div>
<div class="eachs" id="link2">
<a href="#" class="menu" style=" width:100px;">Blogger</a>
<img src="http://stashbox.org/1072268/bg.png" alt="" width="160" height="199" class="images"/>
<div>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
<li><a href="#">Sub Item 5</a></li>
<li><a href="#">Sub Item 6</a></li>
<li><a href="#">Sub Item 7</a></li>
<li><a href="#">Sub Item 8</a></li>
<li><a href="#">Sub Item 9</a></li>
</ul>
</div>
</div>
<div class="eachs" id="link3">
<a href="#" class="menu" style=" width:72px;">CSS</a>
<img src="http://stashbox.org/1072268/bg.png" alt="" width="160" height="199" class="images"/>
<div>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
<li><a href="#">Sub Item 5</a></li>
<li><a href="#">Sub Item 6</a></li>
<li><a href="#">Sub Item 7</a></li>
<li><a href="#">Sub Item 8</a></li>
<li><a href="#">Sub Item 9</a></li>
</ul>
</div>
</div>
<div class="eachs" id="link5">
<a href="#" class="menu" style=" width:84px;">jQuery</a>
<img src="http://stashbox.org/1072268/bg.png" alt="" width="160" height="199" class="images"/>
<div>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
<li><a href="#">Sub Item 5</a></li>
<li><a href="#">Sub Item 6</a></li>
<li><a href="#">Sub Item 7</a></li>
<li><a href="#">Sub Item 8</a></li>
<li><a href="#">Sub Item 9</a></li>
</ul>
</div>
</div>
<br clear="all" /><br clear="all" /><br clear="all" /><br clear="all" />
</div>
</div>
<br clear="all" />
Ganti tanda # dengan alamat blog kalian masing maising diingatkan url dimulai dengan http://
contoh http://blogcunayz.blogspot.com/
7. Silahkan anda priview dulu dari hasil latihan ini ,apabila semua berjalan dengan sempurna barulah anda save project latihan ini.
Ditulis Oleh : Unknown ~ KRJ_Team
Anda sedang membaca sebuah artikel yang berjudul Fancy Menu Drop Down dengan ( jQuery ), Semoga artikel tersebut bermanfaat untuk anda, Mohon maaf apabila konten yang anda baca rusak atau salah dalam penulisan. Jika ada pertanyaan, kritik, dan saran yang ingin di sampaikan silahkan tulis di kotak komentar
0 komentar "Fancy Menu Drop Down dengan ( jQuery )", Baca atau Masukkan Komentar
Posting Komentar
~~ KOMENTAR HARUS ~~
1. SOPAN
2. BIJAK
3. MASUK AKAL
4. GAK BOLEH KOMENTAR SAMPAH CONTOHNYA . PERTAMAXX !!!
Ty..