A del.icio.us way to make a previous post list

I feel as though I've just cracked the DaVinci code!! I am geek.a.licio.us!!! (Watch, I'll write this post on how to accomplish this wonderful tweaking/hacking discovery only to find out someone else has.) But anyway, here goes.

Have you ever wanted a previous post list that wasn't the standard 'come with the blog' one? I have found a method that uses del.icio.us, Firefox and Greasemonkey. (But, if you use IE, it can still be done but not as seamlessly.) The end product produces a post containing all of your posts links and a small link in your sidebar to that post. (Look in my left sidebar under "Finding Your Way Around". Click on 'complete list of all posts'.)

First open your del.icio.us account and got to "Help/link rolls". In the show items box, make that a large enough number to include all your posts and many to come. This can always be changed at a later date if need be. For our purpose here, it will be 500. I left the title box, show tags, show extended boxes empty. This was just a matter of choice. Same way with bullets...I choose none. Sort is your preference also, but I picked alphabetically. The last box I left empty also. Copy the code in the box.


Second get Greasemonkey if you don't have it. Get this script, Blogger del.icio.us publishing and post categorizing helper, and install.

Third open your template and paste the code you copied from del.icio.us at the bottom of the page somewhere before </html>. It doesn't make any difference because you are going to alter the code a bit to make it invisible. Change the number in 'count=500' to 'count=0'.

Fourth create a new post. Pre-date it to before your first post. You will see 'Post and Comment Options' in the lower left corner of the post box. This is where you can change the date. In this post, paste the code you copied from del.icio.us. This time leave the 'count=500' as is. Publish the post. You will end up getting an error message about html blah blah. I pretty much ignored that and clicked the 'Status' tab and clicked the 'Link at del.icio.us' link. (That is the part the Greasemonkey script created.) It will take you to the del.icio.us site. Save it. And remember this part for future posts (and to back track and re-publish old posts) because clicking that link tells del.icio.us about your new post.

Fifth go back to blogger and republish.

If you look at that post, I went via the archives at this point, you should see a current list of all posts!!! Your sixth and final step is to open the permalink post link and copy the URL. I put this code in my sidebar where I wanted it:

<h2 class="sidebar-title">Finding your way around</h2>
Here is a
<ul><a title="Click to see the list" target="_blank" href="your permalink post link.html">complete list of all posts</a></ul>

Of course, you can edit it ever how you like. That creates a handy link to that post and your complete list of previous posts!!!

If there ever comes a time you want to delete a post, you have to go to the del.icio.us site and delete it from 'your bookmarks'.

That is my new way of showing a list of all posts. What do you think?

UPDATE: 9/15/06 With Beta, you are not able to use the Greasemonkey script. But, I still use my 'Previous Post' list by simply going to the del.icio.us site and tagging my post. Still works!

How to optimize web pages for faster loading

An optimized web page not only provides for a more responsive site for your visitors, but also reduces the load on your web servers and internet connection.

A visitor to your blog is always happier with a page that loads quickly. The problem is...How is that accomplished? Let me tell you what I found...optimized web pages is the answer. There are several methods of optimizing your web page.

One way is reducing page weight through the elimination of unnecessary whitespace. Page weight is by far the most important factor in page load performance. Tools, such as HTML Tidy, can automatically strip leading whitespace and extra blank lines from valid HTML source. You can remove whitespace (the spaces between your coding) from your html by hand. Doing this will take a lot of extra weight off the total size of your page and will speed up load time quite a bit.

Since each separate domain costs time in a DNS lookup, reducing the number of separate domains used to reference CSS, JavaScript and images reduces page load times. This may not always be practical, however, you should always use the minimum number of different domains in your pages as is possible. I went over my blog and saved all my images to my desktop as PNG (see below) and then saved them to my web host. Now everything (well, almost everything) comes from one domain.

You can also trim down your pages. In Blogger that simply means reducing the amount of posts on your main page. You can do this by going to the dashboard/settings/formatting/show. I selected five posts. I will see how that feels, and perhaps change it again later.

Remove items that are not necessary to your blog. A big offender for me is embedded sound files. They take ages to load, and they usually irritate the viewer. Try not to use Java applets...JavaScript will load faster. Ask yourself it that little clock in your sidebar is worth the time it takes to load? Especially since everyone has the time in the lower right hand corner anyway. Give your blog a good look over with a new eye for speed. Maybe you can eliminate a few extras that don't add to your blog.

Here's another way to help your page load quicker. Simply add the width and height tags to your img tags. For example, if your original image (img) tags looks like:

<img SRC="blogheader.gif">>

and the width and height of blogheader.gif is 30 by 15, change the above tag to:

<img SRC="blogheader.gif" width=30 height=15>

How do these tags improve the speed? It helps the browser determine the layout of your page before the image is actually loaded. It stands to reason, if you have many images on your page, taking time to load each image before calculating the final layout of the page would take longer.

Reducing your images will decrease load time. This Online Image Optimizer will reduce the file size of your gif, jpg, or pngs. It is a free online tool, and easy to use.

I have tried to save all my images as PNGs because they don't have the copyright issue and they load fast. But, if you still want to use gifs and jpgs, here is a good rule of thumb... If you don't need sharp resolution, choose GIFs over JPEGs, as GIFs generally load quicker. JPGs are generally best for photos, GIFs for anything else.

Using some of these techniques will trim your blog and increase your load time. This results in happier visitors...and return visitors!!

Thanks to these sites:
Chami.com Tips, WebWeaver.nu, Netscape Devedge

Hide/Show, Expand/Collapse - navigation element

I am excited...again. It all goes back to my sidebar and drop down menu issues. My sidebar must be organized, tidy, make sense, easy to navigate, pleasing to look at and serve a purpose. For other issues concerning my sidebar, I used these methods that are explained in these posts A drop-down menu alternative and Blogger 'Previous Posts' & 'Archives' Drop Down Menu. Each method worked for a different type of navigation problem.

I used the hide/show element not so much for navigation,

Hide/Show Element"The hide/show element allows a portion of the page contents to toggle between hidden or shown. There are multiple valid locations where hide/show can be used.
from www.oracle.com

but to make my sidebar organized and pleasing to look at. Once again I found help at the Blogger Forum. This time CptCanuck came to the rescue. I knew what I wanted...I just didn't know how to accomplish it. I wanted a way to put image links in a drop down menu. CptCanuck offered the hide/show solution which is so much better for this.

Here are the steps involved. It has three parts. First you must enter the following code in your style sheet:

.commenthidden {display:none}
.commentshown {display:inline}

Second put this between the <head> and </head> tags, but not in the style sheet:

<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>

Third put this in your sidebar where you want it to appear:

<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')"
>Title</a><br />
<div class="commenthidden" id="UniqueName"
></div>

This is what my code looks like:

<a aiotitle="click to expand" href="javascript:togglecomments('chickletlist')">I love Chicklets...+/-</a><br /><br>
<div class="commenthidden" id="chickletlist">
<a title="Blogger Forum, the Blogging community" target="_blank" href="http://www.bloggerforum.com/">
<img border="0" src="http://www.bloggerforum.com/images/bf5.gif" width="80" height="15"></a>
</div>

The UniqueName had me puzzled but CptCanuck explained that it had to be a name that was 'unique' from any other in my template. So, I called it chickletlist. Next give it a title. I chose I love Chicklets...+/-. The actual link is placed between the <div></div> elements. You may add links until you feel the need to move on.

Edit 5/24/06: Today I saw a post over at Freshblog that discusses the Hide/Show hack. Somehow by reading different links, I ended up at Singpolyma - Technical Blog and saw an awesome example of using Hide/Show for the whole sidebar!

Also see: Blogger Beta: Hide/Show, Expand/Collapse Labels

Blogger 'Previous Posts' & 'Archives' Drop Down Menu

I have drop down menu issues. I know this. But, I'm learning to deal with it. And with the help of thrbr over at Blogger Forum I'm on the road to recovery. I basically had everything I needed on my personal journal, except I couldn't figure out how to make the drop down menu stay within my sidebar and not expand with long post titles. Breath easy, I now know how, and I'm going to share it here.

For recent or previous posts: Look for this code in your template

<h2 class="sidebar-title">Previous Posts</h2>
<ul id="recently">
<BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>">
<$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
</ul>

and replace it with:

<select name="PreviousItemsMenu" onChange="location.href=this.options[this.selectedIndex].value;" style="background-color:#ffffff; color:#555555; font-family: Trebuchet MS; width: 123px;" >
<option value="/">Previous Items</option>
<BloggerPreviousItems>
<option value="<$BlogItemPermalinkURL$>">
<$BlogPreviousItemTitle$></option>
</BloggerPreviousItems>
</select>

For the archives: Look for this code in your template

<h2 class="sidebar-title">Archives</h2>
<ul class="archive-list">
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>

and replace it with:

<select name="ArchiveMenu" onChange="location.href=this.options[this.selectedIndex].value;"
style="background-color:#BDDEAD; color:#080808; font-family: Comic Sans MS; width: 130px;">
<option value="/">- Archives -</option>
<BloggerArchives>
<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
</BloggerArchives>
<option value="/">Current Posts</option></select>

To modify the menu to fit the style of your blog, the code in red text is the place to go. My examples have different colors, fonts and sizes just to show different options.

If an ever-growing list of links in your sidebar bothers you, this may be your solution. I'm not saying that it is the answer to all sidebar issues. But it really works nicely for certain tasks. Another option that is not a drop down menu, but serves basically the same purpose is discussed in this post A drop-down menu alternative. I use that method for a complete list of all my posts.

The Gimp: new custom header (Part 2)

After looking at Writing in Wax, a blog that has implemented some of my tips, I saw I left out something in this post, The Gimp: new custom header. I told you how to remove part of the border. Here is how you remove the rest of the border.

Locate this code in the CSS:

#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #222;
border-width:0 1px 1px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#777;
}

Delete border:1px solid #222; and that will remove the rest of the border.

Also see: Customizing your Header: Add an Image

The Gimp: new custom header

Ahhhh, the joys of the GIMP!! For those of you that are not familiar with it, GIMP is a program similiar to PhotoShop. The huge difference is it is freeware! I've had this program for a few months, open it up and play with it, but never really could figure it out. Plus, I didn't feel like reading directions. So, it went unused.

This week I felt the need to get a new, better, more personalized header. The ones you make online are pretty good, but, sadly, not what I was looking for. So, once again I fired up GIMP and gave it another look. After much mouse clicking, head scratching and guessing, you can see the result in my brand-new heading above!

"
GIMP is the GNU Image Manipulation Program. It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
"

I am overly proud of it. Or, just proud of the fact I finally got something from GIMP. I worked with layers, fonts, colors, images. I wish I could write a tutorial on how I did it, but I think it was more dumb luck. I will work with it more, and if I actually figure out how I did it, I will write a post on it and give a few pointers.

But, this I can tell you. If you are trying to put an image in the 'Minima' template header, you have to delete a couple of borders in the header and description. Plus, you have to get rid of the title somehow in the 'Settings' area. Blogger won't let you not have a title. So, I put a title in, made the color white to match the background and made the font 0%. The code looks like this:

#blog-title {
font:Georgia,Serif;
margin:5px 5px 0;
padding:20px 20px .25em;
border-width:1px 1px 0;
font-size:0%;
line-height:1.2em;
font-weight:normal;
color:white;
letter-spacing:.2em;
}

You will notice that there is no code for a border color. Leave the description box empty in the 'Settings' area. Blogger doesn't care if you fill that out or not.

What fun! I can't wait to play with GIMP again.

Two sidebars in blogger -Part 1

One reason I choose the Minima template in blogger is because of it's simplicity and the ease I am able to modify the design. One of the design modifications I made is adding another sidebar.

To get the sidebar in without distorting my header, I first had to add this code to the template. I put it right below the 'header' portion of my CSS sheet.

#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background: #fff url(Your header image if you have one) no-repeat top right;
}

Note the text in red is if you have an image in your header, which I do. Otherwise, let that part out.

What is a sidebar?
"
This is from the Blogger Help section...Getting more to the point, many bloggers find that a sidebar running down the page parallel to the main blog is a convenient spot to publish a short biography, favorite links, and other relevant information that you want near (but not in) your blog.
"

The next thing that you need to do is add this code to your CSS sheet:

/* Sidebar Content
----------------------------------------------- */
#sidebarleft ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;
list-style:none;
}
#sidebarleft li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}
#sidebarleft p {
color:#666;
line-height:1.5em;
}
#sidebarleft {
width:200px;
float:left;
}
#sidebarright ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;
list-style:none;
}
#sidebarright li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}
#sidebarright p {
color:#666;
line-height:1.5em;
}
#sidebarright {
width:200px;
float:right;
}

I'm sure there are a million different ways to do this. But this was simple and worked great for me, as you can tell.

7/12/2006 Please read Two sidebars in blogger- Part 2 for more information on implementing this code.

Tweaking Permalink in blogger

First, what is a permalink? In blogger's template, you go to 'Archiving' and choose yes for 'Enable post pages'. Post Pages give each of your posts their own unique web page, in addition to appearing on your blog's front page. The advantage to that is your readers are able to link to this particular post.

In the blogger posts, if you hoover over the timestamp a small popup will come up that says 'permanent link'. Unless someone is familiar with all the fine details of blogger, they won't find this link. This is a disadvantage. But, you can easily add the text 'permalink' to that time stamp. To do this, look for this code in your blogger template:

<a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a>

Then add the text Permalink to that code like this:

<a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$> Permalink</a>

Now the permalink is obvious to all your readers.

Make sure you put a space before the word Permalink or else your link will end up looking like this pmpermalink. Not pretty.