Cara membuat menu Aplebar dengan efek sliding Jquery di blog

View Demo

• Masuk ke akun blogger anda -> KlikTemplate -> Edit HTML

• Cari tag / kode </head> dengan menggunakan CTR + F untuk memudahkan pencarian tag.

• Pastekan Script kode berikut tepat diatas kode </head>

<script src='http://bloggertrixcode.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'/> <script src='http://bloggertrixcode.googlecode.com/files/kwicks.js' type='text/javascript'/> <script src='http://bloggertrixcode.googlecode.com/files/custom.js' type='text/javascript'/>

• Simpan Template

• Kemudian masuk -> Tata Letak

• Klik Tambahkan Gadget -> Pilih HTML/Javascript

• Pastekan kode dibawah ini didalamnya:

<style>
.kwicks {
     list-style: none;
     position: relative;
     margin: 0;
     padding: 0;
     background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQkWWUgZCwdYEf26Md70AXAdUCYJsTIp02Uq7Ft5n_BWfeJh4vByKJPcpZEb3YBGkERdy-Q9GL8y270UqmeWEG45QsljtcMwSqFrvUnxMC2-NccLhDm_OSoVd0AnpqJWbipm2NqPoQfu8/s1600/btrix_no_flicker.jpg); /*some browsers are to slow when aligning the menu items via jQuery and so the background shines through, this prevents this flickering*/}
 .kwicks li{
    display: block;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
 float: left;
 width: 125px;
 height: 40px;
 margin-right: 0px;
 background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiit1Hs8igXDNNyF2IXNpntwE6whw7HuzC0-AjxdimJHRW_r37fKn7-XQE9F7P0osnFMN0uuYDDlnrnJo81KrAA2ziRYnh0Y4x0MNFESJHQGd5vdudtUmi1SwmKcl-r2CRFhvvAYAJJhvQ/s1600/btrix_kwicks_sprite.jpg);
 background-repeat:no-repeat;}
.kwicks a{
 display:block;
 height:40px;
 text-indent:-9999px;
 outline:none;}
#kwick1 {
 background-position:0px 0px;}
#kwick2 {
 background-position:-200px 0px;}
#kwick3 {
 background-position:-400px 0px;}
#kwick4 {
 background-position:-600px 0px;}
#kwick1.active, #kwick1:hover {
 background-position: 0 bottom;}
#kwick2.active, #kwick2:hover{
 background-position: -200px bottom;}
#kwick3.active, #kwick3:hover {
 background-position: -400px bottom;}
#kwick4.active, #kwick4:hover {
 background-position: -600px bottom; }
#kwick1 a{
 background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKiGcX3UfeaJb2a5YwF2YhlqjRqRhnFIGUKnYC4HKlO8IAO-jt9DXPsV63Z3Pd6E1AXBniRc_Xd1tK-C1PTEPtoKLuWQ1Dq5X-TSZhq6Yn-JCcJTUjDqEjezHNP83fsPyaU4jm4yA0B24/s1600/btrix_end.jpg);
 background-repeat:no-repeat;
 background-position: left 0px;}
#kwick1 a:hover{
 background-position: left -80px;}
#kwick4 a{
 background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKiGcX3UfeaJb2a5YwF2YhlqjRqRhnFIGUKnYC4HKlO8IAO-jt9DXPsV63Z3Pd6E1AXBniRc_Xd1tK-C1PTEPtoKLuWQ1Dq5X-TSZhq6Yn-JCcJTUjDqEjezHNP83fsPyaU4jm4yA0B24/s1600/btrix_end.jpg);
 background-repeat:no-repeat;
 background-position: right -40px;}
#kwick4 a:hover{
 background-position: right -120px;
}
</style>
<ul class="kwicks">
     <li id="kwick1"><a href="#">Home</a></li>
     <li id="kwick2"><a href="#">Contact</a></li>
     <li id="kwick3"><a href="#">Downloads</a></li>
     <li id="kwick4"><a href="#">Search</a></li>
 </ul>  

• Ganti tanda # dengan link anda

• Simpan Gadget....Selesai.

Semoga bermanfa'at...

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 17.00