oche

Sabtu, 14 April 2012

cara buat menu di bawah header

BAGAIMANA CARA MEMBUAT MENU DI BAWAH HEADER
Sebuah blog adalah semacam buku yang tersusun dari banyak halaman. Lazimnya sebuah buku diperlukan daftar isi dan semacamnya agar halaman-halaman buku mudah ditemukan. Karena itu blog dianjurkan memiliki menu-menu yang membuat navigasi menjadi lebih mudah. Menubar adalah sarana navigasi pada situs web yang berisi daftar tautan/link. Menubar umumnya terletak mendatar pada header, baik dalam posisi menggantung (di bagian bawah) maupun persis di atas header.

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.



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:
    ]]> agar letaknya dapat segera diketahui.Copy kode berikut, lalu paste di atas kode ]]> #under_header{
    margin:10px 0;
    padding:1%;
    width:98%;
    }
  • Cari lagi kode yang mirip dengan kode di bawah ini :  
    id='header-wrapper'>





    Copy kode berikut lalu paste persis di bawah kode tadi :









    Copy kode berikut lalu paste persis di bawah kode tadi :

  • Jadi setelah digabung seperti cara diatas, keseluruhan kode akan seperti ini:
  • 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: alamatblog.blogspot.com>HOME | alamataboutpageURL>ABOUT | alamathalamanURL>HALAMAN | alamattipsURL>TIPS
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 SOBAT BLOGGER


0 komentar:

Posting Komentar

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | SharePoint Demo