Want a sidebar widget linking to your favorite blogs?

Do you want a little sidebar widget that will highlight posts from your favorite blogs? I figured out a way.

...Here is your chance to show your readers what you find interesting on other blogs....

Could it be a mashup? Well, maybe not, but close enough for me. You will need to open a del.icio.us account. I personally have two accounts. One exclusively for tagging posts from my blog and one for this purpose. We will be discussing the latter which I named anniebluesky. After opening your account, go either to 'Help' or 'Settings'. Then click on 'Linkrolls'. This is where you configure your widget.

1. First box is 'show'. Default number is 15, but for my purpose I thought 5 would be better.
2. Second box is 'title'. Default is my del.icio.us. which I left as is. I titled the sidebar section 'Blogs on Blogging'.
3. Third box is 'show tags'. I left it blank.
4. Fourth box is 'show notes'. Since I wanted to include part of each post, I checked it.
5. Fifth is the 'icon' selection. Up to you what you like, if anything.
6. Sixth is the 'bullet' selection. I liked the run of the mill bullet.
7. Seventh is 'Sort chronologically or alphabetically'. This also is up to you, but I chose chronologically.
8. The last 2 boxes are 'show your del.icio.us username' and show 'add me to your network' link'. I checked them both.

When you are done there, scroll up and copy the code and paste it in your template where ever you want to see it.

Next, go back to the del.icio.us to the help section. Under 'Browser' you will see 'Internet Explorer buttons' and 'Firefox extension'. Click on the browser you use and follow their instructions. This will put a little del.icio.us box and tag on your upper toolbar. They give very good instructions, along with visuals (I love visuals) so it is pretty easy to install and use.

Speaking of use. You are ready! When you are browsing and find a post you want to highlight in your blog, click on the title so the post page opens. In step #4 it enables the widget to show notes...so you highlight how much of the post you want to show in your sidebar (no need to include the title...that is put in automatically) and then click on the 'Tag' icon in your toolbar.

That is pretty much all there is to it. Since I put mine to chronologically and limited it to 5, it automatically puts the newest one to the top and removes the oldest! Spiffy.

Update: 11/08/06 I edited this a bit...removed the icons and my tag line. Slimmed and trimmed it down.

Fixing the '1 comments' bug in Blogger Beta

Once again, Hans has dissected the Blogger Beta template and found a cure for the '1 Comments' bug. If it bothers you and you would really like to have it read '1 Comment', here is how to do it.

1. Open the Blogger editor
2. Go to 'Edit HTML'
3. Expand Widgets Template
4. Find:

   <b:if cond='data:post.allowComments'>
   <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
   <b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
   <b:else/>
   <data:post.numComments/> <data:top.commentLabelPlural/>
   </b:if>
   </a>
   </b:if>

5. Remove :<data:top.commentLabel/>
6. Replace with: comment

Thanks (again) Hans!

Improving the Label/Archive Pages with Peek-a-boo View

Ramani over at Hacksphere is at it again. This time he outlines how to improve the Label/Archive pages in his post: Peek-A-Boo view of posts in Label/Archive pages . The default action when a label/category is selected is a new page with all the the posts in their entirety. This hack implements a method for readers to expand/collapse a post title after clicking a Label on the main page. Try it by clicking on a label in my 'Category Cloud'. Much easier navigation!

I feel Ramani has given good instructions, so I won't go into the specifics. I will warn you...when the widgets are expanded, they can be hard to follow. Just be slow and precise, follow his instructions, and all will go well.

Before starting, be sure to save your template. Then start editing. If you have a problem, let me know and I will try to help.

My Category Cloud...finally

I have wanted a true category cloud ever since I started blogging, and discovered the whimsical category cloud. What is not to love? All my words...floating around...different colors...different sizes.

Now with the coming of Blogger Beta are "Labels". Nice. Not perfect...yet. But, none the less, nice. I still wanted my cloud.

Then I found Code for Beta Blogger Label Cloud which has forever changed the face of my blog.

I actually have my cloud, and when a category is clicked, a page from my blog opens up with all the posts related to that category. Just as it should be. phydeaux3 has give simple complete, easy to follow instructions that produce a functioning label cloud. And he tells you how to modify the code to change the colors and font.

Thanks, phydeaux3!!

Update 9/8/06: If you are like me, and have special colors that aren't on the RGB Color Code Chart, I found a Hex-RGB Color Converter that will convert your lovely hexidecimal colors to RGB.

Blogger Beta - Labels

Little things make me crazy. One of those little things was the 'Labels' at the end of my posts. I wanted them to start on a new line all to themselves. At first I thought I was doomed to have willy-nilly label lines that did whatever they had a mind to. But, not so! On a whim, I went into the 'Page Element' editor and opened 'Blog Posts'. In the box that you put what you want to call your labels, I added this:

<br>Labels

That was all it took. Another little thing conquered!

Get your own ClusterMap

I've been asked to do a little tutorial on installing a ClusterMap on a blog. Well, the good news is...it is simple to install. The bad news...there is a pause in new registrations until the first part of September 2006.

To install after they start accepting new registrations, click on the above ClusterMap URL, click on 'Get One'. It has been awhile since I did it, but I think I went through a registration process (my username, password, blog address...the normal information), then I was given a code to put in my template.

On my blog, it is in the first sidebar. I installed it in the 'Page Elements' section, 'Add a Page Element'. At this point you can either choose a text or HTML/Javascript element. (I used text.) Click on 'Add to Blog'. Then click on 'Edit HTML'. Paste your code there. Put a title on if you wish. Click 'Save Changes' and you are done!

Sticky Message Board

Hans posted a wonderful tutorial on adding a little sticky message board to the top of your blog. It was extremely easy to follow, and I had it up and running within minutes. I made a few modifications so it would blend with my blog. Here is what I did.

First to the "/* Variable definitions" I added this:

<Variable name="bgMsgBrd" description="Messageboard Background Color" type="color" default="#EFEFF7" value="#EFEFF7">
<Variable name="bordercolor" description="Messageboard Border Color"
type="color" default="#336699" value="#336699">
<Variable name="colMsgBrd" description="Messageboard Text Color"
type="color" default="#555555" value="#555555">

Second to the CSS style sheet I added this with the modification for my fluid template:

/* Messageboard */

.msgbrd h2 {
display: none;
}

.msgbrd .widget-content {
width: 99%;
background-color: $bgMsgBrd;
border: 1px dotted $bordercolor;
color: $colMsgBrd;
font: $bodyfont;
}

Third, to the template I added:

<div id='content-wrapper'>
<div id='message-board'>
<b:section class='msgbrd' id='msgbrd' maxwidgets='1' showaddelement='yes'/>
</div>

Last I opened the Layout Editor and under the header was a new element. I clicked 'Add a Page Element' , and selected 'Text'. All that was left to do was type my message.

Thanks, Hans!!

Blogger Beta - all moved in (or Widgets are wiley)

It is a done deal. I moved in officially to Blogger Beta. Not too bad. A few casualties...all widget connected. I'm still working out the bugs. It appears only one script per widget. I would really enjoy having at least two scripts in a widget. For example, I edited my Technorati widget in the previous Blogger to have a link for del.icio.us also. (You know...add me to blah blah.) It was all nice and neat in one area on my sidebar. I can't get both links/scripts into one widget. I'm working on that one. And I'm picky about my sidebars so I just removed the del.icio.us link for now.

Another example. My 'Creative Commons' button. With the old Blogger I was able to have '2006 ANNIEBLUESKY' centered nicely under the CC button. For the life of me, I couldn't get it to center in the Beta widget. So I removed it, and made a hoover pop-up. Not solved exactly...a work-a-round.

Other than that, it went pretty well. I did it slowly in a practice blog, and copied all of Blog U to it. Piece by piece. Working from the top down. When I had it all in, and it looked like the orginal blog, I downloaded the template to my harddrive then uploaded it to Blog U. (whew)

I haven't even addressed the 'Labels' yet. Guess I'll stick a few on this post and see what happens!

Blogger Beta - Fluid 3 column template

I'm forging ahead with Blogger Beta experiments. I put in three columns...fluid no less! Once again, thanks to my expertise and incredible knowledge of coding Hans and his post Adding a Second Sidebar to Your Template.

Here are the steps I took:

1. I read Hans post :-)
2. I removed the #sidebar-wrapper
3. I added a #leftsidebar-wrapper and a #rightsidebar-wrapper
4. I made these changes to the #outer-wrapper, #main-wrapper, #leftsidebar-wrapper and #rightsidebar-wrapper

   #outer-wrapper {
   margin-left: 5%;
   margin-right: 2%;
   width: 93%;
   padding:0px;
   text-align:left;
   font: $bodyfont;
   }
   #main-wrapper {
   width: 50%;
   float: right;
   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
   }
   #leftsidebar-wrapper {
   width: 22%;
   float: left;
   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
   }
   #rightsidebar-wrapper {
   width: 22%;
   float: left;
   margin:0 0 0 25px;
   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
   }

I'm no more surprised than you. Just a few more tweaks here and there, and I believe I may be ready to switch this blog over to Beta completely!

Blogger Beta - adding a header

Hans was kind enough to leave a comment on Blogger Beta - First experience with editing HTML as to a cleaner way to get my header to show as I want. Here is part of his comment (bold is my editing):

Hi Annie, good to see a fellow-blogger exploring this unknown territory. I guess your approach to replacing your title is quite good. It looks good at your testblog, so it works like it should.

I have a few suggestions for the coding:

You could remove the border-statement from your header-wrapper, instead of setting it to 0px;
If there are no other calls to the $bordercolor-variable, you can remove this variable from the css; this will remove it from the fonts&colors layout editor as well.

You have made the title invisible by setting its color to white and its size to 0 (is that correct?).
You could instead insert the code
display: none; in the css-part of header h1.

I did it, and it works! I suppose there are other ways to accomplish the same thing, but I like this. It is clean and simple. Thanks, Hans!

Blogger Beta - First experience with editing HTML

I decided to create a practice blog to...well...practice on. Turns out to be one of my better moves. Initially I thought I would be clever and simply paste my old template into the new 'Edit HTML' area. Turns out not to be one of my better moves. The red error messages flew at me fast and furious. Not to be defeated, I changed my strategy. I retreated back to their template, Minima.

I found the new template code to be different and contained things I have no idea what they are or do. Even after reading the instruction manual. *sigh* I'm sure an understanding will come at some point in time. At least I hope so. Until then I will do what I can which relies heavily on trial and error. The good part about my method, is I learn as I go. My new plan was to take this template and make it look like my orginal one with the added widgets and labels that I want to incorporate into my blog. The best of two worlds. Plan of attack...start at the top and work my way down. The header it was.

I wanted to replace the header with mine as I have it in my orginal blog. So, without further ado, this is what I did:

Change:
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;

To:
#header {
width:660px;
height:161px;
margin:0 auto 10px;
background: #fff url
(http://YOUR HEADER IMAGE URL HERE) no-repeat;
}

----------

Change:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

To:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}

----------

Change:
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

To:
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
color: white;
font-size:0%;
}

Victory was mine! I was able to replace the header with my own, remove the border and make the Blogger title 'invisible'. Now, I'm not claiming my method is proper coding. I realize that those of you with much more knowledge in these areas will look at what I have done and shudder. But, it worked for me.
I'm already thinking about what to tackle next!

Update: see Blogger Beta - adding a header