* Langkah pertama masuk ke blogger dan menuju Edit HTML
* Tekan F3 dan cari kode <head> letakan kode jQuery dan CSS3 dibawah ini bawah kode <head>
<link href='https://sites.google.com/site/shofisanjaya/menujquerycss/screen.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$('#nav li').hover(function () {
$(this).find('.dropDown').slideToggle(200);
$(this).toggleClass('active');
});
});
</script>
* Simpan template kamu dan langsung menuju Elemen Laman tambahkan kode HTML dibawah ini didalam kolom tambah HTML/JavaScript yaitu dengan cara Tambah Gadget lalu pilih HTML/JavaScript
<!-- Begin nav markup -->
<div id="navContainer">
<ul class="clear" id="nav">
<li class="first"><a href="http://shofisanjaya.blogspot.com/">Beranda</a></li>
<li><a href="#">Software</a>
<div class="dropDown">
<div class="top"></div>
<div class="items">
<ul>
<li class="first"><a href="#">Software 1</a></li>
<li><a href="#">Software 2</a></li>
<li><a href="#">Software 3</a></li>
<li><a href="#">Software 4</a></li>
<li class="last"><a href="#">Software 5</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#">Games</a>
<div class="dropDown">
<div class="top"></div>
<div class="items">
<ul>
<li class="first"><a href="#">Games 1</a></li>
<li><a href="#">Games 2</a></li>
<li><a href="#">Games 3</a></li>
<li><a href="#">Games 4</a></li>
<li class="last"><a href="#">Games 5</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#">jQuery</a>
<div class="dropDown">
<div class="top"></div>
<div class="items">
<ul>
<li class="first"><a href="#">jQuery 1</a></li>
<li><a href="#">jQuery 2</a></li>
<li><a href="#">jQuery 3</a></li>
<li><a href="#">jQuery 4</a></li>
<li class="last"><a href="#">jQuery 5</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#">Profile</a></li>
<li class="last"><a href="#">Kontak</a></li>
</ul>
</div>
<!-- End tab markup -->
* Ganti alamat url beranda dengan alamat url blog kamu, dan ganti juga simbol # dengan alamat url, diingatkan penambahan url harus dimulai dengan http:// contohnya seperti http://wedung.com/
* Penting ! lihat kode dibawah ini simbol # jangan kamu ganti biarkan saja tetap # yang artinya link kosong
<li><a href="#">Software</a>
<li><a href="#">Games</a>
<li><a href="#">jQuery</a>
* Simpan dan lihat hasilnya, bila template kamu cocok dengan menu ini, maka menu ini akan tampil lebih bagus di template kamu...
0 komentar:
Posting Komentar