Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Sabtu, 19 Juni 2010

Membuat Menu Navigasi Dengan Jquery

Kategori :
Membuat Menu Navigasi Dengan Jquery memungkinkan blog kita menjadi lebih menarik dan unik bagi para pengunjung. Terlihat beda dari blog lain membuat blog kita menjadi lebih mudah diingat oleh pengunjung dan akan menghasilkan banjiran trafik yang berdatangan ke blog kita, namun itu hanya dari segi design saja kalau untuk segi seo saya kurang mengerti. Untuk belajar seo silahkan sobat cari di mbah google saya yakin sobat bingung oketrik.blogspot.com.

Kalau sobat mengikuti (Follow0) blog ini mungkin sudah pernah mendengar tentang Menu Navigasi. Yups benar menu yang berada di bawah header (biasanya). Nah kalau pada menu navigasi sebelumnya menimbulkan efek drop down (mempunyai anak menu yang muncul apabila disentuh oleh kursor) dan kalau yang sekarang efeknya keren deh pokoke lihat aja demo-nya di situ.

Nah setelah melihat demo-nya sekarang kita lihat cara pembuatannya.
  1. Seperti biasa login ke blogger


    Menu Navigasi Dengan Jquery


  2. masuk ke Rancangan (dulunya Tata Letak) => Edit HTML








  3. Setelah itu cari kode ]]></b:skin> lalu tambahkan kode di bawah ini tepat di atasnya


    #container {
    width: 660px; /*dapat sobat sesuaikan dengan lebar halaman blog sobat*/
    margin-top:-10px;
    }

    ul, li {
    margin: 0;
    padding: 0;
    }

    #blob {
    background: #0b2b61;
    border-right: 1px solid #0059ec;
    border-left: 1px solid #0059ec;
    position: absolute;
    z-index: 1;
    top: 0;
    background: -moz-linear-gradient(top, #0b2b61, #1153c0);
    background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-box-shadow: 2px 3px 10px #011331;
    -webkit-box-shadow: 2px 3px 10px #011331;
    }

    #nav {
    padding:5px;
    position: relative;
    background: #292929;
    float: left;
    }

    #nav li {
    float: left;
    list-style: none;
    border-right: 1px solid #4a4a4a;
    border-left: 1px solid black;
    }

    #nav li a {
    color: #e3e3e3;
    z-index: 2;
    position: relative;
    cursor: pointer;
    float: center;
    font-size: 13px;
    font-family: helvetica, arial, sans-serif;
    text-decoration: none;
    padding: 15px 26px;
    width: 100%;
    }





  4. Setelah itu cari kode yang hampir mirip dengan kode di bawah ini


    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Minimalist Template (Header)' type='Header'/>
    </b:section>
    </div>


    ...:::Catatan >> semua template mempunyai kode html yang berbeda-beda, inti dari kode di atas adalah Header-wrapper atau bisa juga header:::...

  5. Setelah ke temu kode seperti yang ada di atas, lalu tambahkan kode di bawah ini tepat di bawah-nya


    <div id="container">
    <ul id="nav">
    <li id="selected"><a href="/">Home</a></li>
    <li><a href="about.html">tulisan URL</a></li>
    <li><a href="Alamat URL">tulisan URL</a></li>
    <li><a href="Alamat URL">Tulisan URL</a></li>
    <li><a href="Alamat URL">Tulisan URL</a></li>
    </ul>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://oketrik.googlecode.com/files/Menusjquery.js"></script>

    <script type="text/javascript">
    $('#nav').spasticNav();
    </script>



  6. Setelah itu simpan dan lihat hasilnya.
Bagaimana trik kali ini? keren bukan? jelas saja keren karena saya dapatkan trik ini dari blog tetangga yaitu Hapia Mesir. Disana banyak sekali widget dan aksesoris untuk mempercantik blog sobat semua. sekarang saya pamit dulu y. Terima kasih dan Happy Blogging oketrik.blogspot.com.
Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg

28 Komentar untuk Membuat Menu Navigasi Dengan Jquery

Izin bookmark sob, cendolnya gan!!
he...he..

@2012 >> sip gan bookmark aja, thanks y dah berkunjung + komennya ^_^

Wah saya datang dari narutobleachlover
ternyata anda juga admin disana ya
wah semakin mantab saja.

mampir sambil klik iklan juga nech, kebiasaan di narutobleachlover :-)

@judi >> iya nih ane admin di narutobleachlover, ane minder jadi admin di narutobleachlover, coz adminnya pada master semua nih saya newbie sendiri....

salam kenal y ^_^

seep kawan, boleh nih pake jquery, biasanya bagus" hasilna, thanks :)

@oempak >> wah ini mah bukan keren lagi sob, tapi keuuureeeenn bgt...!!! coba dah ente liat demonya...

makasih tutorialnya, layak dicoba nih.
salam kenal.

@narti >> sama-sama...

coba aja gan, manteb dah...

salam kenal juga ^_^

klo pake jquery emang lebih halus..... meski udah bnyk bgt yg posting ini, tp ttp keren Kang...........

disempetin mampir mumpung istri udah plg dari RS meski masih harus istirahat total

@muzzy musthofa >> bener banget tuh mas muzzy musthofa udah banyak yang mosting kaya beginian,,,,

alhamdulilah istrinya sudah bisa pulang dari rumah sakit, semoga lekas sembuh y mas ^_^

Komentar ini telah dihapus oleh pengarang.

nice post mas... mas ada award buat mas di ambil ya!!!

kayknya keren ni bro...aku coba dulu bro...

@ntiem's >> makasih atas awardnya, akan segera saya ambil ^_^

@KONEK Blog's >> monggo mas dicoba :D

Wah semakin mantab aja sob....
sorri baru bisa OL ne baru dateng dari mudik ^_^
Sip deh ternyata udah posting lagi di narutobleachlover....
trimakasih sob...hehhehe

@azhie >> bisa aja gan, boleh nih oleh-olehnya hihihihi...
iya sama-sama :)

kesini aja aku kasih oleh2....tapi hanya punya rokok dan secangkir kopi.....hehehhehhe
Oke posingan yang bagus...heheh
akan segera aku indek setelah aku selesai ngedit komik bleach sama naruto hehehheheh.....
keep working guys...

@azhie >> hihihihi jangan di anggep serius gan, ane cuma becanda ^_^

Sip gan....

sob. .
contoh hasilnya gimana ya. . ??

apa ini g nambah berat load blog sob, soalnya blog q juga dah berat bgt

@Rizky2009 >> pastinya kang nambah berat blog hehehehehe....

Komentar ini telah dihapus oleh pengarang.

tq sob atas postinganx ini berguna wat blog aq.....lam kenal yo kang

mksh mas infonya..........nice inpo..:)

sukses trus ya,.....

thankz sob triknya. untuk saat ini sepertinya template SAYA UDA TERlalu berat deh.