Menambah Menu Tepat Di Atas Kolom Posting

Postingan tentang menambah menu horisontal di blog sudah banyak di posting oleh para blogger, khusunya blognya Kang Rohman, di sana banyak tips yang sangat bermanfaat untuk mempercantik blog. Setiap ada rekan atau teman kuliah yang ingin mempercantik dan memperindah blog saya selalu sarankan untuk mencarinya di blog Kolom Tutorial, tapi emang dasar teman yang kadang emang merepotkan :) tapi itulah temantetap saja maksa agar saya juga harus posting tentang bagaimana menambah Menu di blog, khusunya menambah menu tepat di atas kolom postingan. Tujuan saya menempatkan Menu tepat di atas kolom postingan agar kita tidak terlalu banyak mengubah code html dari template yang sudah ada, ya itung-itung dipersingkat gitoe...

Oke kita mulai saja dengan membuat menu...

Sebelum membuat menu, buatkan dua buah gambar untuk nantinya digunakan sebagai tampilan pada menu, jadi buatlah seindah mungkin dan sesuai dengan warna utama dari blog anda agar tidak terlalu berbeda jauh dari warna blog anda.

Sebagai contoh lihat gambar berikut :

menukiri.gif menukanan.gif

Contoh dari gambar di atas bisa anda lihat hasilnya di sini.

Setelah anda memiliki kedua gambar tersebut, langkah selanjutnya adalah menempatkan kedua gambar tersebut ke website yang menyediakan layanan upload gmbar, sebagai contoh saya menggunakan googlepages, upload kedua gambar tersebut ke google pages dan catat alamat url nya agar nantinya digunakan dalam pembuatan menu.

Langkah berikut adalah login ke blogger dengan akun anda kemudian klik layout atau tata letak dan klik edit html.

cari kode brikut : ]]></b:skin>

Bila sudah ketemu kode di atas, maka copy kode berikut ini dan pastekan tepat di atas kode tersebut setelah itu simpan template anda. Ingat !, gantikan alamat url yang ada dengan alamat url gambar yang sudah anda simpan di google pages atau web lainnya.

/* menambah menu tepat di atas blog */ #tabsMenu {float:left; width:100%; background:transparent; font-size:15px; line-height:normal; border-bottom:1px solid #666;} #tabsMenu ul { margin:0; padding:10px 10px 0 50px; list-style:none;} #tabsMenu li { display:inline; margin:0; padding:0;} #tabsMenu a { float:left; background:url("http://hendrypiran.googlepages.com/menukiri.gif") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none;} #tabsMenu a span { float:left; display:block; background:url("http://hendrypiran.googlepages.com/menukanan.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#0000cc;} /* warna teks pada menu */ /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsMenu a span {float:none;} /* End IE5-Mac hack */ #tabsMenu a:hover span { color:#999900;} /* warna teks menu saat mouse tepat pada teks */ #tabsMenu a:hover { background-position:0% -42px;} #tabsMenu a:hover span { background-position:100% -42px;} #tabsMenu #current a { background-position:0% -42px;} #tabsMenu #current a span { background-position:100% -42px;} /* akhir menu di blog */

Langkah pertama kita dalam membuat Menu sudah berakhir, tapi ingat masih ada satu langkah lagi untuk menentukan letak menu tersebut di tampilkan, dalam hal ini tepat di atas kolom postingan seperti contoh di sini.

Klik Layout dan tambahkan komponen html/javascript kemudian copy dan pastekan code brikut ini. Ingat !, gantikan linknya ke link blog anda.

<div id="tabsMenu"> <!-- awal tabsMenu --> <ul> <!-- gantikan link dengan link blog anda --> <li id="http://klikganda.blogspot.com"><a href="#"><span>Halaman Muka</span></a></li> <li><a href="#"><span>Produk</span></a></li> <li><a href="#"><span>Buku Tamu</span></a></li> </ul> </div> <!-- akhir tabsMenu -->


Langkah kedua sudah berakhir dan coba dipreview atau pratinjau blog anda.

Kedua langkah di atas adalah untuk membuat atau menambah menu tepat di atas kolom posting, apabila anda ingin menambah menu tepat di bawah judul blog maka anda harus mengubah beberapa code berikut.

Klik edit html, kemudian cari kode seperti berikut :

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='your blog title (Header)' type='Header'/>
</b:section>

setelah ditemukan ganti kode tersebut dengan kode di bawah ini atau ganti huruf yang berwarna merah di atas dengan huruf berwarna kuning di bawah ini

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='your blog title (Header)' type='Header'/>
</b:section>

langkah selanjutnya lakukan seperti menambah komponen di atas kolom posting tadi, bedanya sekarang komponen yang kita tambahkan tersebut harus ditempatkan tepat di bawah header blog.

selamat belajar... semoga bisa membantu