RSS
Twitter
FacebookHow to add Vertical Menu on Blog
1. Login to Blogg Then Go TO to Dashboard> Layout>>> and on the Page Elements page,
click Add a Gadget and select HTML / JavaScript Add then copy and paste the following code in the area of the Content HTML / JavaScript.
<style type="text/css">
/* Made By hendrytha.blogspot.com */
#ddblueblockmenu{
border: 1px solid #000000; /*Main Border Color */
border-bottom-width: 0;
width: 100%;
}
#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
#ddblueblockmenu a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 94%; /*94% minus all left/right paddings and margins*/
text-decoration: none;
color: #ffffff; /* Menu Font Color */
background-color: #2175bc; /*Menu background Color */
border-bottom: 1px solid #90bade; /*Bottom border color */
border-left: 7px solid #1958b7; /*Left border color */
list-style-type:none;
}
* html #ddblueblockmenu a{ /*IE only */
width: 94%; /*IE 5*/
width: 94%; /*94% minus all left/right paddings and margins*/
}
#ddblueblockmenu a:hover {
background-color: #2586d7; /*Menu background Color On Hover*/
border-left-color: #1c64d1; /*Left border color On Hover*/
}
#ddblueblockmenu div.menutitle{
color: #ffffff; /* Title Font Color */
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: #000000; /*Menu Tite Background Color*/
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
/* Made By AllBlogTools.com */
</style>
<div id="ddblueblockmenu">
<div class="menutitle">Browse</div>
<ul>
<a href="http://hendrytha.blogspot.com/">Home</a>
<a href="http://hendrytha.blogspot.com/">About us</a>
<a href="http://hendrytha.blogspot.com/">Blogger
templates</a>
<a href="http://hendrytha.blogspot.com/">Blogger
Tricks</a>
<a href="http://hendrytha.blogspot.com/">Blogger Tools</a>
<a href="#">Edit</a></* You can copy this line each time you want to add a new element to your menu and change Edit to your text and change# to the url.*/>
</ul></div><font size="1">Menu By <a
href="http://hendrytha.blogspot.com/">senantiasa belajar</a></font>
1. Login to Blogg Then Go TO to Dashboard> Layout>>> and on the Page Elements page,
click Add a Gadget and select HTML / JavaScript Add then copy and paste the following code in the area of the Content HTML / JavaScript.
<style type="text/css">
/* Made By hendrytha.blogspot.com */
#ddblueblockmenu{
border: 1px solid #000000; /*Main Border Color */
border-bottom-width: 0;
width: 100%;
}
#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
#ddblueblockmenu a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 94%; /*94% minus all left/right paddings and margins*/
text-decoration: none;
color: #ffffff; /* Menu Font Color */
background-color: #2175bc; /*Menu background Color */
border-bottom: 1px solid #90bade; /*Bottom border color */
border-left: 7px solid #1958b7; /*Left border color */
list-style-type:none;
}
* html #ddblueblockmenu a{ /*IE only */
width: 94%; /*IE 5*/
width: 94%; /*94% minus all left/right paddings and margins*/
}
#ddblueblockmenu a:hover {
background-color: #2586d7; /*Menu background Color On Hover*/
border-left-color: #1c64d1; /*Left border color On Hover*/
}
#ddblueblockmenu div.menutitle{
color: #ffffff; /* Title Font Color */
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: #000000; /*Menu Tite Background Color*/
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
/* Made By AllBlogTools.com */
</style>
<div id="ddblueblockmenu">
<div class="menutitle">Browse</div>
<ul>
<a href="http://hendrytha.blogspot.com/">Home</a>
<a href="http://hendrytha.blogspot.com/">About us</a>
<a href="http://hendrytha.blogspot.com/">Blogger
templates</a>
<a href="http://hendrytha.blogspot.com/">Blogger
Tricks</a>
<a href="http://hendrytha.blogspot.com/">Blogger Tools</a>
<a href="#">Edit</a></* You can copy this line each time you want to add a new element to your menu and change Edit to your text and change# to the url.*/>
</ul></div><font size="1">Menu By <a
href="http://hendrytha.blogspot.com/">senantiasa belajar</a></font>
change http://hendrytha.blogspot.com/ (your URL)
AND SAVE
Now we will learn how to customize the color of the menu to me it looks perfect with your blogger template Or you can just leave it as you see it.
Customize menu colors.
Customize menu colors.
Now please look at the code above, you'll see some code written in color. in the code above I explained what that is responsible for each part. All what you have to do is go to our generator html hex color code and get your favorite color and then paste instead of a color code in the code above.
For example if you want to change the background color of the menu.
You will find a line that says
background-color: # 2175bc; / * Menu background color * /
2175bc to just change the code in your favorite color that you get it from our generator html hex color here
If you find the above code can be confusing or do not understand what in the name of the element in the menu, please check the next picture.
0 comments