Teknik Buat Sidebar Navigation

Ada sesetengah orang tak nak buat sidebar, dan ada pula yang teringin nak banyak sidebar.. ok hari ini kita pelajari Teknik Buat Sidebar di Blogspot .

Ikut step dibawah dengan betul dan korang boleh edit semula dilaman blog nanti..

1. Go To Blogger > Design
2. Choose HTML/Javascript Widget. Choose this gadget from the sidebar section inside your layout
3. Paste the following code inside it,

<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/AVvXsEhOFe6n1i9HAvourwnCA9HdDq2pHtFqxfyoQnVtaPCrxc05AI4sDMJCdOdXFVRlGIaIgON2ZCjrBuiulnRYJsDhpb5Kd3h2XieEzZCbaG7H0k8TgvJphPHSdXoaxom0KA3GvTfjh46ilHU/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>

Press "Ctrl + A" to Select and "Ctrl + C" to Copy

• Gantikan # dengan URL anda.. 
• Untuk tukar warna Background klik pada  #F2F2F2

Suka dengan widget ni tolong le LIKE fanpage saya..