Skip to main content

Cara membuat CSS Navigation Bar

Pertemuan kali ini kita akan membahas bersama-sama tentang bagaimana caranya kita membuat sebuah menu navigasi atau juga elemen menu page yang awamnya kita ketahui pada weblog atau website yang biasanya kita ketahui pada setiap website dan yang pernah di posting kan pada session sebelum yaitu Cara membuat menu page atau laman pada blog pasti ada yang namanya sebuah page atau scroll berupa horisontal yang mana memudahkan para pencari informasi untuk mencari informasi lewat scroll navigasi tersebut lebih mudah dan cepat sehingga para pencari informasi akan terus berkunjung ke website kita dan  selama kita juga aktif dalam menampilkan postingan yang baik dan bermanfaat. Dan perlu Ada dua sifat CSS yaitu internal dan eksternal.Jika internal yang dipilih, maka skrip itu dimasukkan secara langsung ke halaman website yang akan didesain. Kalau halaman web yang lain akan didesain dengan model yang sama, maka skrip CSS itu harus dimasukkan lagi ke dalam halaman web yang lain itu.Sifat yang kedua adalah eksternal di mana skrip CSS dipisahkan dan diletakkan dalam berkas khusus. Nanti, cukup gunakan semacam tautan menuju berkas CSS itu jika halaman web yang didesain akan dibuat seperti model yang ada di skrip tersebut.
Untuk membuat dasar CSS Navigation Bar button pada element HTML sebagai contoh pembuatan seperti dibawah ini yaitu :

    * Pertama kita baca basmalla dulu lalu login dulu ke akun kita yaitu http://blogger.com
    * Kedua, cari ]]></b:skin> dan kemudian copi kode dibawah ini lalu sisipkan kode di bawah ini tepat di atasnya.

#navbar-iframe {
  height:0px; visibility: hidden; display: none;
}

    * Ketiga, sisipkan rangkaian kode CSS berikut ini tepat di atas ]]></b:skin> .

/*--------------------------------------------------------------
Customisasi Bilah Menu Navigasi Di Atas Header Halaman Blog
Oleh: antelu
Blog: antelu -:[semar diam weblog]:-
URL : http://antelu.blogspot.com/
--------------------------------------------------------------*/
.bilah-menu-atas {
  width: 100%;
  min-width: 960px;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 27px;
  font-size: 13px;
  z-index: 99;
  white-space: nowrap;
  background-color: #336699;
  background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
  box-shadow: 0px 2px 0px rgb(14, 90, 140);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.kolom-utama {
  -moz-transition: all 0.2s linear 0s;
  width: 960px;
  height: auto;
  margin: 0px auto;
}
.kolom-menu {
  width: 521px;
  height: auto;
  margin: 0px 0px 0px -41px;
  float: left;
  display: inline;
}
.kolom-menu ul {
  height: auto;
  margin-top: 0px;
}
.kolom-menu ul li {
  float: left;
  position: relative;
  list-style: none outside none;
}
.kolom-menu ul li:first-child {
  border-left: 1px solid rgba(30, 30, 30, 0.125);
}
.kolom-menu ul li a {
  color: #ffffff;
  font-weight: bold;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  display: inline-block;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
  position: relative;
  border-right: 1px solid rgba(30, 30, 30, 0.125);
  box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
}
.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {
  background-color: rgba(255, 255, 255, 0.125);
}

    * Keempat, cari kode <body dan kemudian sisipkan rangkaian kode dengan format seperti contoh berikut ini tepat di bawahnya.

<div class='bilah-menu-atas' id='bilahmenuatas'>
  <div class='kolom-utama'>
    <div class='kolom-menu'>
      <ul>
        <li><a href='http://antelu.blogspot.com/'><img alt='home' height='15px' src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQAM4Cza1-Mf9f56z0L9Wq20A463uOt5_Rv_sstLwEbUQLKjXI_LA' width='20px'/></a></li>
        <li><a href='http://antelu.blogspot.com/p/site-map.html'>Privacy</a></li>
        <li><a href='http://antelu.blogspot.com/p/tanya-jawab.html'>Tanya Jawab</a></li>
      </ul>
    </div>
    <div class='kolom-menu'>
      <ul style='float: right'>
        <li><a href='https://plus.google.com/108762507176753769262/posts'>About me</a></li>
        <li><a href='http://antelu.blogspot.com/p/contact-us.html'>contact Us</a></li>
      </ul>
    </div>
  </div>
</div>

Untuk warna biru silakan ganti sesuai dengan url anda yang inginkan

Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

Istilah-istilah dalam flash

Perlu kita ketahui sebelum kita mempelajari lebih jauh tentang Flash kita harus tau dan mengetahui atau paling tidak kita memahami tentang istilah-istilah yang ada pada flash tersebut agar kita di saat mempelajari lebih lanjut lebih mudah dalam mempelajarinya baiklah perhatikan istilah tersebut di bawah ini ; Timeline : bagian yang digunakan untuk mengatur susunan layer.   Layer : bagian yang digunakan untuk mengatur susunan dari obyekyang tampak di stage.   Scane/stage : layar yang digunakan untuk menyusun obyek gambar , teks, animasi dll.   Frame : suatu bagian dari layer yang digunakan untuk mengatur pergerakan animasi.   Keyframe: suatu tanda yang digunakan untuk membatasi suatu gerakan animasi.   Animasi : sebuah gerakan obyek maupun teks yang diatur sedemikian rupa sehingga kelihatan menarik.   Movie clip: suatu animasi yang dapat di gabungkan dengan animasi atau obyek lain.   Action/script : suatu perintah yang diletakkan pada sua...
3 comments
Read more

Cara menggunakan dasar tool-tool pada Adobe Flash CS3

Setelah kita mempelajari dari awal tentang apa itu animasi sampai macam-macamnya software yang digunakan dalam pembuatan animasi tetapi dalam hal ini yang kita pakai softwarenya yaitu Adobe Flash CS3 Professional, Sekarang kita akan menggunakan garis dengan Line tool sebagai awal kita mempelajari bersama-sama baiklah kita mulai : 1. Cara Membuat garis dengan Line tool Adobe Flash CS3 telah menyediakan pilihan untuk membuat beragam bentuk garis. Pilih ikon Line Tool pada toolbar di sisi kiri layar, kemudian lihat pilihannya di panel Properties di sebelah kiri bawah layar, Masukkan angka ketebalannya. Dan untuk memulai garis klik pada stage dan drag sepanjang yang anda inginkan. Dan perhatikan gambar di bawah ini dan perhatikan toolbar pada line tool yang dipilih untuk membuat garis ; Line tool 2. Cara Membuat garis dengan pencil tool Dan sekarang Untuk membuat garis bebas, Pilih ikon Pencil Tool pada toolbar sisi kiri dan pilih warnanya pada panel Colors di bawahnya. U...
Post a Comment
Read more

Cara membuat tombol kontrol play dan stop pada adobe flash CS3

Pada postingan berikut ini digunakan sebagai pelengkap tutorial Pause dan Play Suara. Pada tutorial kali ini kita akan membahas tentang bagaimana cara menghentikan suara yang sedang dimainkan. Sebenarnya pada script Pause dan Play Suara sudah ada. Tapi karena digunakan dalam tombol pause, mungkin ada yang belum tahu. Untuk menghentikan suara kita cukup menuliskan stop() pada variable yang menampung suara yang sedang dimainkan. Misalnya : suara ditampung pada variable Musicz , maka untuk menghentikannya kita menuliskan Musicz.stop() Setelah mengikuti kegiatan belajar ini, Anda diharapkan dapat: Membuat tombol dan Mamberi action pada tombol Dan Membuat tombol kontrol kita bisa menggunakan sesuai dengan keinginan bisa mengunakan panel Library atau kita bisa juga dengan mendesign sendiri dengan menggunakan menu toolbar yang tersedia A. Membuat Tombol Buka file animasi masking (ini hanya untuk mempercepat tutorial) Buat layer baru, beri nama Kontrol . Seperti gambar dibawah in...
1 comment
Read more