Cara Membuat Menu Horizontal Tabs Sederhana di Blogger


Tips Trik Blogger: TENTANG ILMU balik lagi dengan persembahan Menu Horizontal buat Blogger/Blogspot. Seperti pilihan menu-menu horizontal sebelumnya, pilihan menu horizontal ini masih berkutat menggunakan CSS serta HTML tanpa Javascript/Jquery, bahkan tanpa memakai gambar, berbasis tab individual, dan nir memakai list (HTML unordered list). Posting menu horizontal ini pula dibuat buat memenuhi permintaan dalam komentar sobat Klik Menarik di posting Cara Membuat Menu Horizontal CSS 3D Button Blogger/Blogspot buat dibuatkan pilihan menu horizontal yang sama menggunakan menu horizontal sebuah blog lain. Tentu saja pilihan menu ini sudah mengalami beberapa modifikasi agar sinkron sebagai widget tambahan. Tetapi sekiranya terdapat kemiripan lah. Hope you enjoy and like it!
Kode CSS:
/* Navigasi tabs Sederhana buka-rahasia.blogsot.com Starts */
a.burastabs, a.burastabs:link, a.burastabs:visited display:block; width:102px; height:30px; background:#444444; border:1px solid #ebebeb; margin-top:2px; text-align:center; text-decoration:none; font-size:12px; font-weight:bold;color:#FFFFFF; line-height:25px; overflow:hidden; float:left;
a.burastabs:hover color:#FFFFFF; background:#666666;
#burasbar width:auto; margin:0 auto;
/* Navigasi tabs Sederhana Ends */
Kode HTML:


Sebelumnya copy & edit terlebih dahulu kode HTML pada atas. Ganti # menggunakan URL yang dikehendaki. Ganti jua Home, Blog Tips, SEO Tips, serta seterusnya dengan anchor text yang diinginkan. Untuk menambah atau mengurangi tab, copy/masukkan atau hapus bagian #" class="burastabs">Anchor Text di atas
.

Cara Membuat Menu Horizontal Tabs Sederhana pada Blogger/Blogspot:

1. Masuk ke Dashboard > Design/Rancannga > Edit HTML.
2. Copy kode CSS pada atas,
4. Cari ]]> (cari dengan Ctrl + F) & letakkan/paste Kode CSS tepat pada atasnya.
5. Save Template.
6. Masuk ke Page Elements > Klik Add a Gadget
7. Setelah pop up window muncul, pilih opsi HTML/Javascript
8. Masukkan Kode HTML yang telah diedit tersebut dalam kolom misalnya model berikut:
 
9. Klik save.
10. Drag/geser widget menu horizontal tersebut ke bawah/atas header (letakkan pada slot gadget) serta save lagi. DOnE!

mencuri merupakan pekerjaan pengecut! © mengenai-soal.blogspot.com

Tidak ada komentar untuk "Cara Membuat Menu Horizontal Tabs Sederhana di Blogger"