- Share This Post
- submit
- 10
-
Sparkle (0)
Good navigation on your blog is important to your readers. Having a clean site helps them find everything easily and I thought I'd talk a bit about the sidebar, and how to roll up those lists.
Blogrolls can be rolled up using services such as blogrolling.com (more about that in a minute), or dropdown menus, as shown here:
Here's the code for a dropdown menu:
<form action="blogroll.php" method="get" target="_blank">
<select onchange="window.open(this.options[this.selectedIndex].value);
this.selectedIndex=0;" name="link">
<option>Click for Blogroll...</option>
<option value="http://www.blogher.com" target="_blank">BlogHer</option>
<option value="http://themotherless.com" target="_blank">Motherless</option>
<option value="http://troll-baby.com" target="_blank">Troll Baby</option>
</select>
<input type="submit" value="Go" />
</form>
This code will open the blogroll options in a new window - ideal for both the blogger and readers, so that they don't get lost and lose your blog in the process.
To put your blogroll in a scroll box, like the one pictured below, use this code, along with the javascript code from blogrolling.com.
<div style="width: 170px;height: 200px;overflow: auto;"><script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/display.php?r=ad7e311552f37be9a49a96a2978ce096"></script></div>
Where this part is the code from blogrolling.com:
<script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/display.php?r=ad7e311552f37be9a49a96a2978ce096"></script>
Either left align your sidebar or center it, don't attempt to do both. It is pleasing to the eye to keep things one way or the other.
You can roll up your archives on Blogger, and or your previous posts by using this hack by Glenn from Roveburg.com. (For Previous Posts, just replace your Archives code with your Previous Items code below.
<select name="archivemenu" onchange="document.location.href=this.options[this.selectedIndex].value;" style="background-color:#FFFFFF; color:#000000">
<option selected> - Click for blog Archives - </option>
<!--Reverse Sort Archive Menu Blogger Hack created by Glenn from ROVEBERG.COM -->
<script type="text/javascript">
var archives = new Array();
<BloggerArchives>
archives[archives.length] = new Array('<$BlogArchiveURL$>', '<$BlogArchiveName$>');
</BloggerArchives>
for (var i=archives.length-1;i>=0;i--) {
document.write('<option value=\"' + archives[i][0] + '\">' + archives[i][1] + '</option>');
}
</script>
</select>
Also, since Blogger does not have a categories feature at the moment, you can create your own using this handy hack from Net Compact Framework Tutorials. Basically it uses the Blogger search function and a little bit of code.
For more about dressing your blog up, see the BlogHer Entry, Sourcing Images for Graphic Design, the first installment of the Graphic Design series.
Contributing Editor Karen Rani also blogs at Troll Baby and owns Troll Baby Graphics.
