Horizontal Blogger LinkList Gadget
Instead of using the ever-so-popular Pages gadget, lots of users prefer to use the LinkList gadget as their menu bars. Why? Because with Pages gadget, you can only add links to your static pages (Update: This is no longer true in the new Blogger interface). But with LinkList gadget, you can add external links, links to almost just anything. I've shown you how you can replace your Pages gadget with a LinkList gadget here.
Apparently, some of the older templates do not have proper 'crosscol' definitions to make LinkList gadget behave like the Pages gadget. Ideally, we want our gadget to stretch horizontally from left to right across the page, usually below the header. But this isn't the case for some of the older templates, as the LinkList stretches downwards vertically. In this post, I'm gonna show you how you can easily fix it, and use LinkList gadget instead of Pages gadget as your menu bar.
Apparently, some of the older templates do not have proper 'crosscol' definitions to make LinkList gadget behave like the Pages gadget. Ideally, we want our gadget to stretch horizontally from left to right across the page, usually below the header. But this isn't the case for some of the older templates, as the LinkList stretches downwards vertically. In this post, I'm gonna show you how you can easily fix it, and use LinkList gadget instead of Pages gadget as your menu bar.
If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
#crosscol ul{
padding: 0;
}
#crosscol ul li{
display: inline-block;
padding-bottom: 8px;
padding-top: 8px;
padding-right: 10px;
padding-left: 10px;
}
OR#crosscol ul{
padding: 0;
}
#crosscol ul li{
display: inline;
padding-bottom: 8px;
padding-top: 8px;
padding-right: 0px;
padding-left: 0px;
}
OR.LinkList ul{
padding: 0;
}
.LinkList ul li{
display: inline-block;
padding-bottom: 8px;
padding-top: 8px;
padding-right: 10px;
padding-left: 10px;
}
There you go. Feel free to adjust the left, right, bottom and top paddings as you like. If you want to apply any other modifications, like borders and such, leave a comment and I will assist you accordingly.Category Article Tutorial
