Cara Membuat Menu Horizontal Tabs Sederhana di Blogger


Tips Trik Blogger: Buka Rahasia Blogspot kembali lagi dengan persembahan Menu Horizontal untuk Blogger/Blogspot. Seperti menu-menu horizontal sebelumnya, menu horizontal ini masih berkutat dengan CSS dan HTML tanpa Javascript/Jquery, bahkan tanpa menggunakan gambar, berbasis tab individual, dan tidak menggunakan list (HTML unordered list). Posting menu horizontal ini juga dibuat untuk memenuhi permintaan pada komentar sobat Klik Menarik di posting Cara Membuat Menu Horizontal CSS 3D Button Blogger/Blogspot untuk dibuatkan menu horizontal yg sama dengan menu horizontal sebuah blog lain. Tentu saja menu ini telah mengalami beberapa modifikasi agar sesuai sebagai widget tambahan. Namun sekiranya ada kemiripan lah. Hope you enjoy and like it!
menu horizontal blogger
demo menu horizontal
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-family:arial, sans-serif; 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:
<!-- Navigasi tabs Sederhana http://buka-rahasia.blogspot.com Starts -->
<div id='burasbar'>
<a href="#" class="burastabs">Home</a>
<a href="#" class="burastabs">About</a>
<a href="#" class="burastabs">Blog Tips</a>
<a href="#" class="burastabs">SEO Tips</a>
<a href="#" class="burastabs">Contact</a>
<a href="#" class="burastabs">Sitemap</a>
<a href="#" class="burastabs">Advertise</a>
</div>
<!-- Navigasi tabs Sederhana Ends -->
Sebelumnya copy & edit terlebih dahulu kode HTML di atas. Ganti # dengan URL yg dikehendaki. Ganti juga Home, Blog Tips, SEO Tips, dan seterusnya dengan anchor text yg diinginkan. Untuk menambah atau mengurangi tab, copy/tambahkan atau hapus bagian <a href="#" class="burastabs">Anchor Text</a> di atas </div>.

Cara Membuat Menu Horizontal Tabs Sederhana di Blogger/Blogspot:

1. Masuk ke Dashboard > Design/Rancannga > Edit HTML.
2. Copy kode CSS di atas,
4. Cari ]]></b:skin> (cari dengan Ctrl + F) & letakkan/paste Kode CSS tepat di 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 yg telah diedit tadi pada kolom seperti contoh berikut:
undefined 
9. Klik save.
10. Drag/geser widget menu horizontal tersebut ke bawah/atas header (letakkan pada slot gadget) dan save lagi. DOnE!

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Comments

Post a Comment

Jangan lupa komentar yaaa !!!

Popular posts from this blog

Perbedaan Ilmu Hadits Riwayah Dan Dirayah

RINGKASAN PERBEDAAN ANTARA ILMU HADITS RIWAYAH DAN ILMU HADITS DIRAYAH Tinjauan Ilmu Hadits Riwayah Ilmu Hadits Dirayah Objek pembahasan Segala perkataan, perbuatan dan persetujuan Nabi saw. Hakikat, sifat-sifat dan kaidah-kaidah dalam periwayatan Pendiri Muhammad bin Syihab Az-Zuhri (w. 124 H) Abu Muhammad Al-Hasan bin Abdurrahman bin Khalad Ar-Ramahurmuzi (w. 360 H) Tujuan Memelihara syari’ah Islam dan otentisitas Sunnah Meneliti hadits berdasarkan kaidah-kaidah atau persyaratan dalam periwayatan. Faedah Menjauhi kesalahan dalam periwayatan Mengetahui periwayatan yang diterima (maqbul) dan yang tertolak (mardud)             Sekalipun berbeda antara Ilmu Hadits Riwayah dan Ilmu Hadits Dirayah, namun keduanya tidak dapat dipisahkan antara satu dengan yang lain. Hubungan antara ilmu hadits riwayah dan dirayah a...
Read more

Pengalaman tes di Bank Mandiri

Assalamu'alaikum wahai pejuang bank mandiri. Sekitar bulan juli akhir gue dikasihtau kaka kalo ada lowongan menjadi frontliner di bank mandiri jakarta. Ya syarat2nya standar sih cuma tinggi badan harus 155cm keatas. Waktu itu informasi walk interview di bank mandiri cabang gambir waktu itu bisa di bilang itu tahap pertama yaitu : 1. Interview awal Yaaa, waktu itu interview nya hari minggu jadi banknya tutup. Yang dapeng itu sekitar 100 orangan, interviewnya sih gak lama cuma ngantrinya yang lama. Dan yang ngeinterview cuma 3 orang dari banknya, 1 orang bank nya bisa ngeinterview 2 orang sekaligus, dan pas baru dateng diukur dulu berat badan dan tinggi badan . Waktu bulan juli 2017 itu berat gue masih 54 kg dan tinggi 155cm, harusnya berat gue 45kg biar ideal. Ehh ini over 9 kg. Dan gue ini bukan jurusan perbankan, ekonomi atau akuntasi gue ini jurusan guru, guru agama islam. Ya langsung aja  ini adalah pengalaman pertama gue interview ya hati gak bisa dibohongin dagdigdug jege...
Read more

Pidato Bahasa Inggris dan terjemahan tentang Reading is a window to the world

Nisa Asri Amalia Tarbiyah 2A Assalamu'alaikum wr..wb I respect my beautiful teacher's miss. Teti and my friends who I love First of all, let's pray and thank unto our god allah SWT. Who has been giving us some mercies and blessing so we can attend and gather in this place in good condition and happy situation. Secondly, Solawat and greeting always be given to our prophet Muhammad SAW. Who has guided us from the darkness to the brightness from the stupidity to the cleverness from jahiliah era to the islamiah era namely Islamic religion that we love.   Thirdly, I don't forget to say thanks so much to the mistress of ceremony who has been giving me time to speak in front of you all. Dear leadis and gentleman. Standing in front of you all, I would like to deliver my speech on the theme of Reading is a window to the world Here I will deliver my speech on the theme of Reading is a window to the world. Reading said to be a window to the world for the same b...
Read more