Sunday, December 27, 2009

Membuat menu tab di Blogger

Akhir-akhir ini, banyak sobat yang menanyakan cara membuat menu tab di Blog pada saya, sehingga panduan ini khusus buat sobat yang tertarik untuk menambah (memasang/membuat) menu tab di blog sobat. Menu tab ini diperoleh dari dynamicdrive. Kelebihan dari menu ini adalah tidak menggunakan image(gambar), jadi waktu muatnyanya (loading) lebih cepat. Kekurangannya tampilannya tidak menarik.Buat Sobat yang tertarik, sobat bisa menggunakan cara pasang (tambah/buat) menu tab di blog dengan mengikuti prosedur di bawah ini. Tapi sebelum dilanjut, coba lihat modalklik.co.tv adalah contoh dari menu tab ini. Oke, kita lanjutkan.


Untuk membuat menu seperti di atas, bisa lakukan prosedur berikut:

1. Masuk ke Dashboard -> Tata Letak -> Edit Html
2. Cari kode berikut

]]>



3. Setelah kode

]]>


Masukkan kode berikut:



4. Klik tombol "Simpan Template"

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

6. 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 sebelumnya tentang cara menampilkan "tambah gadget" di header

7. setelah mengklik tombol "tambah gadget" pilih HTML/Javascript



8. pada kotak dialog berikut masukkan kode html




catatan:
ganti url : http://artikelkomputerku.blogspot.com, dengan url blog anda
ganti # dengan url target yang akan di link ke menu
misalnya:
http://artikelkomputerku.blogspot.com/2009/02/tips-dan-trik-windows.html

Jika masih ingin menambah link navigasinya, maka sebelum




tambahkan kode berikut:

  • teks yang ditampilkan (anchor teks)





  • Klik tombol Simpan



    Anda bisa mengatur menu navigasi tersebut, bisa anda geser di bagian atas gambar header atau di bawah gambar header.

    Anda juga bisa mengganti warna background menu tersebut

    border-bottom: 1px solid black;

    =============================================
    border-right: 1px solid white; /*right divider between tabs*/
    color: white;
    background: #414141; /*background of tabs (default state)*/

    ==============================================
    .mattblacktabs li a:hover, .mattblacktabs li.selected a{
    background: black; /
    ==============================================

    Ganti kata black, white, dan #414141

    Sebagai acuan, warna yang bisa anda pilih bisa lihat di link berikut:
    daftar warna web atau kode-warna-hexadecimal

    No comments:

    Post a Comment