Showing posts with label Tab. Show all posts
Showing posts with label Tab. Show all posts

Thursday, June 19, 2008

Blogger Blogspot Pages scroll too much

OK, so, I just realized it's entirely possible some people have absolutely no idea why I went to the effort of making the posts script and the sidebar widget. It's simple really, when I read other peoples' blogs I find myself scrolling around like crazy. I hate scrolling, so I decided to come up with a solution to the problem rather than just complain about it.

Now, on this blog, you'll likely still do some scrolling (especially on long posts); however, you won't do as much with the navigation scripts place. It's kind of like tab-navigation for your blog.

http://blog.benfinnigan.com/2008/06/blog-post-navigation-script.html

http://blog.benfinnigan.com/2008/06/interesting-sidebar-widget.html

Blog Post Navigation Widget

I went ahead and tweaked out my sidebar navigation code to provide similar functionality for blog posts.

Here's the code:

<!-- BlogPostNav Widget By Benfinnigan.com /-->
<style type="text/css">
.postnavbutton {
cursor: pointer;
cursor: hand;
margin: 1px;
padding: 2px;
background-color: #ffffff;
color: #000000;
border-style: solid;
border-width: 1px 2px 2px 1px;
border-color: #C0C0C0 #000000 #000000 #C0C0C0;
}
.postnavbutton:hover
{
cursor: pointer;
cursor: hand;
margin: 1px;
padding: 2px;
background-color: #dddddd;
color: #000000;
border-style: solid;
border-width: 2px 1px 1px 2px;
border-color: #000000 #C0C0C0 #C0C0C0 #000000;
}
</style>
<script src="http://benfinnigan.com/js/blogpostnav.js" type="text/javascript"></script>
<!-- End BlogPostNav Widget By Benfinnigan.com /-->

Please give me a link back if you swipe the code and please let me know if you find errors.

Sidebar Navigation Widget



So, I just finished up a little sidebar navigation widget that helps de-clutter the ole blog.

Here's the code:

<!-- Sidebar Nav Widget By Benfinnigan.com /-->
<style type="text/css">
.sidebarnavbutton {
cursor: pointer;
cursor: hand;
margin: 1px;
padding: 2px;
background-color: #ffffff;
color: #000000;
border-style: solid;
border-width: 1px 2px 2px 1px;
border-color: #C0C0C0 #000000 #000000 #C0C0C0;
}
.sidebarnavbutton:hover
{
cursor: pointer;
cursor: hand;
margin: 1px;
padding: 2px;
background-color: #dddddd;
color: #000000;
border-style: solid;
border-width: 2px 1px 1px 2px;
border-color: #000000 #C0C0C0 #C0C0C0 #000000;
}
</style>
<script type="text/javascript">
//<!--
var sidebarid = 'sidebar';
var widgetClassPrefix = 'widget ';
var widgetClassDisqualifier = 'draggable-widget';
var blnsidebaraccordion = true;
// /-->
</script>
<script src="http://benfinnigan.com/js/sidebarnav.js" type="text/javascript"></script>
<!-- End Sidebar Nav Widget By Benfinnigan.com /-->

To add the sidebar navigation widget to your blog follow these steps:



If you play with it, please give me a link on your blog somewhere. If you find errors, please feel free to post a comment.