Cara Membuat Menu Dropdown Horizontal, dengan mudah dan unik baru 2012 dengan HTML dan Jquery tutorial yang cepat

Cara Membuat Menu Dropdown Horizontal, dengan mudah dan unik baru 2012 dengan HTML dan Jquery tutorial yang cepat




Hello, sahabat ROG....
Mau punya menu Dropdown Horizontal seperti gambar diatas, contohnya-???
Emmzzz...
Pati iyea donk.

Saya sebenarnya agak sedikit malas dengan code HTML ini yang terlalu panjang, tapi demi permintaan sahabat Rafi Orilya Groups, saya jadikan semangat.
Baiklah kalau begitu.

Demi mempersingkat artikel ini.
Langsung saja dengan tutorial dan caranya.
Untuk Sahabat ROG pasti kami berikan dengan rinci agar mudah dipahami.

Ikuti langkah-langkah dibawah ini :
Menu ini cukup panjang dan berhubungan dengan template, jadi saya sarankan untuk “Download Template Lengkap” terlebih dahulu.
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 </b:skin> dan letakkan kode berikut sebelum kode </b:skin>
.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;}
7.      Kemudian letakkan kode berikut sebelum kode </head>
<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script src='http://miscah.googlecode.com/files/jquery.min.js' type='text/javascript'/>
<script src='http://miscah.googlecode.com/files/slidemenu_horizontal.js' type='text/javascript'/>
8.      Cari kode yang mirip seperti ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Judul Blog Sobat (Header)' type='Header'/>
</b:section>
</div>

kenapa saya bilang cari yang mirip, karena setiap template mempunyai karakter yang berbeda-beda dan tulisan yang saya tandai dengan warna merah adalah judul blog sobat.
9.      Kemudian letakkan kode berikut tepat setelah kode diatas
<div class='jqueryslidemenu' id='myslidemenu'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>Daftar Isi</a></li>
<li><a href='#'>Tutorial Blog</a>
<ul>
<li><a href='#'>Sub Item 1.1</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
</ul>
</li>
<li><a href='#'>Islam</a></li>
<li><a href='#'>Folder 2</a>
<ul>
<li><a href='#'>Sub Item 2.1</a></li>
<li><a href='#'>Folder 2.1</a>
<ul>
<li><a href='#'>Sub Item 2.1.1</a></li>
<li><a href='#'>Sub Item 2.1.2</a></li>
<li><a href='#'>Folder 3.1.1</a>
<ul>
<li><a href='#'>Sub Item 3.1.1.1</a></li>
<li><a href='#'>Sub Item 3.1.1.2</a></li>
<li><a href='#'>Sub Item 3.1.1.3</a></li>
<li><a href='#'>Sub Item 3.1.1.4</a></li>
</ul>
</li>
<li><a href='#'>Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='http://rafi-orilya.blogspot.com’>Link Exchange</a></li>
</ul>
<br style='clear: left'/>
</div>
  1. Setelah itu Simpan Template sobat.
Keterangan :
Perhatikan code <li><a href='#'>Sub Item 3.1.1.4</a></li>
Ganti karakter # dengan alamat yang anda ingin tuju.
Ganti Sub Item 3.1.1.4 dengan nama yang anda inginkan.
Contoh :
<li><a href='http://rafi-orilya.blogspot.com '> ROG Home</a></li>

Bagaimana-???? Sudah cukup Jelas-????
Hehehehe..........

Kalau masih bingung komentar yeah.

(Artikel Dilindungi)
Sertakan alamat blog ini jika mengcopy paste
Hak Cipta Dilindungi




Terima Kasih
Rafi Orilya Groups
by Rafi Aldiansyah Asikin

20 komentar

  1. ko ada pesan

    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The value of attribute "href" associated with an element type "null" must not contain the '<' character.
    Error 500

    maaf gan ane lagi pusing ngeliat kode scripnya, bisa dibantu ngga. kalo udah kasih tau diblog ane gan :) pisss.

    BalasHapus
  2. Ulangi dari langkah awal dulu..
    Tinggal di COPY aja... terus untuk cari code agar cepat tekan CTRL+F
    nah.. masukin code yg dicari

    okee... insyaallah...

    BalasHapus
  3. kalo kode yang mirip tu

    ndak ketemu n ndak ada yang mirip gmna ya???

    BalasHapus
  4. gini aja gan, biar kode yang mirip itu ketemu. pake CTRL+F terus masukkin nama Blog Agan, klik ENTER2 terus. sampe kelihatan yang bertuliskan "header" ato yang mirip2 gituh.coba deh

    BalasHapus
  5. CUKUP BAGUS ARTIKELNYA


    http://atribut-paskibraka.blogspot.com/

    BalasHapus
  6. gagal error mulu... yang lu kenapa bisa bikin menu dropdown.. contoh URL klo yg untuk dropdown gmna soalnya gak ngerti url nya

    BalasHapus
  7. Maksudnya URL apa mas-??
    Pertama cuma pasang CSS, terus dibawahnya cuma dikasi Javascript pemanggil-yg bisa jadi Menu Dropdown

    BalasHapus
  8. Nice gan :-)
    Kunjungan balik ya :-)
    www.oktober1992.blogspot.com

    BalasHapus
  9. Thank's gaan.. :)
    yooo pasti...
    ditunggu kunjungan baliknya

    BalasHapus
  10. Gan semua resep yang anda sebutkan sudah saya masukkan tapi muncul lagi kata Error lalu muncul yang kayak gini nih
    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    nutupnya ini codenya apa, soalnya aku gaptek soal kode beginian, kalo code harus segera makan sih aku kenal banget. tolong dijelaskan ya dan untuk memastikan yang masih kebuka tu gimana.
    blog sampean keren habis dengan jiwa patriotisme. salam kenal, teruskan perjuangan dan Merdeka !

    BalasHapus
  11. hmmm.... mungkin ada sebagian tag yg hilang-
    coba perhatikan dengan seksama contoh => < a href=".......">XXX< / a>
    Jangan sampai petik " yg depan/belakang itu hilang. karena bisa well-formed

    BalasHapus
  12. terimakasih infonya , mampir juga ya ke http://cyberbusinessinstitute.com/ pas banget buat yang mau belajar tentang pemograman

    BalasHapus
  13. artikel menarik gan,kunjungan baliknya
    www.mbahgahol.blogspot.com
    follow aja nnti saya followbalik blog agan

    BalasHapus
  14. gan ....saya mengikuti semua tutorial yang anda buat tapi drop down di klik yang bawah kok kembali tolong lihat dan kasih sarannya .....dimana letak kesalahan saya
    http://agennasamalang.blogspot.com

    BalasHapus
    Balasan
    1. coba diulang langkahnya bang mungkin ada yang kelewat.. :)

      Hapus
  15. keren bang, banyak modelnya hehe

    BalasHapus
  16. Keren menu dropdownnya, ane terapin dulu ye di blog hahaha

    BalasHapus

Komentar anda sangat dibutuhkan bagi kemajuan kami untuk terus berkarya.
Diharapkan :
* Berkomentarlah dengan bahasa yang baik
* Tidak ada unsur SARA, SPAM, PORNO
* Tidak merugikan orang lain
* Menunjukkan identitas yang jelas bukan Anonim

Diperkenankan :
* Komentar promosi link web anda
* Kritik & Saran

[Protected] by DMCA Protection Pro™
EmoticonEmoticon