Menambah Link Menu Blog

Memberi menu pada blog akan menampilkan performa blog terutama untuk navigasi yaitu berpindah dari satu bagian ke bagian lain dalam blog, biasanya satu bagian harus di-link dari halaman utama supaya pengunjung blog lebih mudah menemukan sesuatu yang dicari.

Tutorial kali ini akan menyajikan tombol teks sederhana yang biasanya diletakkan pada bagian header blog dan pada bagian akhir Anda bisa membuat tombol berbasis grafis.


Umpamanya saya akan menambahkan tombol "Home", "About" dan "Contack" pada bagian header blog (sebetulnya kita bisa memindahkan posisi ini dalam blog sesuai selera kita)

1. Siapkan link menu untuk ketiga menu diatas, contoh :
<a href='http://www.namablog.blogspot.com'>Home</a>
<a href='http://www.namablog.blogspot.com/namablog-about-page.html'>About</a>
<a href='http://www.namablog.blogspot.com/namablog-contack-page.html'>Contack</a>

kemudian dari masing-masing link yang sudah disiapkan, tambahkan "Class" menu (tombol menu) untuk setiap link sehingga menjadi

<a href='http://www.namablog.blogspot.com' class='button1' >Home</a>
<a href='http://www.namablog.blogspot.com/namablog-about-page.html' class='button2' >About</a>
<a href='http://www.namablog.blogspot.com/namablog-contack-page.html' class='button3' >Contack</a>

2. Buka blog menggunakan nama 'user' dan 'password'
3. Masuk ke 'Tata Letak > Edit Html'
4. Masukkan kode dibawah ini sebelum kode </b:skin>

a.button1 {
   background: #ff0000;
   padding: 5px;
   color: #ffffff;
   }

Maksud Kode CSS diatas adalah : 1. Mendefinisikan Class Button 1 untuk tombol 'Home', 2. #ff0000 = menggunakan warna merah (RGB) dengan kode warna Hex, 3. Padding 5px adalah jarak antar menu (Home dan About) adalah 5 pixel, 4. color:#ffffff = menggunakan warna putih untuk teks pada menu.

untuk tombol berikutnya gunakan id class button seperti berikut ini :

a.button2 {
background: #ff0000;
padding: 5px;
color: #ffffff;
}

a.button3 {
background: #ff0000;
padding: 5px;
color: #ffffff;
}

Simpan atau klik "Terbitkan Entri", sampai disini hasilnya sudah bisa dilihat.

Kalo kita perhatikan, dari menu yang sudah dibuat jika di klik akan menuju ke link yang ditentukan namun ketika mouse mengenai daerah menu tersebut tidak ada efek dari perubahan gambar menu (biasanya pola warna/gambar), hanya icon mouse saja yang berubah menjadi icon mouse "Klik".

"Mouseover" adalah istilah untuk "event" atau kejadian pada saat mouse melintasi area tertentu (dalam hal ini tombol menu) dan area tersebut berubah warna atau berganti gambar. kita bisa memodifikasi warna saat mouse melintasi.

tambahkan kode berikut ini :

a.button1:hover {
  background: #cccccc;
  color: #ffffff;
  }

Kode tersebut menunjukkan bahwa "button1" (yaitu home) akan berubah warna ketika mouse melintas dengan warna latar belakang "#cccccc" dan warna teks "#ffffff"

untuk dua kode berikutnya bisa ditambahkan seperti mendefinisikan button diatas, namun jika ketiga tombol tersebut penampilannya sama bisa dipersingkat menjadi :

a.button1:hover, a.button2:hover, a.button3:hover {
  background: #cccccc;
  color: #ffffff;
  }