CARA MEMBUAT MENU BAR DI BLOG

Hal pertama yang harus dilakukan sebelum memasang menu bar adalah melihat apakah template yang dipakai sudah memiliki kolom Add a gadget dibawah kolom Navbar. Jika belum berarti harus dilakukan sedikit modifikasi pada HTML template untuk bisa menampilkan link add page elements. Jika sudah ada kolom tersendiri di bawah Navbar, silahkan langsung ke no.2. 

Caranya adalah sebagai berikut:

1. Modifikasi HTML template agar mempunyai tempat untuk link Add a Page Element. Cara ini aku dapatkan dari Blog Kang Rohman

  • Login ke blogspot–> Layout/tata letak—> 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 seperti yang dipakai di blog ini yaitu Home, About, Tanaman, 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–> layout–>Add a 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.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: