Cara Mudah Dapat Uang di Internet Lewat Blog, Twitter, Facebook
» » Cara buat Vertikal Side Bar Menu di Blog

Cara buat Vertikal Side Bar Menu di Blog


vertical sidebar menuDua hari yang lalu kita pelajari cara mudah untuk membuat drop down menu horisontal dengan tingkat multi dan hari ini kita akan menggunakan script yang sama persis dan coding untuk membuat menu vertikal sidebar yang dapat dipasang dalam sidebar blog. Kami akan kembali menggunakan beberapa efek CSS3 lezat dikombinasikan dengan fungsi JavaScript (untuk efek slide yang halus) untuk menyusun menu yang mungkin sesuai dan berbaur berbagai latar belakang blog. Ini akan membantu Anda lebih mengatur blog Anda label atau kategori sehingga memberikan pengunjung dengan navigasi yang lebih baik dan mudah. Langkah-langkah instalasi seperti biasa tetap sangat sederhana.

Berikut petunjuk penggunaannya :
  • Masuk ke Akun Blog Anda
  • Lalu masuk ke menu Layout (tata letak) >> lalu tambah Gadget >> Pilih HTML/Javascript, masukkan kode dibawah ini :
<script src='http://mybloggertricks.googlecode.com/files/dropdownddlevel.js' type='text/javascript'></script>
<style>
/* ######### Sidebar Menu by www.MyBloggerTricks.com ######### */
.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}
.ddsubmenustyle ul{
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}
.ddsubmenustyle li a{
display: block;
width: 170px; /*width of menu (not including side paddings)*/
color: #000000;
background-color: #FFFFE0;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid black;
}
* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}
.ddsubmenustyle li a:hover{
background-color: #000000;
color: #ffffff;
}
.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}
.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}
.ddiframeshim{
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}

/* ######### Vertical Menu ######### */
.markermenu{
width: 175px; /*width of side bar menu*/
clear: left;
position: relative;
}
.markermenu ul{
list-style-type: none;
margin: 5px 0;
padding: 0;
border: 1px solid #9A9A9A;
}
.markermenu ul li a{
background: #F2F2F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9d2xSClBGcYrD5ikJWVud64Qr6fEU0zq7CeCP43qJIDp9ThXL7NS8_ulak84HDHKVmIlfiAv9R4wdLtJgx-aZPnjkA-Vmr3Gue7dnfNk0Pq1dESpY2RvfaCup2fhUwMhfz9IfyjA_P0I/s400/bulletlist.gif) no-repeat 3px center;
font: bold 13px "Lucida Grande", "Trebuchet MS" ;color: #00014e;
display: block;
width: auto;
padding: 3px 0;
padding-left: 20px;
text-decoration: none;
border-bottom: 1px solid #B5B5B5;
}
* html .markermenu ul li a{ /*IE6 hack*/
width: 155px;
}
.markermenu ul li a:visited, .markermenu ul li a:active{
color: #00014e;
}
.markermenu ul li a:hover, .markermenu ul li a.selected{
color: #ffffff;
background-color: #000000;
}

</style>
<div id="ddsidemenubar" class="markermenu">
<ul> <li><a href="#">LINK1</a></li> <li><a href="#" rel="ddsubmenuside1">LINK2</a></li> <li><a href="#" rel="ddsubmenuside2">LINK3</a></li> <li><a href="#">Link4</a></li> <li><a href="#" rel="ddsubmenuside3">LINK5</a></li> </ul> </div>
<script type="text/javascript">
ddlevelsmenu.setup("ddsidemenubar", "sidebar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>
<ul id="ddsubmenuside1" class="ddsubmenustyle blackwhite">
<li><a href='#'>LINK2 ITEM 1</a></li>
<li><a href='#'>LINK2 ITEM 2</a>
<ul>
<li><a href='#'>LINK2 ITEM 2.1</a></li>
<li><a href='#'>LINK2 ITEM 2.2</a></li>
</ul>
</li>
<li><a href='#'>LINK2 ITEM 3</a>
<ul>
<li><a href='#'>LINK2 ITEM 3.1</a></li>
</ul>
</li>
<li><a href='#'>LINK2 ITEM 4</a></li>
</ul>

<ul id="ddsubmenuside2" class="ddsubmenustyle blackwhite">
<li><a href='#'>LINK3 ITEM 1</a></li>
<li><a href='#'>LINK3 ITEM 2</a></li>
<li><a href='#'>LINK3 ITEM 3</a>
<ul>
<li><a href='#'>LINK3 ITEM 3.1</a></li>
<li><a href='#'>LINK3 ITEM 3.2</a></li>
<li><a href='#'>LINK3 ITEM 3.3</a></li>
<li><a href='#'>LINK3 ITEM 3.4</a></li>
</ul>
</li>
<li><a href='#'>LINK3 ITEM 4</a></li>
<li><a href='#'>LINK3 ITEM 5</a>
<ul>
<li><a href='#'>LINK3 ITEM 5.1</a></li>
<li><a href='#'>LINK3 ITEM 5.2</a>
<ul>
<li><a href='#'>LINK3 ITEM 5.2 1</a></li>
<li><a href='#'>LINK3 ITEM 5.2 2</a></li>
<li><a href='#'>LINK3 ITEM 5.2 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>LINK3 ITEM 6</a></li>
</ul>
<ul id="ddsubmenuside3" class="ddsubmenustyle blackwhite">
<li><a href='#'>LINK5 ITEM 1</a></li>
<li><a href='#'>LINK5 ITEM 2</a></li>
<li><a href='#'>LINK5 ITEM 3</a></li>
<li><a href='#'>LINK5 ITEM 4</a></li>
<li><a href='#'>LINK5 ITEM 5</a></li>
</ul>
Keterangan : Edit seluruh script yang telah diberi tanda.
Odii Siitohang
Judul: Cara buat Vertikal Side Bar Menu di Blog;
Ditulis oleh: Anonymous;
Rating Blog: 5 dari 5





Anda sedang membaca Artikel tentang Cara buat Vertikal Side Bar Menu di Blog dengan url http://d-copy.blogspot.com/2012/07/cara-buat-vertikal-side-bar-menu-di.html, jika Anda menyukai Artikel di blog ini, silahkan masukkan email Anda dibawah ini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel baru.
D-Copy Reader DMCA
[0] Komentar untuk Cara buat Vertikal Side Bar Menu di Blog:

Post a Comment

Beberapa panduan dalam berkomentar :
Untuk menyisipkan kode[code]KODE ANDA[/code]
Untuk menyisipkan quote[blockquote]QUOTE ANDA[/blockquote]
Untuk menyisipkan gambar[img]URL Gambar[/img]
Untuk menyisipkan video[youtube]URL Video[/youtube]
Anda bisa mengekspresikan komentar Anda dengan emoticon
Klik subscribe by email agar Anda segera tahu balasan komentar Anda

 
D-Copy Blog © 2013 - All Rights Reserved Design : Creating Website Published : Mas Template