Artikel Yang Paling Populer

Thursday, June 11, 2009

Cara Membuat Horizontal Navigasi pada Blog

| Thursday, June 11, 2009 | 27 comments

Untuk mengatur penampilan blog anda, bisa anda pasangkan Horizontal tab navigasi pada header.Dengan tab navigasi ini anda bisa meletakkan menu-menu yang mengarah kehalaman lain pada blog anda dan memudahkan para pembaca membuka halaman lain tersebut.
Kontes SEO Aristia Wida Rukmi
Tab navigasi ini akan ditempatkan pada bagian atas atas blog yaitu pada header.Seperti yang anda lihat pada blog ini, ada beberapa tap menu yang saya pasang seperti Tutorial Blog, Islam, dan Tukar Link.Menu yang dipasang tergantung pada keinginan anda.Cara membuatnya adalah sebagai berikut.
1.Login pada Blogger.
2.Klik Layout pada Dashboard anda.
3.Pada Layout klik Edit HTML .
4.Untuk menghindari hal-hal yang tidak dinginkan saat akan mengedit template HTML anda, lakukan backup terlebih dahulu dengan mengklik
5.Temukan kode </b:skin>
6.Letakkan kode dibawah ini sebelum kode </b:skin>


/* ----- LINKBAR ----- */
#bg_nav {
background: #000;
width: 960px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #333;
border-bottom: 1px solid #000;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #FFF;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#bg_nav a:hover {
color: #FFF;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}
#navleft {
width: 720px;
float: left;
margin: 0px;
padding: 0px;
}

#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}

#navright a img {
border: none;
margin: 0px;
padding: 0px;
}


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

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

#nav a, #nav a:visited {
background: #222;
color: #FFF;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px;
border-left: 1px solid #000;
}

#nav a:hover {
background: #6e6d6d;
color: #FFFFFF;
margin: 0px;
padding: 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: #333;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#nav li li a:hover, #nav li li a:active {
background: #666;
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;
}

7.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>


8.Letakkan kode dibawah ini dibawah kode diatas pada (langkah 7)


<div id='bg_nav'>
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='
http://marchsya.blogspot.com


'>Home</a></li>
<li><a href='
http://marchsya.blogspot.com/search/label/Tutorial%20Blog'>Tutorial
Blog</a></li>
<li><a href='
http://marchsya.blogspot.com/search/label/Islam'>Islam</a></li>
<li><a href='
http://marchsya.blogspot.com/search?max-results=900’>
Daftar Isi</a></li>
<li><a href='
http://marchsya.blogspot.com/2009/05/manfaat-tukar-link-sesama-blog.html'>Tukar
Link</a></li>
<li><a href='
http://marchsya.blogspot.com/2009/05/donwload-ebook-internet-marketing.html'>Download
Ebook</a></li>
</ul>
</div>
</div>
</div>


 


9.Gantilah link yang berwarna merah dengan link dari blog anda.
10.Selanjutnya Save.
Jreng....tab navigasi menu sudah muncul pada header anda.Untuk mengganti warna background agar sesuai dengan warna template blog anda, robahlah pada background: #000 .Ganti #000 dengan kode warna yang lain.Kode-kode warna HTML dapat anda lihat disini kode warna HTML.
Semoga Tutorial Blog ini bermanfaat.Postingan asli dari sini

27 comments:

mareas nami sipayung said...

nice....ijin copy ya....
jangan lupa ikutan blog kontesnya
silahkn kunjungi blog saya :D

Pet Green Land Savana said...

bis gini mau coba ahhhhh.....

ice cream said...

thanks ya buat "saran"nya

franky said...

@mareas nami sipayung, silakan copy
@pet Green Land Savana, silakan..
@ice cream, sama2 terima kasihnya

wisata riau said...

wah... keyeeen sobt.... trims banget infonya......
wisata riau

Kang Yudiono said...

Nice info. Btw, tips ini bisa digunakan di wordpress berbayar gak ya?

franky said...

@kang Yudiono, saya belum pernah coba.Tapi kelihatannya nggak bisa,dicoba saja neh..

escampur88 said...

maksih mas franki ilmunya..
tapi escampur88 lagi nyari navigasi horizontal yang bisa turun kebawah gitu..bisa tunjukin ngak caranya...???

Meryl (proud pinay) said...

keep on sharing.have a happy weekend.

Bachabe said...

tank mas info nya http://abbegrt.blogspot.com

franky said...

@es campur, nanti pada postingan berikutnya.
@Bachabe, sama2

dhonyz said...

thanks.... tinggal nyontek neh

oLd sKuLL Mp3 said...

mas qo saya dah masukin kodenya tuw tapi qo ga bisa malah muncul tulisan:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The value of attribute "href" associated with an element type "null" must not contain the '<' character.

maksudnya apa?maklum pemula.hehehe

franky said...

@dhonyz, sama-sama.
@oLd sKuLL Mp3, kemungkinan anda salah copy.dan juga saat mengganti link yang berwarna merah ada atribut < atau >.Ikuti saja linknya jangan dimodifikasi

orenteam said...

thank you mas tutorialnya bagus sekali mas

Cah-Pati said...

wah boleh dicoba

thanks infone

Franky said...

@orenteam & cah-pati,terima kasih kembali.Silakan dicoba

barokah said...

wah oke nih
tapi kalo ganti warna backgroundnya angkanya 3 atau 6 soalnya di kode warna ada 6 angkaa

Anonymous said...

tutorialnya eror.........!!!!!!!!!!!!!!!!!

hielmy said...

aha... nice tutorial!

petis indonesia said...

arigatou yo

pratama said...

please visit my blog " digitalcamera-hobby.blogspot.com

Arie'' said...

trimakasih, info dan blog yang menarik..!

http://trojandecoder.blogspot.com/

petrus said...

huwaaaaaaaaa......sip Gannnnn......tapi aku nyoba kagak bisa2 ya.........

godagado said...

kodenya ga bisa di pakai di blogger...minta di parse kodenya..coba diparse dulu baru di copas di htmlnya ...coba disini http://www.blogcrowds.com/resources/parse_html.php

widad collection said...

huaaaaa..... :(( g bisa..udah copas sesuai yg ada,tp g bisa..mohon petunjuknya..

Anonymous said...

Cara ngisi tulisan ato artikel di tiap tab gmn ya? Bingung maaf anak baru..mksh

:)) ;)) ;;) :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