Artikel Yang Paling Populer

Saturday, June 20, 2009

Cara Membuat Horizontal Multi Level Drop Down Sub pada Blog

| Saturday, June 20, 2009 | 59 comments

tutorial blog, blog islam, cara, membuat, aristia wida rukmi

Pada Tutorial Blog yang lalu sudah diposting cara membuat horizontal navigasi pada blog.Pada Tutorial blog kali ini adalah tentang Menu Horizontal Multi Level Drop Down Sub.Mungkin beberapa blog sudah membahas cara membuatnya,namun tidak ada salahnya saya memposting tutorial blog ini lagi karena atas permintaan beberapa blog pemula yang ingin memasang Menu Horizontal Multi Level Drop Down Sub. Pada dasarnya sama saja hanya Menu Horizontal Multi Level Drop Down Sub setiap main menu masih terdiri dari beberapa sub menu.Jadi untuk menavigasi menu-menu pada blog anda akan sangat mudah bagi para pembaca.Cara membuatnya adalah sebagai berikut.
1.Login pada Blogger.
2.Klik pada Layout pada Dashboard.
3.Pada Layout klik Edit HTML .
4.Temukan kode </b:skin>
5.Letakkan kode dibawah ini sebelum kode </b:skin> tersebut

.jqueryslidemenu{
font: bold 12px Verdana;
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;
}

6.Temukan kode berikut </head>
7.Letakkan kode dibawah ini sebelum kode </head> tersebut.

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src=' http://h1.ripway.com/anshul555/slidemenu_horiz.js ' type='text/javascript'/>

8.Selanjutnya temukan kode dibawah ini

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

9.Letakkan kode dibawah ini setelah kode tersebut pada langkah 8.

<div class='jqueryslidemenu' id='myslidemenu'>
<ul>
<li><a href='http:marchsya.blogspot.com'>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>
<li><a href='#'>Sub Item 1.4</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>
<li><a href='#'>Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href='#'>Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='http://marchsya.blogspot.com'>Tukar Link</a></li>
</ul>
<br style='clear: left'/>
</div>

8.Setelah itu Save.
Anda dapat mengganti kata Home, Daftar isi, Tutorial Blog, Islam,Tukar Link dan beberapa submenu dengan nama menu yang anda inginkan sebagai navigasi blog.Selamat mencoba
Sumber disini

Marchsya Blog@2009

59 comments:

Henny Y.Caprestya said...

ehem..dicoba dulu, baru komen lagi

franky said...

@Silakan mbak Henny, bisa beri koment kalau sudah dicoba atau ada masalah

blogodolar said...

Wah...mantap sekarang tampilan blognya. Semoga SEO-friendly ya =))

Yep said...

Keren nih..tapi hanya untuk blogspot ya ? untuk wp gimana ya ?
Thanks

franky said...

@Yep, ini khusus blogspot.kalau untuk WP belum ketemu tuh caranya.

wa_0ne said...

tnhks bgt sob info na...
mantap!!8-}

franky said...

@wa_one, sama-sama kawan

MINE-BLOG said...

Trims... tutorial menu horizontalnya dah saya pasang di blog

franky said...

@mine-blog, sama-sama sobat

Bambang Purwanto said...

cara yang bagus, trimakasih tutor nya, udah aku pasang di blog ku

Franky said...

@bambang, terima kasih kembali mantap blognya

Franky said...

@bambang, terima kasih kembali mantap blognya

Contrasepsi.Com said...

@makasih...blog nya ciamik
terima kasih ya tutornya




diswanto said...

waduh saya mah tulalit bingung euy tolong donk maklum newbie......hehehe

nada said...

keren bang infonya
thanks

ganool said...

setelah dicoba ternyata susah juga..

kang hairud said...

manfaat banget prends, Mator Thank U n Lam Knal

Anonymous said...

bagus..apalagi adminnya langsung respon..jadi kalo ada yang gak ngerti bisa langsung diajarin..
kalo yang lain.adminnya lemot..
ok..tengs

Stevan_Palpialy said...

Thnx bgt bro.....mantap postnya.....membagi ilmu itu terpuji....

Stevan_Palpialy said...

Mau nanya knp ga bisa dipilih sub menunya itu, dah pilih menunya, dah keluar sub menunya, tapi waktu mau dipilih sub menunya itu malah hilang gitu..???

Stevan_Palpialy said...

Tulisan submenunya itu di belakang Body blog, makanya ketutup, mau di depan body blog gimn..??

NABILAH JENONG said...

Alhamdulillaah..
Terima KAsih atas Petunjuknya Sobatku.
Ini Benar-benar sangat Bermanfaat Buat saya.
Saya sudah Coba di Blog saya dan berhasil.
Sekali Lagi..
terima KAsih Banyak.
semoga ini menjadi Amal Sholeh
Amiin.

s. wahyudi said...

mampir boss, saya butuh pencerahan tentang pembuatan menu horizontal multilevel dropdown ini n makasih penjelasannya telah membantu saya

BISNIS ATEP said...

berhasil sih kotak2 nya ada tapi pas diklik'maaf halaman yg anda tuju tidak ada

be friendly said...

thanks brother buat infonya ..

drhyudi said...

kalo mau naruh menu2 tsb di bawah judul blog gimana caranya bos. mohon pencerahannya

Nex said...

w mo nanya ne ??

Sub Item 1.1 dst
fungsinya untuk apa tu???

http://isiflashdisk.blogspot.com

putri candramidi said...

blog walking,,,,look seo magic n lowongan kerja semua bidang>>>>>>visit my blog

Creation New Thunder ( CNT ) said...

saya mau ikut-ikutan buat menu ini tapi kenapa code

yang langkah 8 (header-wrapper itu)

tak ada di edit HTML saya.
maaf saya baru belajar dan ini otodidak.
tolong beri tau saya solusinya yah.thanks

Rusty Adhie said...

saya sudah coba tapi tidak ada sub menunya padahal saya sudah test HTML nya

hendra said...

thanks ya... blog sy sdh ada kemjuan.. hehehe
izin linknya sy psang d blog sya ya. krna blogx bgus...

filemmove said...

mau tau cara lain memposting lewat email ne di link ini :

http://www.cukuhnau.co.cc/2011/01/cara-membuat-submenu-di-blogger.html

Link lainnya :

http://www.cukuhnau.co.cc/2011/01/cara-memposting-artikel-via-email.html
http://www.cukuhnau.co.cc/2011/01/penggunaan-efek-marque-untuk-image.html
http://www.cukuhnau.co.cc/2011/01/cara-membuat-effect-snow-atau-tabur.html
http://www.cukuhnau.co.cc/2011/01/cara-mudah-terindeks-google.html

filemmove said...

mau tau cara lain memposting lewat email ne di link ini :

http://www.cukuhnau.co.cc/2011/01/cara-membuat-submenu-di-blogger.html

Link lainnya :

http://www.cukuhnau.co.cc/2011/01/cara-memposting-artikel-via-email.html
http://www.cukuhnau.co.cc/2011/01/penggunaan-efek-marque-untuk-image.html
http://www.cukuhnau.co.cc/2011/01/cara-membuat-effect-snow-atau-tabur.html
http://www.cukuhnau.co.cc/2011/01/cara-mudah-terindeks-google.html

Mas Yul said...

Lho aku kok ga bisa nemuin head ya....?

Curug21 said...

Gan tolong dibantu dong kita ga bisa nemuin dicara yang ke 8.nhun

Kresna Kepakisan said...

mas,saya nyari kode ini yg di no 8 itu ga ketemu2 dari kmaren.
dimana sih tempatnya????
plis bntuanya.
snang saya bisa mmpir ksini. sukses slalu buat agan.

jasa penerjemah di jakarta said...

sob saya awam ne. kode ini bisa diterpkan di wordpress ga? mohon petunjuk please....

taufan said...

sip han thanks buat infonya ya gan.. :D

Asmara Susanto said...

ane k TKP

Anonymous said...

terima kasih..penerangan yang kurang jelas..jadi kod 8 dan 9 nak letak d mn? sebelum apa?

Juragan Pulsa said...

mas, saya udah coba panduan dari mas. menu nya sudah jadi. tapi saya bingung bagaimana cara mengisi menu yang kita buat tadi mas...?? yang saya buat skrng hanya menu nya aja mas, kalau di klik menu nya isi nya g ada mas... tolong di bantu y mas.. Terima kasih.

eL-Vickry said...

kalo cara ngasih 'Search Box' di sisi kanan menu kayak punya kamu gimana shob?

SDN TAMBAKBAYAN said...

udah tak cba, tpi klo diarahkan ke drop terakhir koq langsung ngilang..? kyaknya yg krang apanya ya...??

18corporation said...

gmna cra ngisi menunya?

avre said...

gmn gan cara ngisi menunya?? q udah bisa bikinnya tapi cara ngisix gak tau,.
mohon pencerahannya,.

SEONEGA said...

gmna cara ngubah warnanya?

ricko irmawan said...

makasih,,, sangat bermanfaat,,,,

ricko irmawan said...

makasih,,, sangat bermanfaat,,,,

Shan GrafiKom said...

jiah... pas dicoba kok knp lari ke ripway.com dengan sendirinya? ane yg parno atau kompi ane yg cinta banget ama ripway.com? pas dibuang ripway.com nya tak ada efek yg bisa ditampilkan dari kode2 yang telah dimasukkan? bisa dijelaskan?

Bayu Abdi said...

;) :)
terimakasih yahh,,,
sangat bermanfaat kok,,,
oh yah supaya bisa ditengah tuh tutornya gimana?
kayak punya kamu itu lohh,
karena punya saya jadinya di pinggir.

Duo Engineer said...

Kok saya sesudah nge-save ,kok lsg dilink-kan ke ripway.com, knp ya?
saya preiview jg lsg masuk link ripway.com

Duo Engineer said...

Kemudian saya sin out dari blogger.com, trs coba buka blog saya, tetep sj masuk ke ripway.com
Please advise!

Yudha Panindra said...

blog jadi ga bisa di buka ni... arggggggggggghh

Ayunastiti14 said...

kok gak ada kode ini ya..
mohon dijawab

Faisal Alamsyah said...

Kok malah ngalih ke situs lain sih jadinya ??????

Anonymous said...

tidak blog saya jadi gabisa kebuka

Kurama Subs said...

aneh nih
kenapa ada tulisan The element type "div" must be terminated by the matching end-tag "".

bromokusumo achmad said...

thanks

alitronik said...

gan ko punyaku gatot gagal total padahal udah ngikuti langkah'' nya ko punyaku kalo di buka malah muncull web http://h1.ripway.com/
punyaku gak bisa di buka mohon jamunya gan

:P::P

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

Followers

 
© Copyright 2010. yourblogname.com . All rights reserved | yourblogname.com is proudly powered by Blogger.com | Template by o-om.com - zoomtemplate.com