11 April 2010

MEMBUAT NAVIGASI BLOG

Tips ini pernah saya baca di Blogger Buzz dimana dengan penambahan halaman seperti daftar isi, contact, kategori dan halaman lainnya bisa dibuat terpisah dengan file postingan. Halaman-halaman tadi dtampilkan sebagai menu horizontal yang berfungsi sebagai "navigasi blog. Untuk menambah halaman tersebut bisa kita lakukan lewat widget “Laman”. Tetapi sebelum kita tambah widget tersebut, kita perlu membuat dulu halaman-halaman yang akan kita tambahkan. Halaman yang bisa dibuat dan ditambahkan maksimal 10 halaman. Untuk memulai membuat halaman, masuk ke dashboard blog dan klik “Edit Entri” dan klik pada “Edit Laman”.

Buat laman baru

Buat laman baru

Selanjutnya klik pada “Laman Baru”, maka muncul halaman seperti halaman membuat postingan baru. Sebagai contoh, saya membuat halaman “Contact” dimana di dalam kolom postingan saya isikan script html yang sudah saya dapatkan dari situs www.emailmeform.com. Sedangkan jika ingin membuat halaman Daftar Isi, kita bisa isikan link-link setiap artikel yang kita miliki yang dikumpulkan dalam masing-masing kategori. Setelah selesai kita isi, klik tayangkan laman. Langkah selanjutnya, kita buka halaman “Tata Letak”. Pada susunan widget yang ditampilkan kita bisa pilih dimana nantinya letak halaman-halaman tadi ditampilkan. Jika ingin tampil diatas, pastikan template yang anda gunakan mendukung untuk itu. Sedangkan jika kolom widget hanya tersedia disamping, kita bisa tampilkan pada kolom tersebut dengan klik tulisan “Tambah Widget”. Jika jendela “widget” sudah ditampilkan, kita pilih widget “Laman” dan kita bisa beri tanda centang pada halaman-halaman yang kita buat sebelumnya. Jika sudah selesai, klik “Simpan” dan kita bisa lihat hasilnya dengan klik tulisan “lihat blog”. Selanjutnya kita tinggal menggeser letak widget tadi dengan cara “drag and drop” atau klik+tahan pada kotak widget lalu geser dan tempatkan tepat dibawah kotak “Header”. Untuk meng-edit tiap halaman yang telah kita buat, klik lagi pada “Edit Entri” dan klik “Edit Laman” maka akan tertampil seperti berikut :

Laman Blogger

Pada contoh gambar diatas anda bisa lihat bahwa untuk peng-editan cukup dengan klik “Edit”, klik “Hapus” untuk menghapus halaman dan klik pada “Lihat” untuk melihat tampilan halaman.
Tetapi pada dasarnya, halaman-halaman tersebut bisa kita tambahkan tanpa menggunakan widget “Laman”. Untuk itu kita perlu menambahkan beberapa kode HTML pada susunan template melalui “Edit HTML” atau menghubungkan dan memasang link halaman secara manual. Berikut contoh penulisannya :

Cari kode berikut :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TIPS BLOG DAN SOFTWARE KOMPUTER (Header)' type='Header'/>
</b:section>
</div>

Judul blog yang saya tulis dengan warna merah adalah title blog saya, jadi nanti tergantung title blog anda sendiri. Lalu tambahkan kode berikut tepat dibawahnya :

<ul id='nav'>
<li><a href='http://taman-merdeka.blogspot.com/p/daftar-isi.html'> Daftar Isi</a></li>
<li><a href='http://taman-merdeka.blogspot.com/p/blog-para-sahabat.html'> Blog list</a></li>
<li><a href='http://taman-merdeka.blogspot.com/p/contact-to-me.html'> Contact</a></li>
<li><a href='http://taman-merdeka.blogspot.com/p/dokumen-pdf.html'> Download PDF</a></li>
<li><a href='http://taman-merdeka.blogspot.com/p/tentang-saya.html'>Tentang Saya</a></li>
</ul>

Kode diatas bisa kita tambahkan pada template blog kita sehingga blog kita memiliki navigasi (menu horizontal) tanpa perlu menggunakan widget “Laman”. Jika ingin diletakkan di sidebar maka sebaiknya tetap menggunakan widget “Laman”. Untuk yang ditulis dengan warna merah (pada kode diatas) bisa diganti dengan menu yang sesuai dengan keinginan anda sendiri. Sedangkan URL yang harus diisikan harus sesuai dengan URL halaman yang telah anda buat sebelumnya. Sebagai contoh, jika sebelumnya anda membuat halaman “daftar isi” maka penulisan URL pastinya seperti berikut :

http://taman-merdeka.blogspot.com/p/daftar-isi.html

Pada tulisan “daftar isi” (warna merah) akan tergantung pada judul yang anda isikan waktu membuat halaman-halaman tambahan.
Jika anda membuat halaman tanpa menggunakan widget “Laman” biasanya selalu ditampilkan konfirmasi seperti gambar berikut :

Pilihan tampilan laman

Selanjutnya anda klik “Simpan dan Tayangkan”. Jadi memang perlu perlu dilakukan secara manual dengan mengisikan kode html dibawah kode header pada template anda. Konfirmasi dengan klik “Tidak ada gadget” tersebut akan selalu muncul selama anda buat “Laman Baru” tanpa menggunakan widget “Laman”. Demikian tips membuat navigasi blog atau menu horizontal, semoga menambah wawasan anda.

8 comments:

Robby mengatakan...

Kenapa setelah saya tambah scriptnya,kok malah tampil di sebelah kanan ? Bukan di header ?

Nizam Z mengatakan...

Pada template blog anda sudah tersedia menunya, cukup anda tambahkan url halaman lainnya. Cari pada edit html template anda kode "Beranda" dan "Thema", nanti anda cukup tambahkan dibawahnya. Jangan pake gadget lho. Dan penempatan scriptnya jgn sampai keliru!

Septian Budo Utomo mengatakan...

KK gimana caranya membuat isi dari setiap menu navgasi,, contoh menu contact jika di klik nanti muncul halaman baru gimana buatnya kk plisss kasih tau Q..

Nizam Z mengatakan...

@Septian : Terima kasih telah berkunjung dan bertanya, tetapi nampaknya anda kurang teliti membaca. Coba baca sekali lagi, terutama pd bag."Untuk memulai membuat halaman.."
Tetapi khusus halaman "Contact", anda bisa kunjungi www.emailmeform.com. Nanti anda harus register gratis dan membuat script html sendiri dg pilihan tampilan dan ukuran yg telah disediakan. Tidak usah ragu, karena sangat mudah, nanti anda akan diberikan script html yg bisa diisikan di kolom postingan (saat membuat halaman baru).

Kumpulan Bisnis Online Indonesia mengatakan...

Terima Kasih Mas....
Ilmunya bermanfaat bener nih...bagi saya...

Ngomomg2 cara buat form kontak kaya mas itu gimana ya...

Tolong dibalas mas ya...

Nizam Z mengatakan...

untuk membuat halaman contact,silahkan kunjungi www.emailmeform.com dan pilih akun gratis

Drummer mengatakan...

makasih tipsnya sobat, sy lg cari cara seting header di blog baru. mampir ya.

Nizam Z mengatakan...

@Drummer : thx, sobat, saya akan coba berkunjung balik. Ngomong2, edit header biasanya edit pada script CSS-nya.@Drummer : thx, sobat, saya akan coba berkunjung balik. Ngomong2, edit header biasanya edit pada script CSS-nya.

 

© 2009 TIPS BLOG DAN SOFTWARE KOMPUTER. Powered by Blogger
Design by eJoee BlogsTricks