Hanya arsip

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

Navigasi Dengan Css (2)

Lagi-lagi menanggapi keinginan mba Ati dalam hal membuat menu navigasi yang berbentuk
horizontal seperti yang terdapat pada header blog ini, kali ini saya akan mencoba menjawabnya dan mudah-mudahan postingan kali ini dapat memenuhi rasa ketidakpuasan terhadap jawaban saya pada postingan yang lalu. Menu navigasi yang akan saya buat adalah dengan menggunakan css agar hasil yang di dapat bersifat flexible dan tidak kaku.


Untuk membuat menu navigasi dengan css, tentunya akan berbeda hasilnya tatkala menggunakan template yang berbeda, akan tetapi agar saya bisa memberi sedikit gambaran maka template yang saya jadikan contoh adalah template minima yang di desain oleh Douglas Bowman (template asli blogger), contoh navigasinya seperti di bawah ini, silahkan sobat arahkan mouse sobat ke menu navigasi ini dan lihat hasilnya :

Link 1
Link 2
Link 3
Link 4
Link 5

Bagaimana menarik bukan? jika tertarik silahkan sobat lanjut bacanya. Sekarang silahkan sobat baca dulu seluruh artikel ini sampai tuntas, karena ada kode-kode tertentu yang harus di sesuaikan, dan nanti pada akhir artikel saya akan menerangkan tentang kode-kode yang harus di rubah.

Untuk membuat menu tersebut silahkan sobat ikuti langkah-langkah berikut ini.

Untuk template minima klasik :

  1. Sig in di blogger
  2. Klik menu Template
  3. Klik menu Edit HTML
  4. Copy seluruh kode template yang ada lalu paste pada notepad kemudian save. ini untuk backup data bila terjadi kesalahan editting
  5. Copy kode berikut lalu paste pada style sheet css sobat, atau bila bingung simpan saja di atas kode </style>
  6. /* Navigasi buat si juleha
    ———————————————– */
    #juleha{
    height:25px;
    text-align: center;
    }

    #juleha a{
    margin:0;
    font-size:1.2em;
    font-weight:bold;
    letter-spacing:-1px;
    background-color: #cccccc;
    color: #000000;
    padding-top:2px;
    padding-bottom:2px;
    padding-left:4px;
    padding-right:4px;
    }

    #juleha a:hover{
    text-decoration:none;
    padding:34px 5px 41px 5px;
    background-color: #0326FC;
    background-repeat: repeat-x;
    color:#A7FC03;
    padding-top:2px;
    padding-bottom:2px;
    padding-left:4px;
    padding-right:4px;
    }

  7. Copy kode berikut lalu paste pada kode template seperti di bawah ini, yang berwarna hitam adalah kode aslidan warna merah adalah kode yang harus di tambahkan :
  8. <div id="header">

    <h1 id="blog-title">
    <ItemPage><a href="<$BlogURL$>"></ItemPage>
    <$BlogTitle$>
    <ItemPage></a></ItemPage>
    </h1>

    <id="description"><$BlogDescription$>

    <div id="juleha">
    <a href="#" target="_blank">Link 1</a>
    <a href="#" target="_blank">Link 2</a>
    <a href="#" target="_blank">Link 3</a>
    <a href="#" target="_blank">Link 4</a>
    <a href="#" target="_blank">Link 5</a>
    </div>

    </div>

  9. Klik tombol Pratinjau untuk melihat hasil perubahan
  10. Jika sudah OK, klik tombol Simpan Perubahan Template
  11. Selesai.

Untuk template minima baru :

  1. Sign in
  2. Klik menu Layout
  3. Klik menu Edit HTML
  4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
  5. Klik kotak kecil di samping tulisan Expand Template Widget
  6. Tunggu beberapa saat sampai proses selesai
  7. Copy kode berikut lalu paste pada style sheet css sobat, atau bila bingung simpan saja di atas kode ]]></b:skin>
  8. /* Navigasi buat si juleha
    ———————————————– */
    #juleha{
    height:25px;
    text-align: center;
    }

    #juleha a{
    margin:0;
    font-size:1.2em;
    font-weight:bold;
    letter-spacing:-1px;
    background-color: #cccccc;
    color: #000000;
    padding-top:2px;
    padding-bottom:2px;
    padding-left:4px;
    padding-right:4px;
    }

    #juleha a:hover{
    text-decoration:none;
    padding:34px 5px 41px 5px;
    background-color: #0326FC;
    background-repeat: repeat-x;
    color:#A7FC03;
    padding-top:2px;
    padding-bottom:2px;
    padding-left:4px;
    padding-right:4px;
    }

  9. Copy kode berikut lalu paste pada kode template seperti di bawah ini, yang berwarna hitam adalah kode asli dan warna merah adalah kode yang harus di tambahkan :
  10. <div class=’descriptionwrapper’>
    <p class=’description’><span><data:description/></span></p>


    <div id="juleha">
    <a href="#" target="_blank">Link 1</a>
    <a href="#" target="_blank">Link 2</a>
    <a href="#" target="_blank">Link 3</a>
    <a href="#" target="_blank">Link 4</a>
    <a href="#" target="_blank">Link 5</a>
    </div>

    </div>
    </div>
    </b:if>

  11. Klik tombol Pratinjau untuk melihat perubahan
  12. Bila sudah OK, klik tombol SIMPAN TEMPLATE
  13. Selesai.

Agar sobat lebih faham, saya akan sedikit memberi keterangan tentang kode-kode
yang saya berikan, silahkan simak :

juleha{
height:25px;
text-align: center;
}

  • #juleha hanyalah penamaan saja, bisa di ganti dengan apa saja yang penting nyambung dengan kode yang di bawahnya, mau ibro, samson, mau tukul juga boleh kalo sobat penggemarnya.
  • height:25px; kode ini adalah sebagai pengatur tingginya tombol navigasi, yang saya pakai adalah sebesar 25 pixel, boleh di ganti nilainya dan sesuaikan dengan keinginan sobat.
  • text-align: center; kode untuk memposisikan tombol-tombol berada di tengah-tengah, jika ingin mepet di sebelah kiri ganti kata Center dengan kata left, jika ingin mepet kanan, ganti dengan right.
  • #juleha a{
    margin:0;
    font-size:1.2em;
    font-weight:bold;
    letter-spacing:-1px;
    background-color: #cccccc;
    color: #000000;
    padding-top:2px;
    padding-bottom:2px;
    padding-left:4px;
    padding-right:4px;
    }

  • #juleha a penamaan agar nyambung dengan kode diatasnya, dan kode-kode di yang di tulis bawahnya adalah yang akan muncul sebelum di sorot oleh mouse pengunjung blog.
  • font-size:1.2em; ukuran huruf yang di pake sebesar 1.2 . jika ingin lebih besar atau lebih kecil, silahkan ganti saja nilainya.
  • font-weight:bold; agar link yang di tulis hurufnya di cetak tebal, jika tidak mau ganti saja tulisan bold dengan tulisan normal.
  • background-color: #cccccc; kode untuk membuat warna latar belakang tombol. kode warna #cccccc adalah kode untuk abu-abu, silahkan sobat ganti dengan warna yang sobat sukai.
  • color: #000000; kode untuk warna huruf link, #000000 adalah kode warna hitam, silahkan ganti dengan warna yang sobat sukai.
  • #juleha a:hover{
    text-decoration:none;
    background-color: #0326FC;
    background-repeat: repeat-x;
    color:#A7FC03;
    padding-top:2px;
    padding-bottom:2px;
    padding-left:4px;
    padding-right:4px;

  • #juleha a:hover adalah kode yang di harapkan ketika mouse menyorot pada
    kode tombol yang di definisakan oleh kode-kode yang ada di kode #juleha a.
  • background-color: #0326FC; kode untuk membuat warna latar belakang tombol ketika mouse menyorot. kode warna #0326FC adalah kode untuk biru, silahkan sobat ganti dengan warna yang sobat sukai.
  • color:#A7FC03; kode untuk warna huruf link ketika mouse menyorot, #A7FC03 adalah kode warna hijau terang, silahkan ganti dengan warna yang sobat sukai.
  • <div id="juleha">
    <a href="#" target="_blank">Link 1</a>
    <a href="#" target="_blank">Link 2</a>
    <a href="#" target="_blank">Link 3</a>
    <a href="#" target="_blank">Link 4</a>
    <a href="#" target="_blank">Link 5</a>
    </div>

  • <div id="juleha"> kode pembuka juleha. Apa-apa yang di simpan di bawah kode ini, mengacu kepada apa yang di definisikan oleh kode juleha.
  • <a href="#" target="_blank">Link 1</a> kode untuk membuat link.
  • href="#" ganti tanda pagar (#) dengan URL atau link yang ingin sobat tuliskan. contoh : jika saya ingin membuat link ke blog ini, maka tanda pagar tadi saya ganti dengan http://kolom-tutorial.blogspot.com
  • target”_blank” adalah kode untuk memunculkan jendela baru ketika link di klik oleh pengunjung, bila tidak ingin ada jendela baru, maka hilangkan kode ini.
  • Link 1 ganti tulisan ini dengan tulisan link yang sobat inginkan. contoh : untuk menuliskan blog ini saya ganti dengan kata Kolom Tutorial
  • jadi kira-kira link yang tadi akan menjadi seperi ini :

    <a href="http://kolom-tutorial.blogspot.com&quot; target="_blank">Kolom Tutorial</a>

  • </div> adalah kode penutup buat kode si juleha.
  • Contoh link yang saya berikan diatas adalah sebanyak lima buah link, ini bisa sobat kurangi atau bisa juga di tambah, akan tetapi jika space yang tersedia penuh maka tombol akan secara otomatis berpindah ke bawah, oleh sebab itu sesuaikanlah dengan space yang ada.

    Bagaimana sobat, bingung tidak? mudah-mudahan dapat di mengerti.

    Kode-kode diatas sudah saya coba dan hasilnya bekerja dengan baik, untuk melihat contoh nyata dari kode-kode yang saya buat tadi, silahkan sobat klik di sini !

    Selamat mencoba dan bermain dengan kode-kode !

    Iklan

    1 Juli 2007 - Posted by | blog tutorial, navigasi dengan css

    10 Komentar »

    1. mas rohman pas sekalipostingan ini karena saya juga baru bingung mo bikin hyperlink kaya gitu…tak liat di minima kayaknya ga ada hperlinknya..kok ternyata ada variasi sendiri ya..trus kalo aku kopi html tsb trus aku taruh di header blogku gmana mas apa bisa jalan….ato gmana deh biar ga terlalu …banyak ngrubah template coz….kalo template minima aku bingung krn kayaknya ga ada pemisah antar page element ya…so biar aku lsg copypaset di header aja..gtu thanks…
      http://setyobekti.blogspot.com/

      Komentar oleh Setyo Bekti Santoso | 3 Juli 2007 | Balas

    2. mas masih binun nih, aku udah cobain bikin kaya’ gini cuma caranya beda. Aku bikin link pake background image trs aku taro di add page elemnt, jd gak pake taro ditemplate. Nah pertanyaanku yg blm kejawab, bgm bikin button kaya’ gitu, tapi didalam satu button ada bbrp link, jd orang bebas milih mau klik yg mana. Btw makasih bgt yah mas atas tanggapannya yg cepat.

      Komentar oleh ati | 6 Juli 2007 | Balas

    3. hallo mas rohman, makasih telah mampir. saya juga punya blog yang mirip, tapi karena masih baru, isinya belum banyak.http://medscript.blogspot.com, blog anda sudah aku link.

      semoga kedepan kita bisa tukar informasi ya.

      sumedi

      Komentar oleh meds | 9 Juli 2007 | Balas

    4. halo mas rohman
      assalamualaikum
      salam kenal

      mas aku nih masih belajar ttg blog
      tentang buat navigasi dengan css
      petunjuk dari mas rohman sudah aku jalanin sesuai dengan tulisan mas rohman tentang navigasi dengan css(2)tapi setelah aku pratinjau kok tidak muncul tombolnya ,mohon petunjuk lebih jelasnya dan dimana letak kesalahan yang saya buat
      terima kasih
      wasallam

      Komentar oleh BISNIS INTERNET | 21 Juli 2007 | Balas

    5. assalamualaikum mas
      nih aku bucharly
      mas cara2 diatas sudah aku coba tapi linknya terletak di bagian sidebar .aku inginnya link tersebut berada di header blog mohon petunjuknya

      timsss

      Komentar oleh M.B.S.Q alias Muhammad Bucharly | 21 September 2007 | Balas

    6. mas kalau menghapusnya kok nggak bisa apa ada yang salah?

      Komentar oleh INVISIBLE MAN | 18 Oktober 2007 | Balas

    7. kang rohman nuhun pisan nya…soalnya aku juga lagi coba ngoprek website pribadi aku ne…eh, pas kebetulan dapat dapat tutorial navigasi yang bagus. Nuhun pisan kang….ntar kapan2 aku mo tanya lagi, bisa donk ntar aku kirim e-mail…
      makasih buanyak kang

      Komentar oleh chenx.bun13 | 19 Februari 2008 | Balas

    8. kang rohman, kalo buat navigasi halaman (page) dari css gimana ya, kaya di google misalnya halaman 1,2,3 dan seterusnya…saya pengen kang

      Komentar oleh badot inside | 2 April 2008 | Balas

    9. thanks mas
      penchenk.blogspot.com

      Komentar oleh penchenk | 25 Juli 2008 | Balas

    10. thx kang, tutornya mantep

      Komentar oleh iogi | 22 Agustus 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: