Here is a tutorial on how to create horizontal category navigation menu bar for Blogspot blog.
Instead of wasting the space of your sidebar to show your a vertical list of categories, why not create a horizontal navigation menu across the top of your blog.
To be exact, just below your blog title.
It looks presentable and it can attract your readers' attention to read more of your content.
To get them to stick longer on your blog.
Another thing is at least you can show more other important stuff on the sidebar above the fold.
Another thing is at least you can show more other important stuff on the sidebar above the fold.
Above the fold means the part of your blog page that can be seen on the monitor as it is, without having to scroll down.
There are two parts to go about creating a horizontal navigation menu for category list of Blogger/Blogspot blog:
There are two parts to go about creating a horizontal navigation menu for category list of Blogger/Blogspot blog:
Part One: Add HTML Code
1. Go to Dashboard. Click "Theme". Click on "HTML view".
2. Now place this code here you ant the navigation menu.
<!-- The navigation menu -->
<div class="navbar">
<a class="active" href="#">Home</a>
<a href="#">Search</a>
<a href="#">Contact</a>
<a href="#">Login</a>
</div>
PART TWO: Add CSS.
3. Paste this code before ]]> </b:skin>
/* Style the navigation menu */
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
/* Navigation links */
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 25%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
text-align: center; /* If you want the text to be centered */
}
/* Add a background color on mouse-over */
.navbar a:hover {
background-color: #000;
}
/* Style the current/active link */
.navbar a.active {
background-color: #4CAF50;
}
/* Add responsiveness - on screens less than 500px, make the navigation links appear on top of each other, instead of next to each other */
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
width: 100%;
text-align: left; /* If you want the text to be left-aligned on small screens */
}
}
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
/* Navigation links */
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 25%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
text-align: center; /* If you want the text to be centered */
}
/* Add a background color on mouse-over */
.navbar a:hover {
background-color: #000;
}
/* Style the current/active link */
.navbar a.active {
background-color: #4CAF50;
}
/* Add responsiveness - on screens less than 500px, make the navigation links appear on top of each other, instead of next to each other */
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
width: 100%;
text-align: left; /* If you want the text to be left-aligned on small screens */
}
}