Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Menu Navigasi dengan CSS

Hallo sobat, bagaimana kabarnya hari ini? mudah-mudahan sehat selalu ya, biar baca ni artikel semangat, ga loyo gitoe.

Ok, biar ga terlalu garing sedikit demi sedikit kita mulai memasuki topik bahasan, yoi kali ini saya mau membahas tentang cara membuat menu navigasi menggunakan CSS. Nah biar lebih paham apa yang akan saya sampaikan coba sobat arahkan mouse sobat ke navigasi berikut ini:

My Other Site

Rubrik Elektronik |
Blog Menu D’Tree |
Free Blog Templates |
Authorized Service |

Atau juga yang ini :

Rubrik Elektronik |
Blog Menu D’Tree |
Free Blog Templates |
Authorized Service |

Bagaimana sobat, sudah mendapat gambaran apa yang akan saya sampaikan? pasti jawabnya iya. Dengan adanya menu navigasi seperti di atas, tentunya akan lebih menarik perhatian para pengunjung blog kita di banding dengan hanya menu biasa, dan selain itu pula menu ini lebih memperjelas bahwa tulisan atau tombol tersebut merupakan sebuah tombol navigasi yang bisa di klik oleh para pengunjung.

Sekarang timbul pertanyaan bagaimana cara membuatnya? bagi yang belum tahu dan berminat untuk mengetahuinya silahkan sobat terus membaca sampai akhir artikel. Untuk membuat menu seperti yang terlihat di atas tadi, kita perlu menambahkan beberapa kode tambahan pada blog kita.

Seperti pada contoh tadi di atas, ada dua jenis menu navigasi yang akan saya bahas yakni yang tidak menggunakan Image backround serta yang menggunakan Image backround, silahkan simak langkah-langkah berikut ini :

  • buatlah dua buah tombol navigasi yang bentuknya sama persis, akan tetapi berbeda warna, ini di maksudkan agar ketika tombol mouse menunjuk tombol tersebut tombolnya akan berubah warna. Bagaimana cara membuat tombol? Tentu saja untuk membuat sebuah tombol, kita bisa menggunakan berbagai program komputer semisal adobe photoshop, coreldraw ataupun berbagai program lainnya.
  • Upload gambar tombol-tombol tersebut pada hosting penyimpan semisal www.photobucket.com
    untuk cara upload gambar sudah saya terangkan pada pembahasa yang lalu , jika sudah lupa silahkan klik Di sini
  • .

    Agar ada contoh, umpamanya kita mempunyai alamat tombol sebagai berikut :

  • Langkah selanjutnya adalah menambahkan kode, ada dua contoh yakni yang tidak memakai gambar tombol dan yang memakai gambar tombol. contoh yang tidak memakai gambar tombol :
    1. Tambahkan kode berikut sesudah kode <style type="text/css"> dan sebelum kode </style>, ya di mana saja asalkan di antara kode tadi.

    2. .unyil{
      text-align:left;
      display:block;
      width:180px;
      height:20px;
      background:#f0f0f0 url() top right no-repeat;
      padding:3px 4px 3px 8px;
      margin:7px 10px 7px 0;
      }

      .unyil:hover{
      background:#97A4B9 url() top right no-repeat;
      text-decoration:none;
      }

    3. copy kode di bawah ini, lalu paste di tempat yang sobat inginkan, bisa di sidebar, footer atau dimana saja, kemudian rubahlah dengan link yang sobat punya :

    4. <a class="unyil" href="http://rubrik-elektronik.blogspot.com">Rubrik Elektronik</a><span class="hide"> | </span>

      <a class="unyil" href="contoh-blog.blogspot.com">Blog Menu D'Tree</a><span class="hide"> | </span>

      <a class="unyil" href="http://rohman-freeblogtemplate.blogspot.com">Free Blog Templates</a><span class="hide"> | </span>

      <a class="unyil" href="http://kolom-authorized.blogspot.com">Authorized Service</a><span class="hide"> | </span>

    biar tidak telalu bingung, sedikit saya uraikan :

    .unyil –> kata .unyil bisa diganti apa saja yang penting harus sesuai dengan kode berikutnya.

    text-align:left; –> kata left artinya tulisan akan berada di sebelah kiri, ini bisa di ganti dengan kata center atau right

    display:block; –> kata block artinya di tampilkan di layar monitor.

    width:180px; –> angka 180px adalah lebar dari tombol navigasi sebesar 180px, nah ini bisa di rubah sesuai dengan kondisi blog sobat masing-masing.

    height:20px; –> angka 20px adalah tinggi dari tombol navigasi sebesar 20px, ini bisa di ganti sesuai dengan keinginan sobat.

    background:#f0f0f0 url() top right no-repeat; –> tulisan #f0f0f0 adalah kode warna dari background, ini bisa di rubah sesuai dengan ke sukaan sobat.

    padding:3px 4px 3px 8px; –> nilai padding ini adalah untuk mengatus jarak tulisan pada tombol navigasi, bisa di rubah sesuai kebutuhan.coba-coba aja rubah sendiri.

    margin:7px 10px 7px 0; –> margin ini untuk jarak antara satu tombol dengan tombol yang lain, bisa di rubah, coba aja.

    .unyil:hover{ –> .unyil:hover artinya yaitu ketika mouse berada pada tombol .unyil akan berubah menjadi seperti yang di definisikan pada kode ini.

    background:#97A4B9 url() top right no-repeat; –> #97A4B9 adalah kode warna yang dinginkan ketika mouse berada pada tombol .unyil

    text-decoration:none; –> text dekorasi jangan di rubah.

    kode-kode tadi akan tampil seperti ini :

    Rubrik Elektronik |
    Blog Menu D’Tree |
    Free Blog Templates |
    Authorized Service |

    Bagaimana sudah jelas? mudah-mudahan jelas.

    Contoh yang kedua adalah yang memakai background image, dalam hal ini saya ambil contoh dengan image milik saya dan mempunyai alamat seperti ini :

    prinsipnya kode-kode ini sama dengan diatas, yang membedakan adalah penambahan image doang, coba lakukan langkah berikut ini :

    Tambahkan kode berikut sesudah kode <style type="text/css"> dan sebelum kode </style>, ya di mana saja asalkan di antara kode tadi.


    .cuplis{
    text-align:left;
    display:block;
    width:180px;
    height:20px;
    background:#f0f0f0 url(http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif) top right no-repeat;
    padding:3px 4px 3px 8px;
    margin:7px 10px 7px 0;
    }

    .cuplis:hover{
    background:#97A4B9 url(http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif) top right no-repeat;
    text-decoration:none;
    }

  • copy kode di bawah ini, lalu paste di tempat yang sobat inginkan, bisa di sidebar, footer atau dimana saja, kemudian rubahlah dengan link yang sobat punya :

  • <a class="cuplis" href="http://rubrik-elektronik.blogspot.com">Rubrik Elektronik</a><span class="hide"> | </span>

    <a class="cuplis" href="contoh-blog.blogspot.com">Blog Menu D'Tree</a><span class="hide"> | </span>

    <a class="cuplis" href="http://rohman-freeblogtemplate.blogspot.com">Free Blog Templates</a><span class="hide"> | </span>

    <a class="cuplis" href="http://kolom-authorized.blogspot.com">Authorized Service</a><span class="hide"> | </span>

    Hasilny akan seperti ini :

    Rubrik Elektronik |
    Blog Menu D’Tree |
    Free Blog Templates |
    Authorized Service |

    Yang membedakan hanya pemasangan URL image saja, yang lainnya sama persis. Kata cuplis adalah untuk membedakan dengan perintah menu navigasi unyil, jadi kalau dua efek ini mau besamaan ada dalam satu blog, ya harus berbeda.

    Untuk melihat contoh nyata dari aplikasi kode di atas silahkan klik di sini atau di sini !
    Mudah-mudahan jelas, soalnya saya pun agak bingung mencari kata-kata yang pas untuk menerangkan ini.

    Selamat mencoba !

    Iklan

    29 Mei 2007 - Posted by | aksesori blog, blog tools, blog tutorial

    9 Komentar »

    1. terimakasih kasih mas,,,,artikelna keren-2.salam kenal dari ku “jengger(di net)”
      maen ya mas ke blog ku http://adeut.blogspot.com

      Komentar oleh Teguh Widodo [ 12062268 ] | 4 Juni 2007 | Balas

    2. kang rohman, pengen menu navigasi buat halaman posting, kaya google misalnya halaman 1,2,3 dan seterusnya….minta bantuannya ya kang

      Komentar oleh badot inside | 2 April 2008 | Balas

    3. bang klo gambarnya di ambil dari komputer gimana?

      Komentar oleh PENTING GAK PENTING | 7 April 2008 | Balas

    4. Kang gimana cara menghilangkan garis horizontal item tepat di bawah menu navigasi header blog aku….? terus kalo mengisi menunya gimana misalkan kalo menunya “HOME” ngisi linknya lebih dari satu tu gimana….? terimakasih banget aku tunggu ya….mas terimakasih atas ilmunya…..

      Komentar oleh Dede ariyanto | 1 Mei 2008 | Balas

    5. mo nanya kang, pengen juga ada kolom isian komentar di blog aku, gimana ya caranya, bantuin dong…

      Komentar oleh Ambae.exe | 23 Mei 2008 | Balas

    6. mas aku pengemar blog anda, dan saya sering lihat blog anda setiap hari karena aku juga mempunyai blog tapi cara ngatur, lebar, modifnya ga bisa mas tolong di bantu ya?
      informasi Email topek_shadow@yahoo.co.id
      trims mas.
      salam kenal

      Komentar oleh Buletin Orang Indonesia | 23 Juni 2008 | Balas

    7. Kang ini Blog ku selama belajar ,… http://trigana-air-bth.blogspot.com/ kira2 apa ada yang kurang ya kang,…makacih:|

      Komentar oleh antotgn | 30 Juni 2008 | Balas

    8. om penempatan kode itu contohnya dimana kalo caca pingin buat itu dan ditaruh disindebar. codenya itu caca gak ketemu. maksudnya di edit html atau dimana? terus kalo menu css yang bisa di isi pengelompokan posting kaya punya tante gadis rantau itu gimana caranya buat om? maaf banyak nanyak…makacih om

      Komentar oleh naza | 5 Juli 2008 | Balas

    9. thank’s

      Komentar oleh doez | 10 Juli 2008 | Balas


    Tinggalkan Balasan

    Isikan data di bawah atau klik salah satu ikon untuk log in:

    Logo WordPress.com

    You are commenting using your WordPress.com account. Logout / Ubah )

    Gambar Twitter

    You are commenting using your Twitter account. Logout / Ubah )

    Foto Facebook

    You are commenting using your Facebook account. Logout / Ubah )

    Foto Google+

    You are commenting using your Google+ account. Logout / Ubah )

    Connecting to %s

    %d blogger menyukai ini: