In the last post we had a tutorial for a very
unique style of drop down navigation menu for Blogger.That menu used a horizontal bar as the drop down to display links on hover.This menu uses the more conventional style of a vertical drop down to display links.It has a large bold red on grey color scheme that stands out and looks great.As with the last menu it's built purely from Css using just two images.Below you can see the screenshot and a live demo to see it in action.
This menu is also courtesy of the awesome
Free Css Menu, let's add it to your blog.
Add The Bold Red Drop Down Menu To Blogger
Remember Always Back Up Your Template Before You Make Changes -
How To Back Up A Blogger Template Step 1. In Your Blogger Dashboard Click Design > Edit Html
Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code -
How To Find Code In Blogger Template Template)
]]></b:skin>
Step 3. Copy and paste the following code Directly Above / before ]]></b:skin>
Note - This is a scroll box make sure to get all the code.
/*Start Css Menu*/
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimTwg5sk8zNhFGoE6JfCZ4pZKFWhjDW9IjYpBkkCJQJGAsmyFepBJBRYo2rRyQ7XvERBvZvDE8kgWVM2G-1BC3kt-91N2BGbfxbDqapP-1oLrIV_v2H6wANdb747SFPZM3ZsIO9GipeeTZ/s1600/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px 8px 0px 8px;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #a80329;
border-right:2px solid #a80329;
border-bottom:2px solid #a80329;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNQsJa9k5QsTDHNtKZVbRuMQCgMDtHVsIwO7ivkbPEw-Rp7K5QKvhMhfA5cLUKjwKHBMVX7ZRzS5_CQGlVT8Stwj4WnWcbSCPern86hHgn9whbfFZ_R-LoDhChuAe0ob3pIozmxmz2lnoQ/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}
/*End Css Menu from http://www.spiceupyourblog.com*/
Step 4. Save your template.
That's the Css added next is to add the html for your menu.
Now go to your blogs Design Page, we will be adding the menu across your blog below the header.This area is called Cross Column and can be seen in the image below.If your blog does not have this section available you can see how to enable it here -
Add Full Width Cross Column Gadgets To Blogger.
Add The Menu Html
In your blogs Design Page click Add A Gadget > Choose Html/Javascript > Copy and paste the following code into the Html/Javascript gadget :
<div class="menu">
<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#" >Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>
This is the code that makes up the menu in the demo above.Replace the hash tags (#) with your links and the text with your text.If you take a few minutes to reference the demo and the code you should see how it works.If you want to add more links you can do so in the same way, once again take a few minutes to look at the layout of the code and you will see how its done.
Template Designer Tabs Fix
If you use a template from the Blogger Template Designer there is a section of Css that will effect this or any menu you place in the cross column section.This is called tabs and you will need to remove or over ride the tabs css.I have made a short video to show you how to remove it.You can see the video here -
Remove Tabs Css.
That's it simple ! Make sure to check out more of our
Css tutorials and
Blogger gadgets.
Drop Your Comments And Questions Below.
There are hundreds of image editing and resizing services available online so finding a quick and easy option can be hard.One service i use regularly is Dr Pic as it has just a few quick editing options and a re size option with an instant preview.The stacked Polaroid effect is probably the one i use most and i have received a few Emails asking how it's done.So i have created a short video to show you how to use Dr Pic to edit and re size your images.
In this post i have a very cool and in many ways unique type of Css drop down menu for Blogger.The regular drop down menu we are used to seeing will when a link is hovered over display more links vertically below.This menu however is known as a 'Drop Bar' as on hover it displays links horizontally in a bar below the menu.I had been looking for something like this and while i found some jQuery powered versions but i loved this as it only uses Css, so no scripts or added load time to your blog and easier to implement.Also the menu has a great fix for our old friend Internet Explorer which usually plays up when Css is used.I have tested it back to IE6 and it looks fine.Your probably still wondering how it displays the links horizontally instead of vertically so i have a screenshot and live demo you can check out below.
Breadcrumbs is the name given to navigation links usually displayed above posts on blogs and at the top of pages on websites.The links are a trail from the page you are currently on back to the home page.So for example on a blog you will have the home page link, a link to a label used for the post then the post title.This will be displayed like this 'Home > Label > Post Title'.This is a very popular type of navigation on all sorts of sites and in this post i will show you how to add it to blogger.
There are so many options for bloggers on both Wordpress and Blogger when it comes to free themes and templates.In fact many of the best free Wordpress Themes are converted to work on Blogger blogs.With that in mind i wanted to assemble a list of the best themes and templates available for both Wordpress and Blogger.So here are 20 Wordpress themes and Blogger templates with the same design and totally free to download and use on your blog regardless of platform.
In January 2010 i published what has become the most popular Search Engine Optimization (SEO) posts on Spice Up Your Blog (SUYB).The post titled 'Building Backlinks, Do-Follow Comments And Information To Increase Google Search Rank And Page Rank' has consistently been in the top 10 in terms of views and to date has 117 comments.I guess the reason it has been so popular is it covers a number of topics related to improving your blogs performance in search, especially Google.The original intention of the post was to explain Do-Follow comments, what they are and how they work.I wont explain the whole do-follow process again you can check out the post linked above for more on the subject.
Two excellent designers and friends of Spice Up Your Blog recently launched new blogs that Blogger users will love.Many of you will have heard me mention Harish before, he works with me on various projects and has launched an original Blogger Template site.Lauren 'nymphont' Thompson recently listed in a top ten female designers list has launched a gallery you can all submit your blogs to and it's a Blogger only zone.
