Tuesday, September 28, 2010

Vertical CSS Menus - Blue Blocks

How to install:
1. Login to your Blogger account of course.
សូមចូលក្នុង
account របស់អ្នក
2. Go to your HTML Editor on your blogger dashboard.
បន្ទាប់មកចូលក្នុង
HTML Editor
3. Tick the Expand Widget Templateចូរចុចធិចយក ត្រង់ Expand Widget Template4-Coppy this code into HTML that end of }: like:
លោកអ្នកអាច​ចម្លងកូដនេះ​ទៅដាក់ក្នុង HTML ដែលបញ្ចប់ដោយនិមិត្ត​សញ្ញាបែបនេះ ឧ.

}
past code below here

*CODE*

<style type="text/css">

#blueblock{
width: 180px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
font-size: 90%;
background-color: #90bade;
color: #333;
}

* html #blueblock{ /*IE 6 only */
w\idth: 147px; /*Box model bug: 180px minus all left and right paddings for #blueblock */
}

#blueblock ul{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#blueblock li {
border-bottom: 1px solid #90bade;
margin: 0;
}

#blueblock li a{
display: block;
padding: 5px 5px 5px 8px;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #blueblock li a{ /*Non IE6 width*/
width: auto;
}

#blueblock li a:hover{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}


</style>


and then Add a Getgat of the sidebar to write in your sidebar widget with Java script like this:
ហើយបន្ទាប់មកចូលទៅសរសេរនៅក្នុង
sidebar widget ដោយយកប្រភេទ Java script ហើយចម្លងកូដនេះទៅដាក់៖

<div id="blueblock">

<div class="menutitle">Socheatk</div>
<ul>
<li><a href="http://www.socheatk.blogspot.com" title="Home">Home</a></li>
<li id="current"><a href="http://socheatk.blogspot.com/2008/06/free-css-navigation-menu-these-eleven_29.html#A1" title="Css">CSS Menu</a></li>
<li><a href="http://socheatk.blogspot.com/2008/06/01.html#A1" title="Literature">Literature</a></li>
<li><a href="http://socheatk.blogspot.com/search/label/Music#A1" title="Music">Music</a></li>
</ul>
<div class="menutitle">Socheatk</div>
<ul>
<li><a href="http://www.socheatk.blogspot.com" title="Home">Home</a></li>
<li id="current"><a href="http://socheatk.blogspot.com/2008/06/free-css-navigation-menu-these-eleven_29.html#A1" title="Css">CSS Menu</a></li>
<li><a href="http://socheatk.blogspot.com/2008/06/01.html#A1" title="Literature">Literature</a></li>
<li><a href="http://socheatk.blogspot.com/search/label/Music#A1" title="Music">Music</a></li>
</ul>
</div>
Done!

0 comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...

Archive

Template by:

Free Blog Templates