Rabu, 18 Maret 2009

blogger hack html css: membuat menu navigasi

Ketika Anda memasuki blog saya ini, Anda bisa melihat menu navigasi yang ada di bagian atas setelah header itu. Membuat menu navigasi seperti itu dibutuhkan pengaturan css dan html. Jika Anda suka memberikan link ke suatu halaman postingan Anda melalui menu navigasi, saya akan memberikan contoh bagaimana saya membuat menu di atas itu dengan html dan css.

Pertama-tama, masuk ke blogger Anda kemudian menuju Layout/TataLetak, trus pilih Edit HTML. Saya menyarankan Anda menggunakan Browser FireFox, sehingga ketika Anda menekan CTRL + F pada keyboard akan muncul kotak Find. Dan jika sudah muncul, masukan kode seperti ini: </head>

Anda akan menemukan kode html yang diblock dengan warna hijau. Letakan cursor persis di atas kode </head> kemudian masukan tag css berikut ini:

<style type='text/css'>
#menu-atas {
font-family: Verdana;
padding:10px;
}
#menu-atas a {
color:#999;
border:1px #EDEEF0 solid;
padding:5px;
text-decoration:none;
}
#menu-atas a:hover {
color:#4D81F7;
border:1px #000000 solid;
text-decoration:none;
}
</style>


Simpan perubahan Anda, dan kembali ke kotak Find kemudian ketikan kode <div id='header-wrapper'>,

Kode itu adalah kode pembuka tag div header, maka kode yang akan Anda kerjakan akan diletakkan tepat di bawah tag penutup div header tersebut. Yaitu persis di bawah kode </div>

Kemudian masukan tag elemen halaman baru - persis di bawahnya elemen header - seperti ini (copy and paste):

<div id='footer-wrapper'>
<b:section class='footer' id='footer2'>
</b:section>
</div>


Ingat, kode itu harus Anda letakkan di bawah header wrapper atau <div id='header-wrapper'>. Untuk persisnya, lihat contoh penempatan yang saya lakukan:


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='w.purnomosidi is selebriti internet (Header)' type='Header'/>
</b:section>
</div>



<div id='footer-wrapper'>
<b:section class='footer' id='footer2'>
</b:section>
</div>


Sebelum Anda menyimpan perubahan itu, klik Preview/Pra Tinjau. Jika tidak menemukan error, maka Anda boleh menyimpan perubahan.

Selanjutnya, silahkan menuju menu Page Element/Elemen Halaman. Di sana Anda akan menemukan elemen halaman baru untuk menempatkan HTML/Javascript Gadget baru untuk membuat menu navigasi.

Buat elemen halaman HTML/Javascript baru, dan isikan tag-tag html untuk membuat link dengan aturan seperti berikut:

<div id="menu-atas">
<a href='http://url-anda'>Home</a>
<a href='http://url-anda/2009/03/posting-artikel-anda.html'>Artikel Anda</a>
</div>


Simpan dan lihat navigasi baru Anda. Untuk selebihnya, silahkan atur css-nya sesuai keinginan Anda, seperti background, font color, font type dan sebagainya.

Oh ya... itu bekerja untuk minima template saya. Saya tidak tau gimana jika diterapkan di template Anda. Tapi jika itu blogger baru dengan template xml, tentu bisa diimplementasikan.

Selamat mencoba dan jangan kapok untuk hacking dan tweaking blogger. Kalo jadinya error, mu'up yuah ..







18 komentar:

  1. waaahhhmakin mantep nih imponya...keren euy..ane suka banget sama ngoprek2 kayak gini nih...jadi semangat bro

    BalasHapus
  2. MAS,,MOHON BIMBINGANYA DONG WAT BIKIN BLOG SAYA JADI BAGUS,,,
    GMN SIH PASANG BANER2, BAR,


    by vhee_re@yahoo.co.id
    NI BLOG SAYA MAS,,WWW.cahwonosigro.blogspot.com
    masih sepi tampilanya,,oiya,,,templatenya juga default dari bloger,,

    BalasHapus
  3. wah-wah mumet tenan.. makan antimo dulu biar agak mendingan... hehehe...

    BalasHapus
  4. koq cuma 2 tombol saja, gimana cara nambahnya, trimz atas tipnya

    BalasHapus
  5. cara mengisi tombol navigasi gimana bos...

    BalasHapus
  6. dah tak coba kok ga ada perubahan blas, bos. po ga cocok sama templateku ya ?

    BalasHapus
  7. nice posting interseting banget ya......

    BalasHapus
  8. Sudah selesai mas, cuma muncul satu halaman utk penempatan widgetnya. Kasih petunjuk mas, apa nanti tombol navigasi tsb tampil horisontal?

    BalasHapus
  9. terimakasih atas infonya 'cara buat menu di header' . Saya jadi tambah pengetahuan tentaang bahasa HTML, dan bahasa yang disampaikan cukup mudah di mengerti buat pemula spt saya. sekali-kali lihat blog saya, masih banyak kekurangan disana-sini. Pelan2 saya up grade terus agar penammpilannya bagus. Trims

    BalasHapus
  10. hm..tutorialnya hampir sama..

    BalasHapus
  11. http://suharjo21.blogspot.com/

    bagaimana caranya memasukan postingan ke dalam navigasi menu, susah,,yang tau kirim ke roomajo@gmail.com

    BalasHapus
  12. idem sama temen2 yg laen,.. thanks tipsnya..mau coba dulu nih..? smg berhasil..update terus ya..?

    BalasHapus
  13. kunjungi juga http://abloke.byethost11.com dan agungbsi.000space.com dan agungbrain.blogspot.com

    BalasHapus
  14. Oke BOSS trimakasih buanyak tutorial cssnya...jazakumulloh... persilahkan kunjungi hasilnya di (http://solusiswa.blogspot.com )
    oh ya gi mana caranya agar bisa menjadi menu drop down ...

    BalasHapus
  15. mantap sekali infonya bro.....ntar ku mau artikel ini muat di blog saya boleh gk,sekalian tuker link ya nih link saya
    http://bisnisworld23.blogspot.com

    BalasHapus