I created this guide specifically for my friends who are interested in to add (install) a horizontal navigation menu on your blog. This navigation menu I get from dynamicdrive. The advantages of this menu is not using the image, so the faster loading time. But the drawbacks which display unattractive.
For my friends who are interested you can use this method by following the procedures below.
I created this guide specifically for my friends who are interested in to add (install) menu navigation for create a menu like the one above, can perform the following procedure:
2. Find the following code
]]></b:skin>
</head>
3. After this code
]]></b:skin>
</head>
Enter the following script css code:
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.mattblacktabs{
width: 100%;
overflow: hidden;
border-bottom: 1px solid black;
}
.mattblacktabs ul{
margin: 0;
padding: 0;
padding-left: 10px; /*offset of tabs relative to browser left edge*/
font: bold 12px Verdana;
list-style-type: none;
}
.mattblacktabs li{
display: inline;
margin: 0;
}
.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141; /*background of tabs (default state)*/
}
.mattblacktabs li a:visited{
color: white;
}
.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}
</style>
4. Click the "Save Template"
5. Open the page "Layout -> Page Elements"
6. In the header element, click the "Add a Gadget"
Note: If you use the default template, blogger then the "Add gadgets" does not appear in the header, to display it can see my post on how to display the "add gadget" in the header
7. after clicking the "add gadget" select HTML / Javascript
note:
replace url: http://rizalblogmaster.blogspot.com/, with the url of your blog
replace # with the target url that will link to the menu
for example:
http://rizalblogmaster.blogspot.com/2011/11/menambah-memasang-widget-google.html
If you still want to add navigation links, then before
</ ul>
</ div>
add the following code:
<a href="URL "target="_blank"> displayed text (anchor text) </ li>
Click the Save button
You can set the navigation menu, you can slide on the top of the image header or below the image header.
You can also change the background color of the menu
border-bottom: 1px solid black;
=============================================
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141; /*background of tabs (default state)*/
==============================================
.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: black; /
==============================================
Change black tex, white text, dan #414141
0 Comment:
Post a Comment