SUB MENU BLOGGER

Cara Menambahkan Sub Menu Pada Tab Menu Bawaan Blogger – Sub menu yang akan ditampilkan atau di tambahkan kali ini hanya berlaku untuk tab menu bawaan blogger yang kode CSS nya dimulai dengan .tabs-inner {margin: 1em . . .dst. Jika kode CSS berbeda, silakan menggunakan cara lain yaitu membuat tab dengan sub menu, kalau dilihat dari kemudahan dan kesulitan dalam meng-aplikasikan-nya, kedua cara tersebut masih memiliki kekurang dan kelebihan masing-masing. Namun pada kesempatan ini saya sangat merekomendasikan cara dengan judul Menambahkan Sub Menu Pada Template Blogger ini yang digunakan, jika ada diantara sahabat blogger yang ingin mencobanya.

Jika selama ini sahabat mengganggap bahwa, sub menu atau pull down menu yang terdapat pada suatu blog hanya dapat dibuat pada blog yang menggunakan kustom template saja, maka sama juga halnya dengan dengan saya yang beranggapan demikian selama ini. Sekarang akan saya sampaikan kepada sahabat blogger sekalian, bahwasanya kita juga dapat melakukan kustomisasi pada template standar Blogger untuk menambahkan sub menu langsung pada tab menu utama yang tersedia. Terima kasih kepada blogger.com yang selalu memberikan kemudahan untuk menjadikan blog/web kita akan selalu tampil dinamis sepanjang waktu.

Salah satu tujuan dari kustomisasi template standar Blogger ini, adalah untuk menjadikan tab menu blog/web kita menjadi lebih rapi dengan menambahkan sub menu kedalamnya. Selain itu, panduan cara Menambahkan Sub Menu Pada Template Blogger ini diposting untuk mengatasi jika di blog web kita jumlah menu yang ditampilkan cukup banyak. Agar terlihat lebih professional, sebaiknya tab menu yang ditampilkan dengan sub menu tersebut memiliki kategori yang sama.

Untuk memulainya pastikan sahabat sekalian sudah mengaktifkan tab menu pada blog masing-masing, pilihannya adalah Pilih ‘Tab atas’ untuk menampilkan bilah menu di bawah header. Jika sudah langsung ikuti panduan selanjutnya di bawah ini.

Langkah-langkah Menambahkan Sub Menu Pada Template Blogger:
  1. Langsung masuk ke dasbor ⇨ pilih template
  2. Klik Edit HTML
  3. Cari kode .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {position: relative; . . . dst}, biasanya kode ini terdapat diantara <b:skin> ...disini... ]]></b:skin> yaitu pada /* Tabs -- */ .tabs-inner{margin: 1em.......... dst}
  4. Tambahkan kode CSS di bawah ini setelah kode .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {position: relative; . . . dst}
  5. Atau langsung saja copy kode di bawah ini dan pastekan sebelum kode ]]></b:skin>
  6. Selanjutnya cari kode:
    <li><a expr:href='data:link.href'><data:link.title/></a></li>
    Perhatikan kode <b:/loop> yang terdapat beberapa baris di bawahnya.
  7. Jika sudah ketemu, copy kode di bawah ini dan pastekan tepat di atas kode <b:/loop> tersebut.
Keterangan:
  1. Silakan ganti tulisan ‘Menu’ serta ‘Sub Menu’ sesuai dengan yang ingin ditampilkan, kemudian ubah tanda pagar (#) sesuai dengan URL link tujuan yang akan digunakan pada sub menu.
  2. Jika sahabat ingin membuat beberapa menu pull down atau tab menu yang disertai sub menu, sahabat cukup menyalin kode tersebut ( <li> . . s/d . . </li> ) secara berulang di bawahnya sesuai kebutuhan, kemudian lakukan penyesuaian seperti keterangan No. 1.
Terakhir  klik save/simpan template, silakan lihat hasilnya. Jika terlihat ada warna background ataupun warna huruf yang tidak sesuai, sahabat masih dapat mengganti warna-warna tersebut dengan merubah nilai yang terdapat pada:
  • disetiap tulisan border: 1px solid #999999, (* warna BIRU untuk mengganti warna garis/border)
  • disetiap tulisan color: #ffffff; (* warna COKLAT untuk mengganti warna hurup)
  • disetiap tulisan background: rgb(51, 102, 153) (* warna HITAM untuk mengganti warna background)
Demikian panduan Cara Menambahkan Sub Menu Pada Tab Menu Bawaan Blogger ini di sharekan di Jambogh Kita, semoga dapat menambah wawasan kita khususnya mengenai menata tab menu yang lebih rapi, efisien dan dinamis bersama blogger.com.

2 komentar:

  1. Sub Menu nya bisa bertingkat 2 ya?

    BalasHapus
    Balasan
    1. Tinggal menambahkan kode yang ada pada langkah: 7 Mbak Jamilah

      Hapus

Dilarang Menyematkan Link Aktif . . .! , Silakan Berkomentar Sesuai "Topik" Dengan Baik Dan Benar (No Porno dan SARA) ya.


Terima Kasih

 
AGHAS HIJAOE © 2016. All Rights Reserved
Template by Blogger Theme
Powered by Blogger
Top