2012-02-26

Navigasi Menu dengan CSS3 Menu Maker



Sudah beberapa kali saya posting mengenai cara membuat Menu Navigasi horizontal yang bisa di baca Disini dan juga Disini, tetapi sekarang saya akan bahas tentang cara membuat Menu Navigasi Horizontal dengan CSS3 Menu Maker jQuery.
Kamu akan dengan mudah memilih dan menyesuikan tampilan warna dan model Menu CSS3 tersebut seperti yang kamu sukai.... Tutorial ini menggunakan tampilan blogger baru, jika belum familiar dengan tampilannya jadi sebaiknya rubah dulu ke tampilan blogger baru, Cara merubah tampilan dasboard baru bisa baca Disini dan jangan lupa juga untuk membackup template sebelum melakukan Edit Template cara membackup template bisa baca Disini!

Navigasi Menu dengan CSS3 Generator

1. Silahkan masuk ke CSS3 Menu Generator
2. Akan terlihat beberapa pilihan yang berguna untuk menyesuaikan tempilan yang diinginkan mulai dari warna menu, jenis huruf, model kotak pencarian dan lain2.
3. Kalau sudah lihat kanan atas dan Klik "Grab The Menu Code" akan muncul jendela tampilan kode dan terdapat 3 jenis kode, kode ini yang harus dimasukkan kedalam template blog kamu silahkan lanjutkan kebawah :
4. Sekarang masuk ke Dasboard >> Klik ikon tanda anak panah >> Template >> Edit HTML >> Proceed
 Akan muncul Jendela baru yaitu Kode HTML template
5. Salin dan letakkan kode 1 (pertama) diatas kode ]]></b:skin>
6. Salin dan letakkan kode 2 (kedua) tepat dibawah :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
Jika tidak menemukan kode paa langkah 6 ini. cari yang mirip seperti kode diatas.
7. Salin dan letakkan kode 3 (ketiga) tepat diatas </head> (Jika terjadi error langkah 7 ini bisa dilewatkan saja)
8. Simpan Template dan lihat hasilnya

Jangan lupa untuk merubah Link dan nama Link kode ini terdapat pada kode 2 (kedua) contohnya seperti ini :
<a href="#">portfolios</a>
<a href="#">Latest Projects</a>
- Rubah tanda pagar dengan URL Blog kamu
- Rubah Teks warna Merah dengan nama dari blog kamu
Kalau menemukan kerusakan pada CSS3 Menu Maker mohon untuk memberitahu saya melalui komentar ini. Selamat mencoba maturtenkiu...

Dapatkan artikel terbaru seperti Navigasi Menu dengan CSS3 Menu Maker langsung ke Email kamu..!!!


Ada 10 komentar untuk Navigasi Menu dengan CSS3 Menu Maker

  1. Bang untuk rounder corner'nya kok gak sama yah..?,yang pojok kiri bentuknya kotak sedangkan yang pojok kanan bentuknya setengah lingkaran..,padahal waktu edit di menu markernya saya buat setengah lingkaran.

    BalasHapus
    Balasan
    1. Tadi servernya sy pindah jd ada sedikit error. skarang sdh selesai silahkan coba lg bro...!

      Hapus
    2. Kalau bikin menu navigasi kay punya si bos gmana,,,kaya menu yang paling atas,,,

      Hapus
    3. Bisa masuk kesini : http://u-sup.blogspot.com/2011/12/bikin-breadcrumb-menu-plus-submenu.html

      Hapus
    4. Kode ke 3 kok ada tulisan seperti ini mas,,,gmn nih. saya udah naruh tepat diatas penutup head


      "Error parsing XML, line 1004, column 531: The content of elements must consist of well-formed character data or markup"

      Hapus
    5. Klw error bs lewatkan langkah 7 .

      Hapus
    6. Makasi bang,,,udah jadi nih, tapi tanpa search

      Hapus
  2. kode yang nomor 2 ngak ketemu kak.. ngak sama

    BalasHapus
  3. manteb sup blognya.. tetap semangat...

    BalasHapus
  4. Saya coba terpakan gan, trims ya...di tunggu kunjungan baliknya.

    BalasHapus