Trick Untuk Blogger

Ayo Kawan Semua, Jangan Melamun Saja, Dengarlah Lagu Gembira, Kita berjoget bersama.....Maaa-riiiii-lah......pengantar lagu yang pernah di bawain kelompok DKI (Dono, Kasino, Indro)........langsun gan......

Hal yang paling penting dalam penerapan kode untuk beberapa tampilan Template sebaiknya memperhatikan beberapa code yang dibuat. Apalagi kita menggunakan kombinasi antara kode CSS dan JAVA, yang tentu saja akan sangat sensitif apabila kita melakukan kesalahan sedikit saja. Di sini ane akan mengajak  kalian semua membahas antara kombinasi CSS code & Javascript Code untuk Menu Navigasi. Anda tau cara membuatnya? Nih gan langkah-langkahnya......yyyyyuuuuuhhhhhhhhuuuuuuu...............

Langkah Pertama

#nav{
height:34px;
margin:0px 10px 0px 10px;
background:#ffffff;
-moz-border-radius-bottomright:10px;
-moz-border-radius-bottomleft:10px;
display:block;
padding:0px 0 0px 0px;
font: 12px Georgia,Century gothic,verdana, Arial, sans-serif;
font-weight:normal;
text-transform:uppercase;
}
.jqueryslidemenu{
font: bold 10px Verdana;
background: #000000;
width: 100%;
margin-left:5px;
}

.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: #444444; /*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;
background: -moz-linear-gradient(top, #000000, #5e5e5e);
background: -webkit-gradient(linear, center top, center bottom, from(#000), to(#5e5e5e)); }

/*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: bold 10px Verdana;
width: 170px; /*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: #414141;
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;
}

letakkan diatas ]]></b:skin>. Kode berwarna merah: menunjukkan warna background tampilan menu. Kode berwarna orange: menunjukkan warna tulisan pada navbar menu. Kode berwarna biru: menunjukkan warna block menu. Sengaja saya memasukkan warna transparan pada kode warna merah.....alasannya gue suka aja...heheheheee....kamu bisa ganti sesuai dengan warna background menu navigasi kesukaan kamu.

Langkah ke Dua copy kode di bawah ini

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'></script>
<script src='http://sites.google.com/site/kianbersama/javascript/slide.js' type='text/javascript'></script>

letakkan sebelum kode </head>

Langkah ke Tiga copy kode di bawah ini.

<div id='nav'>
<div class='jqueryslidemenu' id='myslidemenu'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='LINK-URL'>NAME</a>
<ul>
<li><a href='LINK-URL'>NAME</a></li>
<li><a href='LINK-URL'>NAME</a></li>
<li><a href='LINK-URL'>NAME</a></li>
</ul></li>
<li><a href='LINK-URL'>NAME</a>
<ul>
<li><a href='LINK-URL'>NAME</a></li>
<li><a href='LINK-URL'>NAME</a></li>
<li><a href='LINK-URL'>NAME</a></li>
</ul></li>
</ul></div></div>

Letakkan dibawah kode <div id='wrapper'> atau <div id='outer-wrapper'.

Warna hijau isi dengan alamat link atau link url 
kode berwana merah <ul> diatas menunjukkan = kondisi dimana kita akan membuat anakan link dari link utamanya.
kode yang berwarna biru (NAME) = nama url yang akan kamu pasang. 

Langkah selanjutnya pratinjau.....bila sudah sesuai keinginan anda....save template....yyyyuuuhhhuuuuu......

untuk melihat contohnya klik gambar di bawah ini.

Selamat Mencoba......jangan lupa comment ya sahabat...........