MENU BLOG HARIZONTAL

Selain menggunakan menu horisontal bercabang (drop down menu) , kita juga bisa membuat menu horisontal sederhana (tanpa cabang) ataupun membuat menu horisotal bercabang dengan script css . Seperti yang telah saya buat dalam postingan sebelumnya tenang menu horisontal versi dynamic drive, maka kali ini akan dibuat versi css menu maker. Tampilan menunya bisa dilihat pada gambar di bawah ini. Ini adalah contoh menu navigasi horisontal yang dinamai oleh pembuatnya dengan nama massive blue

Untuk membuatnya bisa lakukan posedur berikut:


1. Login ke akun blogger
Pilih Dashboard - Tata letak - Edit HTML

cari kode berikut:

]]></b:skin>

2. Di bagian atas kode tersebut masukkan kode berikut

#menu {
background: #333;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
#menu li {
float: left;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#menu a {
background: #333 url("http://i47.tinypic.com/n1bj0j.jpg") bottom right no-repeat;
color: #ccc;
display: block;
float: left;
margin: 0;
padding: 8px 12px;
text-decoration: none;
}
#menu a:hover {
background: #2580a2 url("http://i49.tinypic.com/2vjbz4g.jpg") bottom center no-repeat;
color: #fff;
padding-bottom: 8px;

3.  Klik tombol "Simpan Template"

4. Buka halaman "Tata Letak -> Elemen Halaman"

5. Pada Elemen header , klik " Tambah Gadget"

Catatan: Jika anda menggunakan template default (bawaan) blogger maka tombol "Tambah gadget" tidak muncul pada bagian header, untuk menampilkannya bisa lihat postingan saya tentang cara menampilkan "tambah gadget" di header 

6. Pilih gadget html/javascript
masukkan script berikut :

<ul id="menu">
<li><a href="#">Clothes</a></li>
<li><a href="#">Dress for man</a></li>
<li><a href="#">Women's clothes</a></li>
<li><a href="#">Summer dress</a></li>
<li><a href="#">Artikel Komputer</a></li>
</ul>

Catatan:
Pada script di atas
Ganti  semua tanda # pada href="#" dengan url target atau url tujuan.
Teks Clothes , Dress for man, Women's clothes ..., diganti dengan teks yang akan ditampilkan di menu

Agar script bisa berfungsi dengan baik, maka sebaiknya dicopy ke notepad atau word pad kemdian diedit sesuai kebutuhan blog anda.

Contoh blog yang memakai menu horisontal bisa dilihat disini Clothes

LABEL BLOG

Selasa, Desember 23, 2008

Cara menambah gadget label pada sidebar (memasang widget kategori di blogspot)

Gadget Label sangat berguna untuk mengelompokkan postingan berdasarkan label (kategori). Sehingga memudahkan user blog kita memilah informasi atau postingan yang berkaitan dengan tema yang mereka cari.

Untuk membuat gadget label lakukan langkah berikut:

1. Pada halaman di bawah ini pilih tab " Tata Letak" pilih "Elemen Halaman"
Klik "Tambah Gadget"


2. Pada halaman list berikut pilih Label


3. Atur konfigurasi label, Judul, Menyortir berdasarkan Alfabet, kotak pratinjau biasanya berisi label sesuai dengan label pada postingan yang sudah anda buat


Klik tombol "SIMPAN"

4. Atur posisi gadget dengan cara "klik and drag"
Setelah selesai klik tombol "SIMPAN",


Lihat perubahan di blog anda.

5. Agar label (kategori muncul secara otomatis pada sidebar, maka pastikan saat anda membuat postingan jangan lupa membuat (mengisi) kategori artikel anda, di bagian bawah kotak teks editor isi pada bagian "Label untuk entri ini : ......"
Jika anda belum membuat label tersebut, anda bisa kembali ke dasboard -> Edit Entri -> pilih postingan yang akan di edit.
Klik tombol "Terbitkan entri" agar perubahan bisa dipublikasikan.