Membuat Horizontal Menu 2 Baris

Posted by

Membuat Horizontal Menu 2 Baris- Akhir-akhir ini saya lebis sering mengedit template dari pada membuat artikel-artikel baru.. Yaa.. memang habis ganti template.. Yang paling saya serius mengeditnya adalah Horizontal Menunya. Maklum
Simple Fresh ini memiliki Horizontal menu yang sangat simple. Jadi tidak banyak sesuatu yang bisa saya kasih link dan di tampilkan di Horizontal menu. Nah dengan menggunakan horizontal menu ini saya bisa menaruh
agak banyak link di horizontal menu saya. Lagiian horizontal menu ini mempunyai style yang bagus.
Apalagi saya telah menambahkan Efek Hover yang menarik dari sumbernya

*Gambar yang di ambil dari Horizontal Menu Ajinoor


Widget ini cocok buat blog yang ingin menampilkan banyak link dibagian bawah header. Sudah Banyak Yang Coba lho...
Tertarik ?? Silahkan coba...
Cara Pembuatan Horizontal Menu 2 Baris

  1. Login ke blogger.
  2. Masuk ke Tata letak.
  3. Klik Edit HTML.
  4. Sebaiknya backup template sobat terlebih dahulu.
  5. Letakkan kode berikut sebelum kode ]]></b:skin>
/*-- Nav --*/

#nav {
width:960px;
float:left;
background:#CCDEE8;
height:33px;
border-bottom:1px solid #fff;
padding:0;
}



#nav-left {
float:left;
display:inline;
width:700px;
}



#nav-right {
float:right;
display:inline;
width:200px;
}



#nav ul {
position:relative;
overflow:hidden;
font:1em verdana,Helvetica,sans-serif;
font-weight:700;
font-size:13px;
margin:0;
padding:0;
}



#nav ul li a,#nav ul li a:visited {
display:block;
color:#000000;
text-decoration:none;
margin:0;
padding:9px 10px;
}



#nav ul li a:hover {
color:#ffffff;
background-color:#4C77B6;
margin:0;
padding:9px 10px;
text-transform: uppercase;

font-size: 15px;
font-style:italic;
}



#search {
background:#f9f9f9 url(http://lh3.ggpht.com/_7Y9pl24WpQY/SttgbS-ClLI/AAAAAAAAB78/PFI3z4AHOyw/search_thumb%5B1%5D.gif) 6px 0 no-repeat;
border:1px solid #b3b3b3;
float:right;
height:20px;
width:160px;
margin-top:5px;
margin-right:5px;
padding-top:2px;
}



* html #search {
margin-right:5px;
}



#search input {
font-family:Arial,Helvetica,sans-serif;
background:transparent;
border:0;
color:#000;
float:left;
font-size:12px;
width:120px;
padding-left:27px;
margin:0;
}



/*-- Nav2 --*/

#nav2 {
float:left;
display:inline;
width:960px;
background:#4C77B6;
height:30px;
clear:both;
margin:0 auto;
padding:0;
}



#nav2 ul {
position:relative;
overflow:hidden;
font:1em Verdana,Arial,Helvetica,sans-serif;
font-weight:500;
margin:0;
padding:0;
}



#nav2 ul li a,#nav2 ul li a:visited {
display:block;
color:#fff;
text-decoration:none;
margin:0;
padding:8px 10px;
}



#nav2 ul li a:hover {
color:maroon;
background-color:#fff;
text-transform: uppercase;
font-weight: bolder;
font-family:chiller;
font-size: 15px;
font-style:italic;
margin:0;
padding:8px 10px;-moz-box-shadow: 0 0 13px;
}



#nav ul li,#nav2 ul li {
float:left;
list-style:none;
}

6.  Kemudian cari kode yang mirip seperti dibawah ini :
 

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








*Mungkin Sebagian Template Berbeda-beda
 

Kalau kesulitan cari dari  <div id='header-wrapper'> dan mungkin sebagian template agak panjang, cari sampai ketemu kode  </b:section> </div>



7.  Letakkan kode berikut tepat setelah kode diatas :
<div id='nav'>  
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList10' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'> 
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML70' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search/' id='searchform' method='get' style='display:inline;'>
<div id='search'>
<input id='search' maxlength='150' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' type='text' value='Search...'/>
<data:content/>
</div>
</form>
</div>
</b:includable>
</b:widget>
</b:section> 
</div>

<div id='nav2'>
<b:section class='top-tabs' id='top-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList11' locked='true' title='link Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav2'> 
<ul>
<li><a href='http://http//ajinoor.blogspot.com/2008/02/contact-me.html'>Contact Me</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
</b:section> 
</div>


*Bila template anda sudah ada horizontal menunya gamti saja kode itu


  • 9.  Simpan Template.

    Terimakasih saya kepada Source  dan Membuat Horizontal Menu 2 Baris ini saya atur sedikit htmlnya









  • Carel
    FOLLOW and JOIN to Get Update!

    Social Media Widget SM Widgets




    Demo Blog NJW V2 Updated at: 2:33 PM

    18 Komentar:

    1. keren Sob ^^

      mampir ,ada post baru

      ReplyDelete
    2. Baguuss infonya....

      Aku Coba yah..

      ReplyDelete
    3. terima kasih atas tutornya, kebetuLan haL ini yang sedang saya cari.
      ijin menjadi foLLower di bLog ini, saLam kenaL.

      ReplyDelete
    4. keren gan.. tapi kayaknya blog gw belum perlu menu horizontal tambahan.. izin save dulu ya.. ;) btw dah gw follow gan.. thx

      ReplyDelete
    5. tutor widgetnya keren sob, terima kasih atas sharenya. saLam sukses seLaLu.

      ReplyDelete
    6. trimksih sekali, dari kemarin kurang kalo cuma satu baris..

      ReplyDelete
    7. I was recommеnded this ωeb ѕite by my cousin.
      I'm not sure whether this post is written by him as no one else know such detailed about my difficulty. You are incredible! Thanks!

      My blog post ... sarallabel.com

      ReplyDelete
    8. If some one ωants to bе updated
      wіth mοst reсent tеchnologiеs thereforе
      he must be go to sеe this site and be up tο date daily.


      my web page ... cash cars for sale in atlanta

      ReplyDelete
    9. hey therе and thank you for уour informatіon – I've definitely picked up something new from right here. I did however expertise some technical points using this website, since I experienced to reload the website many times previous to I could get it to load properly. I had been wondering if your web host is OK? Not that I am complaining, but sluggish loading instances times will often affect your placement in google and could damage your high quality score if ads and marketing with Adwords. Well I am adding this RSS to my e-mail and could look out for much more of your respective interesting content. Ensure that you update this again very soon.

      Stop by my site :: wanted cars for cash (132.252.182.11)

      ReplyDelete
    10. I'm gone to tell my little brother, that he should also visit this webpage on regular basis to take updated from newest gossip.

      Also visit my web site ... how to determine the value of a car

      ReplyDelete
    11. Ι loved as much as уou ωill
      гeceive caгried out гight here.
      The sketch iѕ tаsteful, youг authoreԁ mаteгiаl stylish.

      nonethеlеsѕ, you command get got an imρatіence over that you wish be delivеring the
      following. unwell unquestiοnably come furtheг formегly again ѕince exactly the same neагlу νery oftеn
      insіde case уοu shielԁ thіѕ hike.


      Ηere іs mу hоmepage ... caгs scrapρed foг cаѕh (www.katzen-lexikon.de)

      ReplyDelete
    12. Hey there just wanted to give you a quicκ heads up.
      The wοrԁs in your artiсle seem tо bе running off the scrеen in Fігefoх.
      Ι'm not sure if this is a format issue or something to do with internet browser compatibility but I thought I'd post to let you knоw.

      The layοut look great thоugh! Нoре
      you gеt the issue fіxed soon. Cheerѕ

      Stоp by my web blοg; caѕh for cars adelaide *destinysphere.de*

      ReplyDelete
    13. Wow, this piece of writing is pleasant, my younger sister is
      analyzing these kinds of things, therefore I am going to convey her.



      Feel free to visit my site ... price value of a car

      ReplyDelete
    14. It is apρгopгiаtе time to make some plans for thе futuгe anԁ it's time to be happy. I have read this post and if I could I desire to suggest you few interesting things or tips. Perhaps you can write next articles referring to this article. I wish to read more things about it!

      my blog post; cash for scrap cars london ()

      ReplyDelete
    15. It's the best time to make some plans for the future and it's time
      to be happy. I've read this post and if I could I wish to suggest you few interesting things or advice. Perhaps you could write next articles referring to this article. I desire to read even more things about it!

      Here is my weblog ... buying cars for cash

      ReplyDelete
    16. I havе rеаd so many contеnt abоut
      the blogger loѵers but thiѕ piеcе
      of ωriting is in faсt a nіce ρost, keep
      it up.

      my pagе ... cash for carѕ oгange county ()

      ReplyDelete
    17. Ahaa, its niсe dialоgue on the topic of this ρіece of writing hеre at
      this weblοg, I have read all that, so at thiѕ time me also сommenting аt thіs
      place.

      My blog poѕt; scrap cars for cash

      ReplyDelete

    SUARAKAN SUARAMU