Horizontal Link Lists1. Apply to all link lists and label listsIf
you want all the link lists and label lists in your sidebar to be
displayed horizontally, go to Template -> Edit HTML and scroll to
where you see this and insert the code (shown in
red):-
.sidebar ul {
display:inline;
}
.sidebar li{
display:inline;
}
|
|---|
In some templates, you may insert the code here:-
.sidebar ul li {
display:inline;
}
|
|---|
2. Apply to one specific listInstead
of having a style that applies to all the lists, you may want to have
only one of the link lists appear horizontally. First, you need to
create that list by going to Template -> Page Elements -> Add a
Page Element. Choose “Link List”, add your items and save.
Now is
the tricky part. You would have to locate that particular segment of
the code where this list appears and find out the widget ID for that
list.
For discussion purposes, let us assume that we want the
link list titled “My Blogs” in our left sidebar to be displayed
horizontally. We go to Template -> Edit HTML, and check the box that
says “Expand Widget Templates.”
Next, we searched (Ctrl-F) for “My Blogs” and found this section:-
<b:widget id='LinkList2' locked='false' title='My Blogs' type='LinkList'>
|
|---|
From
here, we know that this link list has been assigned an ID LinkList2. To
define a style, we went to the /* Sidebar Content */ portion of our
template and included this code (
Note: the code can be inserted into any part of the <head> section but for ease of reference we have inserted it here):-
/* Sidebar Content */
#LinkList2 li{
display:inline;
}
|
|---|
This is what we got:-
Only
this list is displayed horizontally. The other lists are not affected.
If you want this style for the labels, do the same. Locate the widget ID
which is likely to be id='Label1' or id='Label2' and then insert the
code:-
/* Sidebar Content */
#Label1 li{
display:inline;
}
|
|---|
Text Link Menu Navigation Bars1. Simple Navigation BarWe
want a row of text links pointing users to certain important parts of
the Blog. The links blend into the Header and will look like this:-
In Template ->Edit HTML, insert this style definition under /* Header */:-
/* Header */
#newnavbar ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}
|
|---|
Other
than the display:inline style, the other variables can be changed. You
can have a larger or smaller font. The margin and padding set the space
in between the words and can be changed. If you want a border around the
word, set the border value to at least 1px.
Scroll further down the template and check if you see this:-
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
|
|---|
If the number of maxwidgets is set to “1”, change it to “3”. If the showaddelement is “no”, change it to “yes”.
Save
the template. We shall now create the list. Go to Template -> Page
Elements -> Add a Page Element and choose to add HTML/JavaScript in
your Header. The link list code you can add is as follows:-
<div id='newnavbar'> <ul> <li><a href=" URL of Home page">Home</a></li> <li><a href=" URL of Music page">Music</a></li> <li><a href=" URL of Books page">Books</a></li> <li><a href=" URL of Links page">Hot Links</a></li> <li><a href=" URL of Profile page">About Me</a></li> <li><a href="mailto: EMAIL ADDRESS">Contact</a></li> </ul></div> |
|---|
Insert
the relevant words and URL links into the above example. If you want to
link to a label, click the label in your sidebar to obtain the URL for
insertion into the code (shown in
blue). The URL should look like this:-
<li><a href="http://tips-for-new-bloggers.blogspot.com/search/label/Three%20Columns">Three Column Templates</a></li>
|
|---|
This
link widget can be moved about. Try placing it below the Header and
then above the Blog posts to see the difference in the layout. Preview
the template and save it if you like the new horizontal navigation bar
position.
2. Adding Link and Hover EffectsWe
have now a simple horizontal navigation list. Let us make it visually
attractive and distinguish these links from the other links in your
Blog. This is done by introducing the hover and rollover effects. For
example, in addition to the above code we added into the template, we
can have these as well:-
/* Header */
#newnavbar ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}
#newnavbar li a{
color:#dfffed;
}
#newnavbar li a:visited {
color: #57E964;
}
#newnavbar li a:hover {
color: #F88017;
background: #ffff66;
}
|
|---|
The resulting navigation bar will be this:-
3. Menu Bar below Header
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>
|
|---|
Change
the showaddelement from “no” to “yes”. In Template -> Page Elements,
you should be able to see an additional slot between the Header and the
Blog posts where you can insert Page Elements.
Image Link Menu Navigation Bars1. Simple Navigation BarThe modification to the template is similar to that of text links. In Template ->Edit HTML, insert this style definition:-
/* Header */
#newnavbar ul li{
list-style-type: none;
display:inline;
margin:0px;
padding:30px;
border:0px solid;
}
|
|---|
The space in between the pictures (padding) may be changed depending on the number of images and the size of each image.
To
add the horizontal row of navigation image links, go to Template ->
Page Elements -> Add a Page Element and choose to add HTML/JavaScript
in your Header. The image link list code you can add is as follows:-
<div id='newnavbar'> <ul> <li><a href=" URL of Home page"><img src=" URL of Home image"></a></li> <li><a href=" URL of Music page"><img src=" URL of Music image"></a></li> <li><a href=" URL of Books page"><img src=" URL of Books image"></a></li> <li><a href=" URL of Links page"><img src=" URL of Links image"></a></li> <li><a href=" URL of Profile page"><img src=" URL of Profile image"></a></li> <li><a href="mailto: EMAIL ADDRESS"><img src=" URL of Email image"></a></li> </ul></div> |
|---|
The portions of the code in
blue are the addresses where you want the users to be directed to. The parts in
red are where your images are hosted on an image server.
This is how the neat horizontal picture navigation bar can look:-
2. Adding Link and Hover EffectsWe
can throw in some effects into the picture links. Just to give you an
example, we added this hover links code in addition to the above:-
/* Header */
#newnavbar ul li{
list-style-type: none;
display:inline;
margin:0px;
padding:30px;
border:0px solid;
}
#newnavbar li a img{
height:30px;
width:30px;
}
#newnavbar li a:hover img{
height:40px;
width:40px;
background: #ffff66;
}
#newnavbar li a:visited img{
height:40px;
width:40px;
background: #6D7B8D;
}
|
|---|
What we had done was to fix the navigation bar image
link size at 30px by 30px. There is no border around the image. When the mouse cursor
hovers over the image link, the image is enlarged to 40px by 40px with a yellow background. Any
visited links will have a grey background behind the image.
While
this looks interesting to have, do note that any change in image size
also affects the surrounding text alignment. You can reverse it. Change
the hover and image sizes to smaller values so that the images 'shrink'
when the mouse hovers over them.
7:27 PM
Unknown
