Cara Membuat Menu Horizontal di Blogspot

Bagaimana Cara Membuat Menu Horizontal di blogspot seperti menu kolom Home, About, Contact and Other secara horizontal, banyak jenis menu horizontal yang bisa divariasikan, seperti dengan dropdown CSS ,multi level jquery ,anvigasi slide dan dengan html jquery.

tapi kali ini akan diberikan tutorial bagaimana Cara Membuat Menu Horizontal pada Blogspot, berikut caranya :

-Login ke blogger.com, lalu pilih design .

-Pilih Edit HTML, download full template untuk menghindari terjadinya kesalahan pada saat terjadinya Error
  jadi Anda bisa mengembalikan lagi bentuk template  seperti semula.

-Lalu Klik kotak expand template widget pada template Anda, dan cari kode: </b:skin>

Hapus kode tersebut dan ganti dengan kode:

</b:skin><style type='text/css'>.pagemenu-container #pagemenu{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:#000 repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase}.pagemenu-container #pagemenu ul{margin:0;5px;0px;5px;padding:0;border:1px solid $bordercolor;list-style-type:none;width:860px}.pagemenu-container #pagemenu ul li{display:block;float:left;margin:0 1px 0 0}.pagemenu-container #pagemenu ul li a{display:block;float:left;color:#fbdafa;text-decoration:none;padding:10px 18px 0 18px;height:28px}.pageme nu-container #pagemenu ul li a:hover,.pagemenu-container #pagemenu ul li a.current{color:#fff;background:#306 no-repeat top center}</style>

Kemudian silahkan Anda cari kode: <div id='content-wrapper'>

Lalu silahkan dihapus dan diganti dengan:

<div class='pagemenu-container'> <div id='pagemenu'> <ul> <li class='page_item home'><a href='http://tutorialplan.blogspot.com//' title='Home'>Home</a></li> <li class='page_item page-item-2'><a href='http://tutorialplan.blogspot.com//l' title='About'>About</a></li> <li class='page_item page-item-3'><a href='http://tutorialplan.blogspot.com//profile/16474552668039271355' title='Contact Us'>Contact</a></li><li class='page_item page-item-4'><a href='http://tutorialplan.blogspot.com//2011/10/daftar-isi.html' title='Daftar Isi'>Daftar Isi</a></li><li class='page_item page-item-5'><a href='http://tutorialplan.blogspot.com//2012/12/belajar-blog-l.html' title='Belajar Blog'>Blog</a></li></ul></div> </div> <div id='content-wrapper'>

Keterangan:

Kode background: #000 : warna latar belakang dari menu horizontal, #000 adalah kode warna hitam, Kode tersebut dapat Anda ganti sesuai dengan keinginan Anda misalkan untuk kode warna  Biru, kodenya adalah #0C36F5.

Kode width:860px : panjang horizontal menu nya, silakan samakan dengan panjang pada kode #header-wrapper atau panjang #outer-wrapper blog Anda.

Kode {color:#fff;background:#306 no-repeat top center} : warna text dan warna background pada saat disorot dengan pointer mouse.

Untuk diingat bahwa url link http://tutorialplan.blogspot.com diganti dengan Blog kepunyaan Anda .

Selamat mencoba........

Share this post