Minggu, 19 Juni 2011

Cara Membuat Menu Horizontal Pada Blog

00.24  WASPADA POS MAKASSAR  No comments


Langkah Pertama :

  • Silahkan Login ke Blogger anda
  • Cari dan pilih Design lalu Edit HTML
  • Carilah kode <head>  dan  Masukkan code script  dibawah ini dibawah code  <head>

<!--[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://sites.google.com/site/anasprod/jqueryslidemenu.js' type='text/javascript'/>


  • Lalu masukkan CSS dibawah ini diatas code  ]]></b:skin>

.jqueryslidemenu{
font: bold 13px Verdana;
background: #800000;
width:100%;
float:left
}
.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: #800000; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
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:#B30000; /*tab link background during hover state*/
color: white;
}
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
background:#B30000;
}
/*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;
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
position:relative;
}
Keterangan  :
Code diatas adalah style dari menu, silahkan edit sesuai kebutuhan dan keinginan
Langkah Ke 2
Setelah langkah – langkah diatas telah kita lakukan semua, maka selanjutnya kita akan menuju langkah berikut…>>>>>>>
Silahkan cari kode script  seperti dibawah ini : >>>>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bisnis Di Internet (Header)' type='Header'/>
</b:section>
</div>
Keterangan  : 
Cari saja kode yang berwarna merah diatas sebab  kode yang berwarna hitam diatas berbeda-beda setiap template
Setelah itu, silahkan anda COPY kode script dibawah ini kemudian PASTE  dibawah kode diatas tadi  
<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>
  • Nah….. Kalau sudah selesai …., silahkan  SAVE  dahulu.
Langkah 3
Langkah selanjutnya  setelah kita melakukan langkah-langkah sebelumnya  adalah melakukan tips terakhir karena Pekerjaan kita belum selesai, Yaa….Pokoknya ikuti aja deh….
  • Silahkan anda menuju Page Elements  atau  Rancangan
Dan setelah itu akan terlihat  pada "Page Elements" akan muncul tempat gadget baru,
  • Silahkan  klik saja "Add a gadget" dan pilih HTML/JavaScript
  • Setelah itu, masukkan kode dibawah ini kedalam gadget yang muncul tadi ………..>>>>>>

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="http://waspadaposmks.blogspot.com/">Tutorial Blogger</a></li>
<li><a href="http://waspadaposmks.blogspot.com/">Kategori</a>
<ul>
<li><a href="http://waspadaposmks.blogspot.com/">Sub Kategori 1</a></li>
<li><a href="http://waspadaposmks.blogspot.com/">Sub Kategori 2</a></li>
</ul>
</li>
<li><a href="http://waspadaposmks.blogspot.com/">Item 3</a></li>
<li><a href="http://waspadaposmks.blogspot.com/">Folder 2</a>
<ul>
<li><a href="http://waspadaposmks.blogspot.com/">Sub Item 2.1</a></li>
<li><a href="http://waspadaposmks.blogspot.com/">Folder 2.1</a>
<ul>
<li><a href="http://waspadaposmks.blogspot.com/">Sub Item 2.1.1</a></li>
<li><a href="http://waspadaposmks.blogspot.com/">Sub Item 2.1.2</a></li>
<li><a href="http://waspadaposmks.blogspot.com/">Folder 3.1.1</a>
<ul>
<li><a href="http://waspadaposmks.blogspot.com/">Sub Item 3.1.1.1</a></li>
<li><a href="http://waspadaposmks.blogspot.com/">Sub Item 3.1.1.2</a></li>
</ul>
</li>
<li><a href="http://waspadaposmks.blogspot.com/">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://waspadaposmks.blogspot.com/">Tutorial Blogger</a></li>
</ul>
<br style="clear: left" />
</div>

Keterangan :
Kode diatas adalah kode dari widgetnya silahkan di edit sesuai kebutuhan Anda.
Ganti Kode yang berwarna Biru dengan alamat URL anda.

  • Kalau sudah silahkan SAVE...
Mudah khan.....kalau mau lihat tampilannya silahkan Pratinjau dahulu ....dan kalau sudah suka dengan apa yang telah anda buat ...silahkan anda klik Simpan Template....

Posted in:

0 komentar:

Posting Komentar

 

WASPADA NUSANTARA