Wednesday, March 18, 2009

Pasang Menu Bar di blogger/blogspot

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.

*****

Tips Blogger lainnya:

Posting Dengan Kategori Sama





MAKE MONEY on your PROFILE - ProfileDough.com

13 comments: