Rabu, 24 Agustus 2011

Membuat Horisontal Menu Bar di blogger

horisontal menu bar

Hal pertama yang harus dilakukan sebelum membuat horisontal menu bar adalah melihat apakah template yang dipakai sudah memiliki kolom Tambah Gadget dibawah kolom Header. Jika belum berarti harus dilakukan sedikit modifikasi pada HTML template untuk bisa menampilkan link Tambah Gadget dibawah Header. Jika sudah ada kolom tersendiri di bawah Header, silahkan langsung ke no.2.

Untuk membuat Horisontal Menu Bar di Blogger caranya adalah sebagai berikut:

1. Membuat link Tambah Gadget di bawah Header. Cara ini aku dapatkan dari Blog Kang Rohman
  • Login ke Blogspot--> Rancangan---> Edit HTML
  • Untuk berjaga-jaga bila nanti ada hasil yang tidak seperti yang diinginkan, maka download dan simpanlah kopi dari template yang dipakai saat ini.
  • Tekan kontrol "Ctrl + F" untuk menampilkan kolom pencarian yang nanti letaknya ada di bawah. Ketikan atau kopi baris kode berikut ke dalam kolom pencari:
    ]]></b:skin>  agar letaknya dapat segera diketahui.

    Copy kode berikut, lalu paste di atas kode ]]></b:skin>

    #under_header{
    margin:10px 0;
    padding:1%;
    width:98%;
    }
  • Cari lagi kode yang mirip dengan kode di bawah ini :

    <div id='header-wrapper'> 
    <b:section class='header' id='header' maxwidget="1" showaddelement="no">
    <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
    </b:section>
        </div>


    Copy kode berikut lalu paste persis di bawah kode tadi :

    <div id="under_header">
    <b:section class='header' id='underheader' preferred='yes'/>
    </div>
  • Simpan template.
2. Buatlah posting baru untuk halaman yang ingin di link ke menu bar.  Menunya misalnya Home, About, Halaman, Tips. Link yang nanti akan digunakan adalah URL setiap posting itu. Cara dibawah ini (no. 2 dan 3) aku dapatkan dari Real Life.
  • untuk menu Home, link yang gunakan adalah URL alamat blog.
  • untuk About, link yang digunakan URL Aboutbox.
  • bila link-nya akan menuju ke halaman tersendiri, untuk dapatkan linknya bisa klik kanan pada judul dan klik "copy link location".
  • bila link-nya menuju pada halaman yang mempunyai label yang sama, untuk dapatkan link-nya bisa klik kanan pada label yang ada dibawah posting dan klik "copy link location".
3. Login ke Blogspot--> Rancangan—>Tambah gadget (di tempat yang kita ingin menu bar ditampilkan), pilih HTML/JavaScript gadget dan masukan kode berikut:
 <a
href=http://alamatblog.blogspot.com>HOME</a><a> | </a><a href=http://alamataboutpageURL>ABOUT</a><a> | </a><a href=http://alamathalamanURL>HALAMAN</a><a> | </a><a href=http://alamattipsURL>TIPS</a>

Klik tombol preview untuk melihat hasilnya, lalu simpan.
Catatan: 
* Ganti kata yang berwarna hijau dengan nama menu yang dinginkan.
* Ganti kata yang berwarna merah dengan alamat URL sesungguhnya. 

Selamat mencoba :-)

Get Paid To Promote, Get Paid To Popup, Get Paid Display Banner

Membuat Horisontal Menu Bar di blogger
http://bangnian.blogspot.com/2011/08/membuat-horisontal-menu-bar-di-blogger.html

0 komentar:

Posting Komentar