remoxp

Lagi-lagi menu horizontal, sampai-sampai bosan nih!!! Yah, mungkin karena sudah terlanjur cinta sama yang namanya menu horizontal dengan menggunakan kode CSS dibandingkan menu horizontal pakai javascript, jadi saya mau ngga mau menerbitkan posting ini (ha...ha...ha...). Sorry, yang merasa disentil berarti mendapat perhatian khusus dari saya. Memang kalau dipikir-pikir yang namanya trik blogger tidak akan pernah habis-habisnya, kecuali tidak ada lagi orang yang nge-blog di blogger. Dalam kesempatan ini saya akan sedikit menambahkah tentang "Membuat Sub Dropdown Pada Horizontal Menu". Jangan kedipkan mata kamu dan mari kita mulai  trik bloggernya.

Oia, sebelumnya buat dulu horizontal menu, silakan buka  Membuat Horizontal Menu di blog dan Membuat Dropdown Pada Horizontal Menu

• Login dulu ke account blogger kamu.

• Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips: Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Tambahkan kode CSS berikut di bawah kode CSS menu horizontal yang ada.

    #nav li ul a {
    width: 100px;
    }
    #nav li ul ul {
    position: absolute;
    margin: -30% 0 0 95%;
    }
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left:-999em;
    }
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left:auto;
    }
    #nav li li li.sfhover ul {
    left:auto;
    }
    #nav li:hover, #nav li.sfhover {
    position:static;
    }

•  Cari kode HTML <div id='navleft'>.

Tips: Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan timbul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

• Kemudian tambahkan menu turunan kedua, seperti kamu menambahkan dropdown menu dalam horizontal navigasi (turunan pertama). Illustrasi kodenya adalah sebagai berikut.

    <div id='navleft'>
    <div id='nav'>
    <ul>
    <li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
    <li><a href='http://Link_yang_dituju'>teks kamu</a></li>
    <li><a href='http://Link_yang_dituju'>teks kamu</a>
    <ul>
    <li><a href='URL sub 1'>teks kamu</a></li>
    <li><a href='URL sub 2'>teks kamu</a></li>
    <li><a href='URL sub 3'>teks kamu</a>

    <ul>
    <li><a href='URL sub 3.1'>teks kamu</a></li>
    <li><a href='URL sub 3.2'>teks kamu</a></li>
    </ul>
    </li>

    </ul>
    </li>
    <li><a href='http://Link_yang_dituju'>teks kamu</a></li>
    <li><a href='http://Link_yang_dituju'>teks kamu</a></li>
    </ul>
    </div>
    </div>

Catatan :
   1. Perhatikan peletakkan kode untuk menambah dropdown menu, ditandai dengan kode berwarna hijau.
   2. Perhatikan pula peletakkan kode untuk menambah menu turunan kedua, ditandai dengan kode yang berkedap-kedip.
   3. Ganti kode yang berwarna merah dengan alamat link dan teks yang kamu inginkan.

• Jangan lupa disimpan.

Selamat membuat sub dropdown pada horizontal menu...

Sumber: Optimasi-Blog.blogspot.com

Free Template Blogger collection template Hot Deals SEO

Diposting trik blogger terdahulu saya telah menulis tentang membuat menu horizontal. Dimana pengkodeannya menggunakan CSS yang disadur dari blog Kang Rohman. Selanjutnya tinggal bagaimana trik menambahkan dropdown menu di dalam kode tersebut. Betulkan... Seandainya saya jeli mengamati kode menu horizontal tersebut, mungkin ini tidak akan menjadi sebuah posting. Ternyata ada hikmahnya juga, karena faktor ketidaktelitian tersebut he..he..he.. Kalau dropdown menunya agak kurang enak dipandang menurut penglihatan dan perasaan kamu, maka diperlukan beberapa optimasi kode CSS-nya, terutama yang memiliki atribut #nav li li. Jadi memodifikasinya terserah pada yang punya blog (ingin seperti apa dan bagaimana).

Berikut trik menambahkan dropdown menu dalam horizontal navigasi :

• Sebelumnya buat dulu horizontal menu. Silakan buka  Membuat Horizontal Menu di blog 2

• Login ke account blogger kamu.

• Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari kode HTML di bawah ini yang posisinya diantara <body> ... <body>.

    <div id='navleft'>
    <div id='nav'>
    <ul>
    <li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    </ul>
    </div>
    </div>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

• Tambah kode berikut di nav link yang kamu inginkan, letakkan sebelum </li>.

    <ul>
    <li><a href='URL sub 1'>Sub menu 1</a></li>
    <li><a href='URL sub 2'>Sub menu 2</a></li>
    <li><a href='URL sub 3'>Sub menu 3</a></li>
    </ul>

Contoh :

    <div id='navleft'>
    <div id='nav'>
    <ul>
    <li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a>
    <ul>
    <li><a href='URL sub 1'>Sub menu 1</a></li>
    <li><a href='URL sub 2'>Sub menu 2</a></li>
    <li><a href='URL sub 3'>Sub menu 3</a></li>
    </ul>
    </li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    </ul>
    </div>
    </div>

Catatan :
   1. Perhatikan peletakkan kode untuk menambah menu dropdown, ditandai dengan warna hijau.
   2. Ganti kode yang berwarna merah dengan alamat link dan teks yang kamu inginkan.

• Jangan lupa disimpan.

Tambahan : Kode CSS #nav li li yang perlu kamu optimasi adalah sebagai berikut.

#nav li li {

float: left;
margin: 0px;
padding: 0px;
width: 150px; <!-- lebar dropdown menu -->
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff; <!-- warna latar dropdown menu -->
width: 160px; <!-- lebar dropdown menu, ketika disentuh korsur/mouse -->
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff; <!-- garis tepi bawah dropdown menu -->
border-left: 1px solid #ffffff; <!-- garis tepi kiri dropdown menu -->
border-right: 1px solid #ffffff; <!-- garis tepi kanan dropdown menu -->
<!-- atau kamu bisa mengganti kode border-bottom, left, dan right dengan kode border: 1px solid #ffffff; -->
}
#nav li li a:hover, #nav li li a:active {
background: #c06000; <!-- warna latar dropdown menu , ketika disentuh korsur/mouse -->
padding: 7px 30px 7px 10px;
}

Selamat berdropdown dengan menu horizontal...

Free Template Blogger collection template Hot Deals SEO

Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header. Pada kesempatan ini, kita akan mengulas trik blogger tentang membuat menu horizontal secara sederhana. Mengapa dikatakan sederhana? Karena jika kita optimasi lebih mendalam, ternyata terdapat beberapa varian dari menu horizontal tersebut. Fungsi dari trik blogger ini adalah sebagai salah satu navigasi dalam blog agar memberikan layanan kemudahan shortcut link bagi pengunjung blog kamu.

Singkat kata, berikut langkah membuat menu horizontal dalam blog kamu :

• Login ke account blogger kamu.

• Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari Kode kode ]]></b:skin> dan Copy-Paste (copas) kode berikut di atasnya.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

    /* navbar
    ================== */

    #bg_nav {
    background: #ffffff;
    width: 850px;
    height: 29px;
    font-size: 11px;
    font-family: Arial, Tahoma, Verdana;
    color: #000000;
    font-weight: bold;
    margin: 0px auto 0px;
    padding: 0px;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #ffffff;
    overflow: hidden;
    }
    #bg_nav a, #bg_nav a:visited {
    color: #000000;
    font-size: 11px;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0px 0px 0px 3px;
    }

    #bg_nav a:hover {
    color: #000000;
    text-decoration: underline;
    padding: 0px 0px 0px 3px;
    }

    #navleft {
    width: 500px;
    float: left;
    margin: 0px;
    padding: 0px;
    }
    #navright {
    width: 220px;
    font-size: 11px;
    float: right;
    margin: 0px;
    padding: 3px 5px 0px 0px;
    }
    #navright a img {
    border: none;
    margin: 0px;
    padding: 3px 5px 0px 0px;
    }

    #nav {
    margin: 0px;
    padding: 0px;
    list-style: none;
    }
    #nav ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    }

    #nav a, #nav a:visited {
    background: #ffffff;
    color: #000000;
    display: block;
    font-weight: bold;
    margin: 0px;
    padding: 8px 15px 8px 15px;
    border-left: 1px solid #ffffff;
    }
    #nav a:hover {
    background: #c06000;
    color: #000000;
    margin: 0px;
    padding: 8px 15px 8px 15px;
    text-decoration: none;
    }

    #nav li {
    float: left;
    margin: 0px;
    padding: 0px;
    }
    #nav li li {
    float: left;
    margin: 0px;
    padding: 0px;
    width: 150px;
    }
    #nav li li a, #nav li li a:link, #nav li li a:visited {
    background: #ffffff;
    width: 160px;
    float: none;
    margin: 0px;
    padding: 7px 30px 7px 10px;
    border-bottom: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    }
    #nav li li a:hover, #nav li li a:active {
    background: #c06000;
    padding: 7px 30px 7px 10px;
    }

    #nav li ul {
    position: absolute;
    width: 10em;
    left: -999em;
    }

    #nav li:hover ul {
    left: auto;
    display: block;
    }
    #nav li:hover ul, #nav li.sfhover ul {
    left: auto;
    }

Catatan :

1. Agar menu horizontal sesuai dengan template blog, kamu perlu mengganti kode-kode yang berwarna hijau.
2. Untuk kode pewarnaan, kamu bisa melihatnya di kode warna disini---> Mengetahui Kode Warna

• Kemudian cari kembali kode seperti di bawah ini.

    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1'
    showaddelement='no'>
    <b:widget id='Header1' locked='true' title='test
    (Header)' type='Header'/>

    ... dan seterusnya ...

    </b:section>
    </div>

• Copas kode berikut tepat di bawah kode yang berwarna hijau atau berwarna kuning (sesuaikan dengan template blog kamu).

    <div id='bg_nav'>

    <div id='navleft'>
    <div id='nav'>
    <ul>
    <li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    </ul>
    </div>
    </div>

    <div id='navright'>

    <form action='http://Alamat_Blog_Kamu.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>
    </form>

    </div>

    </div><!-- akhir bg_nav -->

• Jangan lupa disimpan

Oia, baca juga postingan saya yang lama tentang Membuat Horizontal Menu


Selamat membuat menu horizontal...

Sumber: Kolom-Tutorial.blogspot.com & Optimasi-Blog.blogspot.com

Free Template Blogger collection template Hot Deals SEO

Horizontal menu adalah menu yang berguna untuk berguna untuk menunjukkan halaman lain yang ada diblog anda. Misalnya blog anda dibagi menjadi empat tema, maka widget ini selain indah juga berguna untuk menunjukkan tema-tema tersebut. Dengan widget ini maka tema-tema di blog anda akan lebih mudah dilihat oleh pengunjung dan membuat website lebih rapi dan indah.Selain itu, menu horisontal ini tidak kalah menarik untuk menjadi navigator di blog Anda karena saya kira bentuknya Menarik dan elegan.

Ini adalah gambar Horizontal menu yang akan kita buat:



atau sebagai contoh horizontal menu yang asli dan bisa di klik, kunjungilah blog ini

Nah apakah anda berminat untuk membuatnya??? baiklah ini adalah cara membuatnya:

1. login ke blogger lalu masuk menu Layout kemudian masuk menu Edit HTML

2. Lalu taruh code dibawah diatas Code ]]></b:skin> pokoknya di barisan CSS pada Blog Anda:

.menuhorisontal{
width: 100%;
overflow: hidden;
border-bottom: 1px solid #000000;
}


.menuhorisontal ul{
margin: 0;
padding: 0;
padding-left: 10px;
font: bold 12px Verdana;
list-style-type: none;
}


.menuhorisontal li{
display: inline;
margin: 0;
}


.menuhorisontal li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px;
border-right: 1px solid white;
color: white;
background: #414141; /*background dari Tabel*/
}


.menuhorisontal li a:visited{
color: white;
}


.menuhorisontal li a:hover, .menuhorisontal li.selected a{
background:#002EB8; /*Background Setelah Pointer Diarahkan */
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
height:35px;
}

3. Kalau Sudah Cari Code dibawah Ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bisnis Di Internet (Header)' type='Header'/>
</b:section>
</div>

4. Code diatas Di Blog kamu berdeda-beda pokoknya kamu perhatikan Code yang berwarna kuning saja dan taruh Code dibawah ini tepat dibawah Code Diatas itu:

<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>

5. Kemudian Simpan

6. kemudian klik Add A Gadget kemudian pilih HTML/JavaScript.. Lalu taruh Code dibawah ini:

<div class='menuhorisontal'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='http://forantum.blogspot.com'>Kumpulan Tutorial Blog</a></li>
<li><a href='url '>nama</a></li>
<li><a href='url '>nama</a></li>
</ul>
</div>

ket: nama dan url kamu ganti dengan nama dan url yang kamu inginkan

Nama : nama dari tema, misal : My Musik , My video, tutorilal blog, dll.
url : url yang dituju apabila nama di klik oleh pengunjung.

7. udah selesai lalu simpan.....

Free Template Blogger collection template Hot Deals SEO