Membuat Menu Navigasi Ungu-Q



Hi all... kali ini anni3 lagi bingung nih! kan ceritanya waktu pelajaran komputer... anni3 disuruh ngejelasih gimana caranya bikin menu navigasi kayak di x4 Girl

Yah akhirnya anni3 tulis aja deh di sini! He..he.. sekalian amalllzz...

Kalo nggak bisa ngejelasin menunya trus gimana bisa dapet menu sebagus itu??? [narsis mode: on]:gatau:

Kan kita gak bisa hapalin satu2 trik2 yang ada di bLoG, misalnya aja read more, ada yang bisa hapalin rumusnya??? gak ada kan? (iya kan?)

Nah sekarang anni3 akan menjelaskan asal muasal menu ini.

Skripet menu ini aslinya anni3 dapet dari Dynamic Drive - Indent Menu
nah trus untuk memudahkan, anni3 juga memakai Menu bar Widget milik Dunia Blogger... (aduuhh... kapan bisa bikin skripet sendiri ya???)

Nah trus abis itu ganti gambarnya dan finally... jadi deh Menu Ungu-Q!

Nah buat yang mau... Silakan ikuti peta di bawah ini!!!

  1. Masuk ke akun blogger kalian.
  2. Masuk ke Tata Letak ------> Edit HTML
  3. Pilih Expand Template Widget
  4. Masukkan kode ini tepat di atas kode ]]></b:skin>

    /* Ungu-Q menu -- di edit oleh @Nn!3 (www.anni3access.co.cc) */
    .ungumenu{font: bold 13px Verdana;
    width: 100%;
    overflow: hidden;}

    .ungumenu ul{margin: 0; padding: 0;
    float: left; width: 100%;
    border: 2px solid #000000;
    border-width: 2px 0;
    background: black url(http://xj9.site50.net/other/Aurariezta/menu-anni3.gif) center center repeat-x;}

    .ungumenu ul li{display: inline;}

    .ungumenu ul li a, .ungumenu ul li a:visited{float: left; color: white;
    padding: 5px 11px; text-decoration: none;
    border-right: 2px solid #000000;}

    .ungumenu ul li .current, .ungumenu ul li a:hover{color: black !important;
    background: black url(http://xj9.site50.net/other/Aurariezta/menu-hover-anni3.gif) center center repeat-x;}

  5. Nah... abis itu cari kode ini

    <b:includable id='description'>
    <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
    </div>
    </b:includable>
    </b:widget>
    </b:section>



    Trus taruh kode ini tepat dibawahnya...

    <div id='ungumenu-wrapper'>
    <b:section class='ungumenu' id='ungumenu' showaddelement='no'>
    <b:widget id='LinkList10' locked='true' title='Ungu-Q Menu' type='LinkList'>
    <b:includable id='main'>

    <div class='widget-content'>
    <ul>
    <li><a class='current' href='/'>Home</a></li>
    <b:loop values='data:links' var='link'>
    <li><a expr:href='data:link.target'><data:link.name/></a></li>
    </b:loop>
    </ul>
    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>
    </b:section>
    </div>

  6. Nah... ini yang paliiiiing penting! klik Simpan Template... :D
Catatan: Kalau ternyata menunya jadi terlalu atas, coba pindahin kode menunya (yang dari <div id='ungumenu-wrapper'> sampai </div>) ke bawah kode <div id='content-wrapper'>

Jangan lupa kirim koment di bawah ya!!! :)

Update:
ada yang kelupaan!!! yaitu setelah disimpan kamu harus ke Element Halaman, terus cari widget yang namanya Ungu-Q menu. setelah itu edit dan isi dengan menu-menunya, dan satu lagi! Home tidak usah ditulis karena sudah otomatis dimasukkan!!!
thanks buat Evi...

8 komentar:

  1. @evi: ini aneh... padahal anni3 udah mencobanya di minima juga kok!!! kalau terlalu atas bisa dipindahin... coba lihat di sini

    BalasHapus
  2. hyuh~~..
    ga bisa di simpen templatenya..
    ntar ak coba meneliti dl templatenya.. hahaha.. uda kek detective aja nieh.. hohohoho..
    mba, tukaran link yuk..
    ak uda add mba di blog ak, biar lebi gampang mengetahui keberadaaan mba.. hihi..

    BalasHapus
  3. Wehehehe

    ada blog kelinci percobaan...

    mo liat ah kyk apa kelincinya :)

    BalasHapus
  4. huyuh~~ koq masi ga bisa ya?
    paz di save selalu aja mcul neh kalimat :
    "lebih dari satu widget ditemukan dengan ID: HTML10. ID widget seharusnya unik."
    itu knp ya?
    maklum.. masi gaptek soal gini2an.. hihi..

    BalasHapus
  5. ??? HTML ???

    Bukannya nanti id-nya jadi LinkList bukan HTML???

    Hmm... kalo gitu coba ganti angkanya jadi angka yang lebih besar misal 20 atau apa gitu...

    Atau mungkin bisa membaca yang punya Kak Ade di sini biar lebih jelas...

    *sorry...*

    BalasHapus
  6. huaa mba... rupanya ini gr2 ak masi memake template klasik.. hihihhi..

    BalasHapus
  7. jreng... jreng... ternyata...

    @Evi: hhmm... kalo pake template Klasik gimana ya??? katanya susah ya kalo mau masukin widget??? secara anni3 pake yang baru...

    BalasHapus