Showing posts with label CSS Nav Menu--]. Show all posts
Showing posts with label CSS Nav Menu--]. Show all posts

Friday, September 12, 2008

CSS NAVIGATION MENU Solidblock Purpple

Free CSS NAVIGATION MENU Solidblock Pink


These eleven CSS navigation menus are created using the Sliding Doors technique, and will even work in everyone’s favorite browser Internet Explorer. You may download the entire set and use any way you see fit. You may want to clean up the stylesheet, or alter the menu graphics to suit your needs. All the menus can be used for commercial or private use.
Do you like? in this blog have all!


How to install:
1


1. Login to your Blogger account of course.
សូមចូលក្នុង
account របស់អ្នក

2. Go to your HTML Editor on your blogger dashboard.
បន្ទាប់មកចូលក្នុង
HTML Editor

3.No need Tick the Expand Widget Template
មិនចាំបាច់ចុចធិចយកត្រង់ Expand Widget Template
4-Coppy this code into HTML that have like #
លោកអ្នកអាច​ចម្លងកូដនេះ​ទៅដាក់ក្នុង HTML ដែលមាននិមិត្ត​សញ្ញាបែបនេះ }
*CODE*

/* Menu
---------------------------------------------- */
.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
border: 1px solid #54579C;
border-width: 1px 0;
background: #E8ECED

url("http://i148.photobucket.com/albums/s18/auricola/Acessorios/Barra007.gif") center center

repeat-x;
}
.solidblockmenu li{
display: inline;
}
.solidblockmenu li a{
float: left;
color: #000000;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid #54579C;
}
.solidblockmenu li a:visited{
color:#d7bfdc;
}
.solidblockmenu li a:hover, .solidblockmenu li .current{
color:#E8ECED;
background:#6B70B0 url(media/blockactive.gif) center center repeat-x;
}


2

and then Paste Code between id=Wrapper and class=content (see picture below)
:
លោកអ្នកអាច​ចម្លងកូដនេះ​ទៅដាក់ between id=Wrapper and class=content

<ul class='solidblockmenu'><li><a href='/' target='_blank'><b>Home</b></a></li></ul>

Read more!

Thursday, September 11, 2008

CSS NAVIGATION MENU Solidblo Pink

Free CSS NAVIGATION MENU Solidblo Pink


These eleven CSS navigation menus are created using the Sliding Doors technique, and will even work in everyone’s favorite browser Internet Explorer. You may download the entire set and use any way you see fit. You may want to clean up the stylesheet, or alter the menu graphics to suit your needs. All the menus can be used for commercial or private use.
Do you like? in this blog have all!


How to install:
1


1. Login to your Blogger account of course.
សូមចូលក្នុង
account របស់អ្នក

2. Go to your HTML Editor on your blogger dashboard.
បន្ទាប់មកចូលក្នុង
HTML Editor

3. No need Tick the Expand Widget Template
មិនចាំបាច់ចុចធិចយក ត្រង់ Expand Widget Template
4-Coppy this code into HTML that have like #
លោកអ្នកអាច​ចម្លងកូដនេះ​ទៅដាក់ក្នុង HTML ដែលមាននិមិត្ត​សញ្ញាបែបនេះ }
*CODE*

/* Menu
---------------------------------------------- */
.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
border: 1px solid #F2A1B0;
border-width: 1px 0;
background: #D28C94

url("http://i148.photobucket.com/albums/s18/auricola/Acessorios/BarraRosa.jpg") center center

repeat-x;
}
.solidblockmenu li{
display: inline;
}
.solidblockmenu li a{
float: left;
color: #7F0000;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid #F2A1B0;
}
.solidblockmenu li a:visited{
color:#E15C6F;
}
.solidblockmenu li a:hover, .solidblockmenu li .current{
color:#D28C94;
background:#ffffff url(media/blockactive.gif) center center repeat-x;
}


2

and then Paste Code between id=Wrapper and class=content (see picture below)
:
លោកអ្នកអាច​ចម្លងកូដនេះ​ទៅដាក់ between id=Wrapper and class=content

<ul class='solidblockmenu'><li><a href='/' ><b>Home</b></a></li></ul>

Read more!

Saturday, June 7, 2008

How to Add a Menu Bar To your Blog-Blogger Hack

Missing a real menubar on you Blog? This hack explains how you can add a simple menubar to the top of your Blog. It is in fact a simple link list, and that is a standard page element of Blogger Beta. I have added a new section at the top of the Blog Page, and the link list is inside that section. Of course there are some tricks to play, such as hiding the link list title, and showing the links list elements side by side. Here is how it is done.




In this Page Layout you can see where I have added the Menubar. The code of this section is highlighted in this box:

<div id="'header-wrapper'"><br /><b:section class="'menubar'" id="'menubar'" maxwidgets="'1'" showaddelement="'yes'"><br /><b:widget id="'LinkList2'" locked="'true'" title="'Menubar'" type="'LinkList'/"><br /></b:section><br /><b:section class="'header'" id="'header'" maxwidgets="'1'" showaddelement="'no'"><br /><b:widget id="'Header1'" locked="'false'" title="'Beautiful" type="'Header'/"><br /></b:section><br /></div>

To the CSS-part of your template, add coding for the menubar-id:

#menubar h2 {display:none;}

#menubar ul {
list-style: none;
}
#menubar li {
float: left;
}

#menubar a:link, #menubar a:visited, #menubar a:hover {
padding: 5px;
display: block;
color: $headerTextColor;
}

#menubar a:hover {
background-color: $headerCornersColor;
}
The menubar title is hidden, so that only the options are visible.
The list-elements are set to none, so that there are no bullets in front of the menu options. And if a menu-option is hovered over, it is highlighted.

Original By -
Ehtisham Khan-Edwardian

Read more!

 

©2009 daily news | by TNB