Home » Blogger Hack » Cara buat Vertikal Side Bar Menu di Blog

Cara buat Vertikal Side Bar Menu di Blog

Kali ini Blog Gado Gado akan menampilkan artikel berjudul Cara buat Vertikal Side Bar Menu di Blog. Dengan artikel Cara buat Vertikal Side Bar Menu di Blog ini kami berharap dapat menjadi sebuah rujukan dan bahan penambah wawasan kita terkait dengan judul tersebut. Artikel ini adalah hasil pencarian di google dengan kata kunci Cara buat Vertikal Side Bar Menu di Blog kemudian saya kumpulkan dan saya sajikan buat anda di Blog Gado Gado ini. Semoga kehadiran artikel ini bermanfaat bagi kita semua.anda juga dapat melihat artikel sebelumnya atau artikel berikutnya. Ok, langsung saja berikut adalah artikel Cara buat Vertikal Side Bar Menu di Blog selengkapnya:

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(http://2.bp.blogspot.com/-iqYq70P-LtU/T2YgqBSJzCI/AAAAAAAAGGY/cl6QgaRIGQY/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.

Nah, sobat Blog Gado Gado.. Anda telah membaca seluruh artikel berjudul Cara buat Vertikal Side Bar Menu di Blog dengan keword yang masuk Blogger Hack . Anda dapat memberikan komentar ditempat yang telah tersedia. Terima kasih kunjungan Anda.

0 komentar:

Poskan Komentar