7/24/2019 Cara Menambahkan Sub Menu

1/3

Cara Menambahkan Sub Menu (Pull Down Menu) Pada Tab Menu

Horizontal Standar Blogger

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 !logger,maka menu tersebut akan ditampilkan dalam satu baris tab menu, sehingga tampilannya

terkesan kurang rapi apabila jumlah menu yang digunakan "ukup banyak. #amun tahukah

$nda bahwasanya kita juga dapat melakukan kustomisasi pada template standar yang

disediakan oleh !logger guna menambahkan sub menu ke dalam tab menu yang disediakan.

Perlu diingat bahwa apabila jumlah menu yang ditampilkan "ukup banyak, sedangkan dari

menu yang ditampilkan tersebut terdapat beberapa menu yang memiliki kategori sama, maka

sebenarnya akan lebih e%ekti% apabila menu dengan kategori sama tersebut dikelompokkan

menjadi satu dalam sebuah sub menu atau pull down menu. &an inilah salah satu tujuan dari

kustomisasi template standar !logger ini, yaitu untuk mengelompokkan beberapa menu yang

memiliki kategori sama ke dalam sebuah menu dengan pull down menu atau sub menu didalamnya.

#ah, untuk keperluan tersebut maka $nda dapat melakukannya dengan mengerjakan

langkah'langkah berikut ini se"ara berurutan.

Pertama, ubahsesuaikan setelan tab menu dan menu halaman yang akan ditampilkan, dimana

"aranya adalah seperti yang tampak pada gambar di bawah ini.

Sumber gambar blogger."om

Keterangan:

. Pilih *ab atas untuk menampilkan bilah menu di bawah header.

http://lh5.ggpht.com/-fdzTcBSXj-c/UCFV4LunjLI/AAAAAAAAAbQ/wyc0SDFhREE/s1600-h/Cara%252520Membuat%252520Menu%252520Halaman%252520Pada%252520Blog%25255B1%25255D.jpghttp://lh5.ggpht.com/-HRXDg8StlPk/UCFVrdQO_JI/AAAAAAAAAbA/OckjXA0_Gpc/s1600-h/Sub%252520Menu%252520Pada%252520Tab%252520Menu%252520Standar%252520Blogger.jpg

7/24/2019 Cara Menambahkan Sub Menu

2/3

+. enu yang dibuat pada bagian tersebut (dalam tanda angka +) hanya menu yang tidak memiliki sub menu di dalamnya.

$pabila setelan telah disesuaikan, maka selanjutnya klik menu Simpan setelan.

Kedua, buka editor template dengan "ara mengeklik menu Template !dit HTM"

"an#utkan !$pand Template %idget.

Ketiga, "ari kode &&'b:kindan kemudian sisipkan kode -SS berikut ini tepat di atasnya..tabs-inner.widgetliul{

z-index: 100;position: absolute;

left: -999em;height: auto;margin: 0; padding: 0;

border: 1px solid #999999;

}

.tabs-inner.widgetliul .tabs-inner.widgetliula

.tabs-inner.widgetliulli:first-!hild a {

-moz-border-radius: 0px;-web"it-border-radius: 0px;

-goog-ms-border-radius: 0px;border-radius: 0px;

}

.tabs-inner.widgetli:hoer ul .tabs-inner.widgetli.sfhoerul{

left: auto;

}

.tabs-inner.widgetlilia:hoer .tabs-inner.widgetlilia:a!tie {

!olor: #ffffff;ba!"ground: rgb$%1 10& 1%'(;

}

.tabs-inner.widgetliula {

displa): blo!";padding-left: 1.&%em;padding-right: 1.&%em;

margin-left: 0px;margin-right: 0px;border: none;

!olor: #000000;ba!"ground: rgb$&*' &** &*+(;

}

.tabs-inner.widgetliul .tabs-inner.widgetliula {

width: &&0px;

}

Keterangan:

$nda dapat mengubah warna garis, teks, ba"kground, dan lebar menu dengan menyesuaikan beberapa kode berikut ini

odeborder p/ solid 01111112digunakan untuk mengatur setelan garis, "olor 03333332 ba"kground rgb(+45, +44, +46)2 digunakan untuk

mengatur warna de%ault teks dan be"kground, "olor 0%%%%%%2 ba"kground rgb(7, 3+, 75)2digunakan untuk mengatur warna teks dan ba"kground

ketika disorot, dan width ++3p/2digunakan untuk mengatur lebar sub menu.

Keempat, "ari kode 'li'a e$pr:hre*+,data:link-hre*,'data:link-title'a'lidan

kemudian perhatikan kode 'b:loopyang terdapat beberapa baris di bawahnya. #ah,

sisipkan kode dengan %ormat berikut ini tepat di bawah 'b:loop.,li,ahref/#/enu,a

,ul

,li,ahref/234/5ub enu 1,a,li

,li,ahref/234/5ub enu &,a,li

,li,ahref/234/5ub enu ',a,li

,ul

,li

Keterangan:

8bah 89L sesuai dengan 89L yang akan digunakan pada sub menu dan sesuaikan enu serta Sub enu sesuai dengan teks yang akan

ditampilkan. &an apabila akan membuat beberapa menu pull down, maka salin kode tersebut se"ara berulang di bawahnya kemudian lakukanpenyesuaian setelan dengan "ara yang sama dengan sebelumnya.

7/24/2019 Cara Menambahkan Sub Menu

3/3

Kelima, simpan template.

&an selanjutnya sebagai "ontoh hasil dari penerapan dari teknik tersebut adalah seperti yang

tampak pada gambar di bawah ini.

Semoga berguna dan berman%aat.

Salam.

http://lh6.ggpht.com/-tKSXcdfHxGA/UCFWEGnQ56I/AAAAAAAAAbg/65lM5PZycRc/s1600-h/Contoh%252520Pull%252520Down%252520Menu%252520Pada%252520Blog%25255B12%25255D.jpg