Pages

Home » Posts filed under Dropdown
Showing posts with label Dropdown. Show all posts
Showing posts with label Dropdown. Show all posts

Cara Membuat Horizontal Menu Dropdown

Ttulisan lama saya angkat kedalam blog saya, sebenarnya saya agak malas menulis postingan ini, karena cukup panjang kode HTML-nya,  tapi berhubung ada beberapa pertanyaan dari sobat blogger di kolom shoutbox, yang menanyakan tentang cara membuat menu horizontal seperti yang ada di blog saya, makanya sekalian saja saya tuliskan tentang horizontal menu dropdown buat sobat blogger.

Menu ini cukup panjang dan berhubungan dengan template, jadi saya sarankan untuk membackup template sobat terlebih dahulu sebelum mencoba tutorial ini. Sepertinya saya terlalu panjang lebar ya, baiklah langsung saja kita menuju TKP.


  1. Login ke Blogger.
  2. Klik Tata Letak.
  3. Klik Edit HTML.
  4. Backup template sobat terlebih dahulu, silahkan klik Download Template Lengkap.
  5. Contreng Expand Widget Template.
  6. Cari kode
dan letakkan kode berikut sebelum kode

.jqueryslidemenu{
font: bold 12px Trebuchet MS; background: #414141; width: 100%;}

.jqueryslidemenu ul{
margin: 0; padding: 0; list-style-type: none;}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative; display: inline; float: left;}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0; display: block; visibility: hidden;}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item; float: none;}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{top: 0;}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;color: black;}

/* CSS classes applied to down and right arrow images */

.downarrowclass{
position: absolute; top: 12px; right: 7px;}

.rightarrowclass{
position: absolute; top: 6px; right: 5px;}

  • Kemudian letakkan kode berikut sebelum kode



    • Labels: , ,

    Tips Membuat Menu Dropdown

    type='html'>Untuk menghindari arsip blog yang menumpuk atau berderet kebawah terlalu panjang, kita bisa menggunakan menu dropdown agar terlihat lebih efisien. Karena semakin banyak dan semakin lama kita ngeblog maka arsip blog kita akan bertambah panjang daftarnya. Seperti yang kita ketahui, blog di arsip setiap bulan. Bagaimana kalau sobat ngeblog bertahun-tahun, tentu akan semakin panjang kan daftar bulan arsip blog sobat.
    Berikut ada sedikit tips untuk membuat menu dropdown, tapi saya hanya akan menjelaskan cara membuat menu dropdown untuk yang memakai template baru, karena saya sendiri juga menggunakan template baru.
    • Login ke Blogger dengan ID sobat tentunya.
    • Klik Tata Letak.
    • Kemudian klik Elemen Halaman.
    • Klik tambah Gadget --> kemudian pilih menu yang bertulikan Arsip Blog
    • Disamping tulisan style, pilih radio button yang bertuliskan Dropdown Menu --> kemudian contreng kotak radio button tersebut.
    • Klik Simpan.
    • Itu tadi menu dropdown untuk Arsip Blog sobat, lantas bagaimana cara membuat menu dropdown yang didalamnya terdapat link. Seperti ini kode HTML nya :


    • Contohnya seperti berikut :

    • Hasilnya :

    Sangat mudah bukan, silahkan dicoba !
    Labels: ,
    Subscribe to: Posts (Atom)