Sobat, bisa jadi selama ini kita mengganggap bahwa pull down menu atau sub menu yang terdapat dalam bilah menu horizontal sebuah blog hanya dapat dibuat pada blog yang menggunakan kustom template saja. Hal ini disebabkan karena tiap kali kita menambahkan menu baru dengan menggunakan pilihan ‘Laman (Page)’ yang terdapat di dasbor Blogger, maka menu tersebut akan ditampilkan dalam satu baris tab menu, sehingga tampilannya terkesan kurang rapi apabila jumlah menu yang digunakan cukup banyak. Namun tahukah Anda bahwasanya kita juga dapat melakukan kustomisasi pada template standar yang disediakan oleh Blogger guna menambahkan sub menu ke dalam tab menu yang disediakan.
Perlu diingat bahwa apabila jumlah menu yang ditampilkan cukup banyak, sedangkan dari menu yang ditampilkan tersebut terdapat beberapa menu yang memiliki kategori sama, maka sebenarnya akan lebih efektif apabila menu dengan kategori sama tersebut dikelompokkan menjadi satu dalam sebuah sub menu atau pull down menu. Dan inilah salah satu tujuan dari kustomisasi template standar Blogger ini, yaitu untuk mengelompokkan beberapa menu yang memiliki kategori sama ke dalam sebuah menu dengan pull down menu atau sub menu di dalamnya.
Nah, untuk keperluan tersebut maka Anda dapat melakukannya dengan mengerjakan langkah-langkah berikut ini secara berurutan.
Pertama, ubahsesuaikan setelan tab menu dan menu halaman yang akan ditampilkan, dimana caranya adalah seperti yang tampak pada gambar di bawah ini.
Keterangan:
1. Pilih ‘Tab atas’ untuk menampilkan bilah menu di bawah header.
2. Menu yang dibuat pada bagian tersebut (dalam tanda angka 2) hanya menu yang tidak memiliki sub menu di dalamnya.Apabila setelan telah disesuaikan, maka selanjutnya klik menu ‘Simpan setelan’.
Kedua, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’ > ‘Expand Template Widget’.
Ketiga, cari kode ]]></b:skin> dan kemudian sisipkan kode CSS berikut ini tepat di atasnya. .tabs-inner .widget li ul {
z-index: 100; position: absolute;
left: -999em; height: auto; margin: 0; padding: 0;
border: 1px solid #999999;
}
.tabs-inner .widget li ul, .tabs-inner .widget li ul a,
.tabs-inner .widget li ul li:first-child a {
-moz-border-radius: 0px; -webkit-border-radius: 0px;
-goog-ms-border-radius: 0px; border-radius: 0px;
}
.tabs-inner .widget li:hover ul, .tabs-inner .widget li.sfhover ul {
left: auto;
}
.tabs-inner .widget li li a:hover, .tabs-inner .widget li li a:active {
color: #ffffff; background: rgb(51, 102, 153);
}
.tabs-inner .widget li ul a {
display: block; padding-left: 1.25em; padding-right: 1.25em;
margin-left: 0px; margin-right: 0px; border: none;
color: #000000; background: rgb(243, 244, 246);
}
.tabs-inner .widget li ul, .tabs-inner .widget li ul a {
width: 220px;
}
Keterangan:
Anda dapat mengubah warna garis, teks, background, dan lebar menu dengan menyesuaikan beberapa kode berikut ini:
Kode border: 1px solid #999999; digunakan untuk mengatur setelan garis, color: #000000; background: rgb(243, 244, 246); digunakan untuk mengatur warna default teks dan beckground, color: #ffffff; background: rgb(51, 102, 153); digunakan untuk mengatur warna teks dan background ketika disorot, dan width: 220px; digunakan untuk mengatur lebar sub menu.
Keempat, cari kode <li><a expr:href='data:link.href'><data:link.title/></a></li> dan kemudian perhatikan kode <b:/loop> yang terdapat beberapa baris di bawahnya. Nah, sisipkan kode dengan format berikut ini tepat di bawah <b:/loop>.
<li><a href='#'>Prilaku Berkarya </a>
<ul>
<li><a href='http://azizmudzakir11.blogspot.com/search/label/Agama%20dan%20Sains'>Agama dan Sains</a></li>
<li><a href='URL'>Hadis Tarbawi</a></li>
<li><a href='URL'>Ilmu Tasawuf</a></li>
<li><a href='URL'>Sosiologi Pendidikan</a></li>
<li><a href='URL'>Tafsir Tarbawi</a></li>
</ul>
</li>
<li><a href='#'>Pengembangan Kepribadian</a>
<ul>
<li><a href='URL'>Bahasa Arab I</a></li>
<li><a href='URL'>Bahasa Arab II</a></li>
<li><a href='URL'>Bahasa Inggris I</a></li>
<li><a href='URL'>Bahasa Inggris II</a></li>
<li><a href='URL'>Ilmu Alamiah Dasar</a></li>
<li><a href='http://azizmudzakir11.blogspot.com/search/label/Metodologi%20studi%20Islam'>Metodologi Studi Islam</a></li>
<li><a href='URL'>Filsafat Ilmu</a></li>
<li><a href='URL'>Pemikiran dan Peradaban Islam</a></li>
<li><a href='URL'>Pendidikan Agama I (Aqidah)</a></li>
<li><a href='URL'>Pendidikan Agama II (Ibadah Akhlaq)</a></li>
<li><a href='URL'>Pendidikan Kewarganegaaran</a></li>
<li><a href='http://azizmudzakir11.blogspot.com/search/label/Pendidikan%20pancasila'>Pendidikan Pancasila</a></li>
<li><a href='URL'>Studi Kepemimpinan Islam</a></li>
</ul>
</li>
<li><a href='#'>Keahlian Berkarya</a>
<ul>
<li><a href='URL'>T. Penulisan Skripsi</a></li>
<li><a href='URL'>Disain Pelatihan Pendidikan</a></li>
<li><a href='URL'>Disain Pembelajaran</a></li>
<li><a href='URL'>Tehnik Penulisan Skripsi</a></li>
<li><a href='URL'>Filsafat Pendidikan Islam</a></li>
<li><a href='URL'>Fiqh (Muamalah, Munakahat, Mawaris)</a></li>
<li><a href='http://azizmudzakir11.blogspot.com/search/label/fikih%20kontemporer'>Fiqh Kontemporer</a></li>
<li><a href='URL'>Ilmu Pendidikan Islam</a></li>
<li><a href='http://azizmudzakir11.blogspot.com/search/label/kewirausahaan'>Kewirausahaan</a></li>
<li><a href='http://azizmudzakir11.blogspot.com/search/label/materi%20pai'>Materi PAI (MI, MTs, MA)</a></li>
<li><a href='URL'>Media Pembelajaran</a></li>
<li><a href='URL'>Pengembangan Kurikulum PAI</a></li>
<li><a href='URL'>Pengembangan Sistem Evaluasi PAI</a></li>
<li><a href='URL'>Psikologi Agama</a></li>
<li><a href='http://azizmudzakir11.blogspot.com/search/label/psikologi%20belajar'>Psikologi Belajar</a></li>
<li><a href='http://azizmudzakir11.blogspot.com/search/label/psikologi%20konseling'>Psikologi Konseling Sekolah</a></li>
<li><a href='URL'>Psikologi Perkembangan</a></li>
<li><a href='URL'>Psikologi Sosial</a></li>
<li><a href='URL'>Statistik Pendidikan</a></li>
</ul>
</li><li><a href='#'>Kuliah Pilihan</a>
<ul>
<li><a href='URL'>Isu-Isu Pendidikan Islam</a></li>
<li><a href='URL'>Kesehatan Mental</a></li>
<li><a href='URL'>Pendidikan Anak Luar Biasa</a></li>
<li><a href='URL'>Pendidikan Andragogi</a></li>
<li><a href='URL'>Teknologi Pendidikan</a></li>
</ul>
</li><li><a href='#'>Keilmuan dan Ketrampilan</a>
<ul>
<li><a href='URL'>Bahasa Indonesia</a></li>
<li><a href='URL'>Dasar-Dasar Pendidikan</a></li>
<li><a href='URL'>Filsafat Umum</a></li>
<li><a href='URL'>Tehnik Penulisan Skripsi</a></li>
<li><a href='http://azizmudzakir11.blogspot.com/search/label/Ushul%20fikih'>Ushul Fiqih</a></li>
<li><a href='URL'>Filsafat Ilmu</a></li>
<li><a href='URL'>Tehnik Penulisan Skripsi</a></li>
<li><a href='URL'>Ushul Fiqih</a></li>
<li><a href='URL'>Filsafat Ilmu</a></li>
<li><a href='URL'>Hadis</a></li>
<li><a href='URL'>Komunikasi Pendidikan</a></li>
<li><a href='URL'>Manajemen Pendidikan</a></li>
<li><a href='http://azizmudzakir11.blogspot.com/search/label/metodologi%20penelitian'>Metodologi Penelitian</a></li>
<li><a href='URL'>Pendidikan Nasional</a></li>
<li><a href='URL'>Pendidikan Anak Usia Dini</a></li>
<li><a href='URL'>Penelitian Tindakan kelas</a></li>
<li><a href='http://azizmudzakir11.blogspot.com/search/label/penjaminan%20mutu%20pendidikan'>Penjaminan Mutu Pendidikan</a></li>
<li><a href='URL'>Psikologi Pendidikan</a></li>
<li><a href='URL'>Psikologi Umum</a></li>
<li><a href='URL'>Statistik</a></li>
<li><a href='URL'>Tafsir</a></li>
<li><a href='URL'>Ulumul Hadis</a></li>
<li><a href='URL'>Ulumul Qur¿an</a></li>
<li><a href='URL'>Ushul Fiqh</a></li>
</ul>
</li><li><a href='#'>SKRIPSI KKN </a>
<ul>
<li><a href='URL'>KKN Ekstensi Tematik</a></li>
<li><a href='URL'>KKN Extension</a></li>
<li><a href='URL'>KKN Kemitraan</a></li>
<li><a href='URL'>KKN Mandiri</a></li>
<li><a href='URL'>KKN Paper</a></li>
<li><a href='URL'>KKN Permagangan</a></li>
<li><a href='URL'>KKN Reguler I</a></li>
<li><a href='URL'>KKN Reguler II</a></li>
<li><a href='URL'>Skripsi</a></li>
</ul>
</li><li><a href='#'>Berkehidupan Bermasyarakat</a>
<ul>
<li><a href='URL'>Praktik Pengalaman Lapangan II</a></li>
</ul>
</li><li><a href='#'>Lain- lain</a>
<ul>
<li><a href='URL'>Motivasi</a></li>
<li><a href='URL'>Inspirasi</a></li>
<li><a href='URL'>Kata Bijak</a></li>
</ul>
</li>
Keterangan:
Ubah URL sesuai dengan URL yang akan digunakan pada sub menu dan sesuaikan ‘Menu’ serta ‘Sub Menu’ sesuai dengan teks yang akan ditampilkan. Dan apabila akan membuat beberapa menu pull down, maka salin kode tersebut secara berulang di bawahnya kemudian lakukan penyesuaian setelan dengan cara yang sama dengan sebelumnya.
Kelima, simpan template.
Dan selanjutnya sebagai contoh hasil dari penerapan dari teknik tersebut adalah seperti yang tampak pada gambar di bawah ini.
Semoga berguna dan bermanfaat.