Menu navigasi Garagedoor Effect with jQuery

Home » Tips Blogger » Menu navigasi Garagedoor Effect with jQuery

Menu navigasi Garagedoor Effect with jQuery

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></b:skin>
7. Dan Simpan kode berikut diatasnya :

/* ---------------
Menu navigasi Garagedor with jQuery
---------------------------------- */
.garagedoor a:active, .under_header a:active, .header a:focus, .under_header a:focus {
   outline: none; -moz-outline-style: none;
}

.garagedoor img {
   border: 0px; display: block;
}

.item .mouse {
   height: 80px;
   width: 100px;

   margin:0;padding:0;border:0;display:block;left:0;position:absolute;cursor:pointer;top:0;
}

.item .mouse img {
   height: 80px;
   width: 100px;

   margin:0;padding:0;
}

.item {
   height: 80px;
   width: 100px;
   color: black;

   overflow:hidden;display:block;overflow:hidden;position:relative;margin:0;padding:0;float:left;background-repeat:no-repeat;text-decoration: none;
}

.item .underlay {
   padding: 10px;
   padding-top: 30px;
   color: #000;
   background: #fff;
        height: 80px;
   position:absolute;left:0px;top:0px;
}

.item .overlay {
   height: 80px;
   width: 100px;

   margin:0;padding:0;border:0;left:0;position:absolute;top:0;
}

8. Selanjutnya simpan script berikut diatas kode </head>:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://kangdadang.googlecode.com/files/garagedoorjQuery.js" type="text/javascript"></script>

9. dan simpan juga script ini diatas kode </body> :

<script type='text/javascript'>
GarageDoor.scrollY = -55;
GarageDoor.setBindings('garagedoor');
</script>

10. Cara menggunakannya:

<div class="garagedoor" id="garagedoor">
<div style="text-align: center;">

</div>
<div class="item" style="text-align: center;" title="#">
<div class="underlay">
Read my blog entries</div>
<img alt="" class="overlay" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Lp7Cq7Uvqx3bYStpQxwvpfy93ZLktk-sNpNRw5PfTsfzgrmSHEj7JhYK2DObv3Krl39weABYMlFI7oRCkN7Z8Hq4S_dVjb2xix5VAMIAG-pY-dCXKkQKgKp4e-AtS4zrrUqJ6eLiDcM/s1600/garage5.jpg" />
<div class="mouse">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY5_qpw_vWdl6i-m5ooUUZJirlJVBOVpkU6772Vvs_SklgydBlkSv9Ehnf8wgJ422iGbiG0yHcw_I3WffxFaH2MOXPmRmlPMZrxYQIL7ZKgnyL7EJ1clt3T5Ov0ddAntWg0pzTqgzPd-8/s1600/nothing.gif" /></div>
</div>
<div class="item" style="text-align: center;" title="#">

<div class="underlay">
information about me</div>
<img alt="" class="overlay" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0YNzYZm6us0wNTpQKhc8AOF0NTwhwwFeL7NpL9z943kIJSDFoLW0IK_xR4rGmsjlxpEvQl0tx_DH-S2kv6D7J9WLUrHIRd7J7BW_aORYl2iGeKSSZ3-x3knftsAw5jZpMgA8y7Xug1po/s1600/garage2.jpg" />
<div class="mouse">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY5_qpw_vWdl6i-m5ooUUZJirlJVBOVpkU6772Vvs_SklgydBlkSv9Ehnf8wgJ422iGbiG0yHcw_I3WffxFaH2MOXPmRmlPMZrxYQIL7ZKgnyL7EJ1clt3T5Ov0ddAntWg0pzTqgzPd-8/s1600/nothing.gif" /></div>
</div>
<div class="item" style="text-align: center;" title="#">
<div class="underlay">
People that rock</div>
<img alt="" class="overlay" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnPk4MoD_ZCGe_Pk02zD33jdMiJZ-QTnzZ5DEwUSEeSy968da1CnxsscAlwHd2bRBi3uz2srHYRs1KPWJVdCV8SFRGPJtXid9rxT51Ti8KYfz5M8kp5OZ2tGOraMsQcYV8bro2uaBDI9o/s1600/garage3.jpg" />
<div class="mouse">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY5_qpw_vWdl6i-m5ooUUZJirlJVBOVpkU6772Vvs_SklgydBlkSv9Ehnf8wgJ422iGbiG0yHcw_I3WffxFaH2MOXPmRmlPMZrxYQIL7ZKgnyL7EJ1clt3T5Ov0ddAntWg0pzTqgzPd-8/s1600/nothing.gif" /></div>
</div>
<div class="item" title="#">
<div class="underlay" style="text-align: center;">
Send me a message.</div>
<div style="text-align: center;">
<img alt="" class="overlay" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi52uQnsD7fmcNrwwR4OzuJqXCqApUb9zH2xU-b0o7H1esyPgnTPujfErG5AQMKIdY0df0h_53tmcqPtX6n_NkuIBwCYRrMhvD3Kqsho7m8sZ0SBXPg-XaB_PGE0HvH9YJxXkLMFVUp4YM/s1600/garage4.jpg" /></div>
<div class="mouse" style="text-align: center;">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY5_qpw_vWdl6i-m5ooUUZJirlJVBOVpkU6772Vvs_SklgydBlkSv9Ehnf8wgJ422iGbiG0yHcw_I3WffxFaH2MOXPmRmlPMZrxYQIL7ZKgnyL7EJ1clt3T5Ov0ddAntWg0pzTqgzPd-8/s1600/nothing.gif" /></div>

</div>
</div>