Blogger Tips & Tricks: Scrolling Blogrolls & Lists

And here I thought I wouldn't have any more posts for Blogger Tips & Tricks... Just goes to show you how much I know! Last week, as you may remember from my Blog Improvement post on Friday, Viv at Serendipity contacted me because she was having trouble commenting on my blog due to loading issues. I finally decided something had to be done because I didn't want people to decide it wasn't worth the loading time to visit my blog! Part of my solution included reducing the number of images in my sidebar, and the rest was devoted to turning my TBR list and Blogroll into scrolling lists. The most important part was the blogroll, because I believe loading the links can take a lot of time. Many of you asked about these scrolling lists, so I thought the topic deserved to be part of my Blogger Tips & Tricks series...

HOW DO I CREATE A SCROLLING BLOGROLL IN BLOGGER?

That's actually pretty close to what I typed in my Google search box when trying to figure this out. Ultimately, I used the information I found at Just Another Pixel, so rather than repost a version of their directions, I'm sending you to that site. It was relatively easy to take care of, but if you need any help from me, please feel free to drop me a note!

HOW DO I GET OTHER LISTS TO SCROLL?

Someone commented on my other post how turning my TBR list into a scrolling list made it look much more manageable. I couldn't agree more, especially since mine seems to grow weekly! Once I made my blogroll into a scrolling list, I thought I could de-clutter my other sidebar by doing the same to my TBR list. Ever the experimental dork once I learn something new with HTML, I decided to see if I could figure out how to do this based on the directions from Just Another Pixel and, more importantly, the code they used. A few minutes later I'm sitting on my "blogging love seat" shouting "I'm a genius!" (I'm so modest) to my husband, who looks at me like I'm a freak but quietly just says "yeah."

My TBR list is a text box that I added to my left sidebar in the Layout section of my blog, where you can "add a gadget." To make changes to it, I just manually searched for it in my Layout (under Edit HTML) after checking the "Expand Widget Templates" box and this was the code (you should be able to click on the pictures to make them bigger):


So if you take a look at the code below, I have added some lines in red, which was from the code at Just Another Pixel. These are the magic codes that will make your lists turn into scrolling lists.


Below are the lines of code so that you can copy and paste it into your own HTML templates. (As always, be sure to back up your templates before editing them, just in case you need to restore them after a mistake. It's happened to me, so I definitely recommend it!)



expr:id='data:widget.instanceId + "_container"' style='overflow: auto; display: block; overflow-x: no; overflow-y: scroll; height: 600px; width:190px;'
Please note that on the height and width fields, you can adjust those px values so that the list fits in your sidebar dimensions appropriately. So you can make the scrolling box as long or as short as you want to--I shortened mine to about a third of its original length.

Hope everyone finds this helpful! If you need any help, I'm happy to do what I can. And as I always say, when in doubt, search on Google and you can probably find a site with the answer to your question!

**ADDITIONAL NOTE**
Please check out the comments below. On May 20th, Jo posted a very helpful link with another option of how to make a scrolling list in your sidebar using an HTML/Javascript gadget. Thank you, Jo!! This is probably an easier option to work with so I encourage you to check it out! As for the blogroll, you're still probably stuck with editing your actual template, but at least you can have an easier time with your other scrolling lists!

Blog Improvement Note

So I just wanted to (auto)post a quick note, I spent Thursday night working on my blog after a blogger (Scrap Girl from Serendipity--thank you!!) mentioned that they were having a hard time with the page loading and getting comments to work. Only one other person had ever mentioned this to me--my mother. (I guess this is why they say you should always listen to your mother!) My sidebars had been starting to drive me a little crazy anyway--hey, you've seen the length of my blogroll--so I decided to do some Spring cleaning.

(1) I removed the awards from the sidebar and listed a separate header tab for all of those posts.

(2) I removed the picture links for my reading challenges--there was already a separate tab for them, so they weren't really necessary, anyway. In fact, I'll probably do away with the post that is for all three reading challenges, because there's not much point to that if I just link a "challenges label" to that tab...

(3) I converted both my TBR list and Blogroll into scrolling lists.

So far, everything seems to be working much faster and even I notice a difference. I didn't realize it was that bad, because our internet connection is a little shady sometimes anyway so I chalked it up to that. But I hope it's loading better for everyone else, too!

I decided to file this one away under Blogger Tips, in case any of you are having slow page loading problems, these little tips might help!

Blogger Tips & Tricks: Helpful Links

**UPDATED 6/9/09**

OK, I am FINALLY getting this post done--my apologies to any of you who've been waiting for all the links I've been promising. In reality, most of this information could probably be found in my other Blogger Tips & Tricks Posts, but I've tried to add a few other helpful sites here as well. Here are some of the best sites I've found with tips, layouts and more for Blogger:

BLOG TEMPLATES

The Cutest Blog on the Block ~ Specializes in 2- and 3-column templates for blogs, wish super easy "installation." For those of you who remember my first blog layout, that's the site I used.

Simply Fabulous Blogger Templates ~ The site where I found my current blog layout. There are some really great options on this site!

That Blog Place ~ Another site specializing in Blogger layouts. Some of them are reminiscent of TCBOTB, in my opinion.

TIPS, TRICKS & WIDGETS

Blogger Tips & Tricks ~ The home of some great customization tips and various useful widgets. If you recall, I mentioned that I must have unwittingly "stolen" their site name for my series of posts. Oops. :-)

Blogger Buster ~ Another great tips & tricks web site. This is where I learned to add a third column to an existing Blogger template...

Blogger Plugins ~ Another great place for widgets. I think I've used at least 5 or 6 from this site on my own blog.

Blogger Templates ~ The name says it all, though they have some great widgets available, too. Look for their header links to navigate through the site more easily.

Blogging For Good in the Modern World ~ I will forever be grateful to this site for helping me figure out how to get links to work in my header. They also have other helpful information, so check it out!

Blogging Tips ~ Thanks to Jo for mentioning this site. It will be a good resource for all blogging, not just blogger tips and tricks, and you can find it at Book Blogs on Ning. In my opinion, any sites with people exchanging helpful information about blogging are worth mentioning!!

Just Another Pixel - This site is where I discovered how to make scrolling blogrolls. It's actually someone's personal blog, but they have a few tutorials you might find helpful.

MISCELLANEOUS HELPFUL SITES

Photobucket ~ A great picture hosting web site--they offer several different methods for linking pictures--HTML code, direct link, etc. It's great for hosting your blog buttons and more! I've found their site to be one of the most user-friendly out there, and there's no purchase requirement to host your photos, it's 100% free!

FileDen - Another photo hosting site. It supports the favicon (.ico) files, in case the ICONJ site below is still not up and running when you're reading this post.

ICONJ ~ A Favicon generator and hosting site. This is the site I used to host my favicon, the butterfly you see in your browser's address bar.

Favicons from Pics - This little site will generate a nice little favicon kit for you, with the option to have just the .ico file or an animated .gif favicon. It's another great option in case ICON is still out of commission when you decide to work on a favicon for your blog!

HTML Color Codes ~ There are probably dozens of sites where you can find codes for HTML colors, but this is one of my favorites. I get a little obsessed with wanting my text and various generated images/widgets to coordinate with my blog's look & feel, so this site comes in handy for me.

Palette Generator ~ Thanks to Becky for mentioning this site! It's VERY cool... You can upload a picture and it will generate HTML codes and swatches that you can use to coordinate with the picture.

LAST THOUGHTS...

When in doubt... run a Google search! Any time I wanted to figure out how to do something in Blogger, I searched for the answer. Sometimes I'd have to type my query in several different ways before I found what I was looking for, but almost every time I managed to get an answer to my question!

Well folks, this pretty much does it for my Blogger Tips & Tricks series. If anything else comes up down the road I'll be sure to write additional entries, but for now I hope I've provided you with plenty of resources to answer your questions about Blogger! I may also come back from time to time and update this link post with other helpful sites, since I feel like I may be forgetting some now. :-) I know I've heard from several of you that have been able to make use of these posts or plan to in the future, and I'm so glad to hear it! If there's ever anything I can do to be of help, please don't hesitate to ask. I don't proclaim to be an expert, but I know what it's like to try to figure this stuff out on your own and wishing there was someone you could just talk to about it! :-)

BTW, if YOU have any helpful links, I would love for you to leave a comment with the link (and I'm sure others would, too)!

Blogger Tips & Tricks: Widgets

Welcome to another installment of Blogger Tips & Tricks. Sorry this one's been delayed a bit. I think the issues I had while trying to post HTML code on previous posts burnt me out on these a little. :-)

Here are links to my previous posts, in case you missed them or simply want to revisit them:
The Look & Feel
Functional Headers
Grab Buttons & Favicons

And this is completely beside the point but don't you love the word "widget?" Such a goofy word, yet such a wonderful little feature...

WHAT ARE SOME WORTHWHILE BLOGGER WIDGETS? (AND WHERE THE HECK CAN I FIND THEM?)

In my numerous searches and with the help of some of you out there, I have come across several widgets that I have enjoyed using on my site. In this post I'll tell you where you can find them and why I love them...

The Recent Comments Widget
I noticed several bloggers had a little section in their sidebar devoted to recent comments. I thought that was pretty neat, since it gives visitors an idea on what posts are generating discussion and interest on that particular blog. You can find the widget at Blogger Templates. It's a piece of cake to add, so why not try it out?

Top Commentators Widget
I first noticed a top commentators widget being used over at J. Kaye's Book Blog. She uses it to highlight which bloggers to feature in her blogroll, which is pretty cool. For me, it came in handy when I wanted to hand out the "You Don't Say - Super Comments Award." You can customize it to look at a certain range of past comments, whether it's the last 500 or 5,000. (They do recommend limiting it to around 500 of the most recent comments.) I think it's a neat little way to give some commentators a little recognition. You can find this widget at Blogger Plugins.

Blog Statistics Widget
This little widget simply shows how many posts you've written and how many comments you've received, in total. I thought it was neat, so I added it to my blog. You can find it at Blogger Tips & Tricks (uh-oh, looks like I accidentally stole that name for this series of posts... sorry :-/)

Label Cloud "Widget"
I don't know about all of you, but my Blog Post Labels list was getting a little out of control after awhile. Eventually, I did pare down the number of labels I was using, but I also added the code to turn it into a label cloud, making it take up less room in the sidebar. So I guess technically this isn't a widget, since you are editing HTML code, but since it's a sidebar item I'm featuring it as a widget. You can find the code and instructions at phydeaux3.

Translate This Blog Widget
I don't remember whose blog I saw this one on, but given how many people from outside the U.S. I've seen on various blogs, I thought perhaps it would be handy to have this little widget. I don't know how much use it will get, but it seemed like a neat addition to make my blog accessible to more people. You can find this widget at Blogger Plugins, again.

Actually, Blogger Plugins is a great web site and may just have all of these plugins I've mentioned here. I'm simply telling you where I first found the information to add these little gadgets to my blog. If anyone else has any great sidebar gadgets and widgets they'd like to share information about, please leave a comment below. I know a lot of people have some cool features on their blogs, some of which I may not have even come across yet. Remember, I'm just sharing with you the little bit that I've learned in trying to tweak my blog and make it my own. There's a whole wealth of knowledge on blogging just waiting to be discovered!

I hope you find all these tips useful. Please let me know if you have any questions!

Stay tuned for my final post on Blogger Tips & Tricks: Helpful Links - this is where I'll summarize all the useful sites I've found in improving my blog. It may be the most helpful of all of these posts and I may start wondering why I wrote the rest of these entries :-)

Blogger Tips & Tricks: Grab Buttons & Favicons

***UPDATED 12/17/09 (READ ONLY text boxes)***

Welcome to my latest installment of Blogger Tips and Tricks! I decided to group Grab Buttons and Favicons into one post. Though the two aren't exactly related, they are both about promoting your blog and its look & feel (discussed in Monday's post).

Just under my profile picture in the left sidebar, I imagine some of you have noticed my grab button, which I added 2-3 weeks ago. Well, I think I actually tried to call your attention to it in a post, too. Shameless, I know. :-) I've seen several great buttons out there, and have decided to display other bloggers' buttons just above my blogroll. Everyone likes a little link love, right?! With some of these buttons, I've had to copy them myself and save them in Photobucket so that I could link them to the respective blogger's site. Others have given me code that I can copy and paste directly onto my blog with little effort--that's what I was going for when I added my grab button.

HOW TO DISPLAY AND SHARE YOUR GRAB BUTTON

Making the button was easy for me--I created it the same way I made my header tabs that I talked about in Tuesday's post about functional headers. Many bloggers are fortunate enough to have theirs made professionally, which is even more awesome! So think about what you're looking for in a grab button. I think it's important that the button reflect the personality of you and your blog. In my case, I grabbed an image right from the header and customized it with my blog's name.

The hard part of the grab button was figuring out how to create the little text box in which I could display the code for the button. (By the way, again, you'll want to make use of a photo sharing web site, like Photobucket, for this little project.) Some of you may have wondered how I got those text boxes to show up in my post the other day. It was necessary in order to show you the code, rather than have Blogger automatically convert it into links and images, but now I'll show you how to do it!

Some of the code I showed you on Tuesday was actually for my site button, here it is again:





a href="http://www.melissas-bookshelf.com"><img border="0" alt="Photobucket" src="http://i116.photobucket.com/albums/o4/mlbraves03/Blogger%20Stuff/SiteButtonFinal.png" /></a>

If I hadn't placed it within that text box, you would see my grab button, linked to this blog, within this post. In order to create a READ ONLY text box that can't be edited, place this code before the code for your grab button: textarea rows="6" cols="24" readonly="yes". (PLEASE NOTE: You can adjust the number of rows and columns to suit the size of your sidebar area and length of your code. If you leave it with fewer rows, you'll see a scrolling bar show up. You may have to tweak the number of columns (really, characters) depending on the width of your sidebar/posting area.) At the end of the grab button code, you will use this closing HTML tag (MINUS THE EXTRA QUOTATION MARK, Blogger would not let the code display without it, darn Blogger):

<'/textarea> .

So, in Blogger, add your HTML gadget, copy and paste the code for your button once (this will be the actual button display) then use a text box to display the code for your button as I explained above. There you go! Once you have your own grab button, please feel free to let me know and I will add yours to my sidebar :-)

WHAT THE HECK IS A FAVICON?

So yeah, favicon (pronounced fave-icon) was a new word to me too--I discovered it when I wanted to create a logo to replace the Blogger logo in the address bar of browsers. Well ladies & gentlemen, that little logo you see up there is called a favicon. Who knew?!

Once you create the image you'd like to use--remember, these are tiny so it's best to keep it simple--there's a fabulous site you can use to (1) shrink it to 16px by 16px and (2) host the image for free! The site is http://www.iconj.com/. You will then be able to get code from that site, which you will place in the header area in your blog, using "Edit HTML," under "Layout."

**UPDATE** I noticed a few days ago that the iconj site does not seem to be working, and I'm not sure if that's a permanent issue or not. Here is another option for you. This site, html-kit, will let you generate a favicon (.ico) file from a picture you have stored on your computer. Just upload the photo and then download the Favicon kit that is generated. You can then use FileDen, a free photo storage site, to store the .ico file. So where you see a link to the iconj.com file in the examples that follow, you would replace that link with a link to your fileden file (which should look something like this: http://www.fileden.com/files/2009/6/9/2471226/favicon.ico). (END UPDATE)

That was the part where I actually had some trouble, so I hope to eliminate that for all of you reading this. *Fingers crossed.* When I first added the code, my favicon was not displaying on Safari, but I could see it on Firefox and Explorer. Well, as it turns out, there was another piece of code that solved that problem. Because I was trying to do this specifically for a Blogger site, as opposed to WordPress or whatever, it was harder to be sure I was finding usable information. Funny thing is, when I finally DID find it... the blog was written in French. Lol. It's been years... over a decade... since I had to read French. But, thankfully, I managed to figure out what I needed to do, and suddenly my favicon was visible to me in all of my browsers. Success!

The code I was given by the ICONJ web site was as follows (pretend the "<" and ">" are used at either end. Blogger is giving me trouble with posting HTML code today):

link href='http://www.iconj.com/ico/y/r/yrn412yzqv.ico' rel='shortcut'
For this favicon to display in all browsers, you actually need to add one more little bit of code just after rel=' shortcut icon'.

That code is: type='image/x-icon'/

So the final code looks like this (again, missing the opening and closing "<" and ">", be sure you include that in yours. DARN Blogger.):





link href='http://www.iconj.com/ico/y/r/yrn412yzqv.ico' rel='shortcut type='image/x-icon'/
Copy and paste the code you are given for your favicon--remember to include that extra piece I gave you above if it's not included--in the very top header portion of the HTML code for your blog, right after the "head" tag (normally between "<" and ">", but Blogger is not letting me use some codes today, even with the text box.) Voila! Your favicon is visible to the world!

Questions? Comments? Need more help or clarification? Leave me a comment! I'm still learning all of this, but if I don't know the answer to your question, I'll definitely help you find it!

***Special thanks to an email from a reader on 12/17/09 who pointed out that my text boxes were able to be edited by others. And thanks to Google Search I found out how to fix that with this HTML Tutorial on Textarea.***

Please stay tuned for the next edition of Blogger Tips & Tricks: Useful Widgets

Blogger Tips & Tricks: Functional Headers

Welcome to my second post of tips and tricks to make Blogger work for you! One of the features I began to turn green over when I saw it on other Blogger sites was a header with working links, tabs, or whatever you fancy. You can see examples on Nymeth's Things Mean a Lot and Becky's Book Reviews. (Yes, that's where the envy began, I admit it!) After fruitless hours of searching for a way to do that within Blogger's settings and layout page, I did some searching on Google, using phrases like "header tabs in Blogger" and "header links in Blogger." Finally I was able to answer the question:

HOW CAN I CREATE A FUNCTIONAL HEADER IN BLOGGER?

You know those "Add a Gadget" links in the "Page Elements" section of Blogger's "Layout" tab? Notice you don't originally have that option with the header? Well, here are instructions for adding elements to the header (meaning I could create tabs and links): Blogging For Good In the Modern World.

Finally! I could give up my header-envy and focus on other blog elements to be jealous about. :-)

You can choose to add your gadget above or below your current Header field. One quirk I haven't been able to fix: The additional element is partially hidden behind the sidebar and posting sections in the Layout. It doesn't appear that way on the actual blog, but for editing and moving objects, it's made it slightly more challenging. If anyone knows how to fix that, I'd be eternally grateful! See, these posts aren't all about me telling you what I know about Blogger, because I still have a lot to learn and hope that many of you will share your ideas with me.

But back to links in the header... Here's what I chose to do--you may think I'm nuts and will opt for an easier method. I decided to create buttons that had the look and feel of my blog, using a combination of Picture Viewer/Editor (on the Mac, you could use Paint on a PC) and Power Point to play around with text options, etc. (If you have access to it and are familiar with Photoshop, I'm sure you could do really amazing things with buttons, etc.) Anyway, Macs have this really cool feature where you can "take a picture" of just a part of what is on your screen, similar to the Alt-Print Screen option on PC's. **If PC's let you take a partial-picture, perhaps someone can share that info in a comment.** Anyway, I took a picture of one of the butterflies in my header, sized it down and popped it onto a rectangle of a coordinating color in my blog (all in the Picture Editor) and then I typed up some text (without a background color) in Power Point (again I tried to get a custom font color similar to one of my blog colors), copied & pasted it on the picture, tweaked the text box size as needed, and boom! A picture of a tab that could be linked back to a post on my site. Not to mention, we've also confirmed that I'm a HUGE dork!

I uploaded all of my "tabs" to Photobucket--if you aren't using a photo sharing web site, I highly recommend it. You'll be surprised how quickly you take up your Blogger storage space by uploading every picture you need, every time you use it. BTW, as for how to size your tabs, I have to be completely honest: I got lucky that all of mine fit perfectly across my header. But you should be able to determine pixel widths that would work to match up to the width of your Outer-Wrapper (mentioned in yesterday's post). Or, if you're just going with simple text links, the text will conform to the outer-wrapper width, and depending on how many links you have, you may end up with multiple rows when you look at the blog in your browser window.

Anyway, from there I added an HTML gadget to my header and pasted the code for each tab, one right after the other. (I would also recommend using an HTML gadget as opposed to Link Lists, so you can run the links horizontally under the header, assuming that is the look you are going for.) Here's an example of what the HTML code looks like from Photobucket (yes, it's ugly, I'm sorry):



<a href="http://i116.photobucket.com/albums/o4/mlbraves03/Blogger%20Stuff/SiteButtonFinal.png"><img border="0" alt="Photobucket" src="http://i116.photobucket.com/albums/o4/mlbraves03/Blogger%20Stuff/SiteButtonFinal.png" /></a>

Using the "a href" code above, it is linking to the picture's address on the photobucket web site. (The code that begins with <img...> is for the picture itself.) You can change that web address to link to the post with the information pertinent to your tab by replacing that code with the permalink of your post:



<a href="http://www.melissas-bookshelf.com"><img border="0" alt="Photobucket" src="http://i116.photobucket.com/albums/o4/mlbraves03/Blogger%20Stuff/SiteButtonFinal.png" /></a>

NOTE: I chose to center my tabs while I was adding them, since originally I wasn't sure if I'd have enough to fit across the header. You can do this by starting the HTML code with <center> and closing it off after you've pasted all your tab codes with </center>.


You can link text the same way you linked those pictures up there, as well. Simply use the code as follows:



<a href="URL of web site you want to link to">Text you want to link.</a>

If you want the link to open in a new window so that your site doesn't disappear from view, add this code right after the "URL you wish to link to"

target="_blank" (precede the word target with a space as shown in the example below)

So your new code looks like this:



<a href="URL of web site you want to link to" target="_blank">Text you want to link.</a>

You can add that target="_blank" code after any URL you want to open in a new window. So you could do the same with your tabs or any links you include in your blog posts. I have to admit I haven't bothered with it there because it would be too much trouble--I know most of us don't have all the time in the world to devote to our blogs--we need to post and move on!

Questions? Need clarification? Does this help you at all? Leave a comment and let me know what you're thinking!

Stay tuned for the next edition of Blogger Tips & Tricks: Grab Buttons/Badges

Blogger Tips & Tricks - The Look & Feel

Over the last several weeks, I have had many people stop by and comment on my new layout and several other changes I've made to my blog. I can't tell you how much I appreciate your enthusiasm and support! Many of you have asked questions about various different aspects of the changes--I've dubbed it my Blog Improvement Project--so I thought I'd write a series of posts devoted to how I learned (and am still learning!) to get the most out of Blogger.

It all started a few weeks ago when I was playing with my Blogger template and settings--I noticed an option to have your own domain name, which I discovered upon further exploration can be purchased through Google for $10/year. So I figured, why not?! Of course, along with doing that, I wanted to make my blog have its own look and theme, one that I intend to use for a long time so you think, "Hey, that's Melissa's Bookshelf!" I didn't necessarily feel that it had to look bookish--I felt a little daunted about tackling that after seeing so many amazing blogs that did have a bookish look & feel--but mainly, I wanted it to be inviting and attractive. I'm a huge fan of the colors pink and green (you should have seen my wedding!), so when I came across my current layout I decided it would be the one.

For help with other changes I wanted to make, I've basically just Google-searched what I was looking to do in Blogger (for example: adding header tabs, adding a favicon, creating a label cloud, setting up code for a grab button, etc.) A lot of what I've done has required tweaking existing HTML code, but you don't have to be an HTML expert to start playing around with it and learning what you can do with it. But I thought I'd list some helpful sites I've found for Blogger and how I used them--when you click on the link it will take you right to the post with the relevant information...

So, first things first...

HOW DO I CHANGE MY BLOG'S LOOK?

Blogger has a decent assortment of templates, but I always felt like most of them were a little boring (although all of them offer you the option to upload your own picture to the header). There are some great sites with Blogger templates out there--these are two I've used and had great success with. They both have easy-to-follow instructions on how to use their templates with Blogger.

(1) The Cutest Blog on the Block (where I found my original layout that some of you may remember; I first began using it last year for my personal blog and continue to today)

(2) Simply Fabulous Blogger Templates (the source of my current layout)

You can still upload your own picture to the header with these layouts, which is great for further customization. There are other template sites out there, but I've only had personal experience with these two, so I feel like I can safely recommend them to you! I've seen one blog that had managed to take a WordPress theme and apply it to their own Blogger template and it looked great!

DO I WANT TWO COLUMNS OR THREE?

I've gone back and forth on this one for awhile, and for now (and the foreseeable future) I'm settled at three. It all depends on your personal preference. I have a lot going on in my sidebars, so I preferred having two columns to organize everything. The Cutest Blog on the Block has template options for both, but you'll need to play with the HTML code to add the third column to your blog... Not to worry! It's actually not too difficult. Just be sure to save your current HTML template before you start tweaking! I used Blogger Buster to learn how to add the third column to my blog back when I had a TCBB layout.

Another option? Use one of their 3-column templates but edit the HTML template code ("Edit HTML" is a link found within the Layout tab of Blogger) to make your header, main posts and single sidebar a little wider and more accommodating. To do that, just look for the following lines of code in the Outer Wrapper section as you scroll down:

#outer-wrapper { (followed by some code)

#header-wrapper { (followed by some code)

#sidebar-wrapper { (followed by some code)

#main-wrapper { (followed by some code)

Below each of those you should see "px" measurements for the width of each "wrapper." (For example: width: 195px;) You can adjust those values as narrow or wide as you prefer, within the limits of the width of your outer-wrapper. If you like everything all lined up (like I do) the sum of the widths of the sidebar and main wrapper (and any additional "padding," as it's called in the code) should equal the "px" width measurements used for the outer-wrapper and header-wrapper.

OK, hopefully that makes sense and I haven't frightened any of you off too much. It's really not that scary, I promise! I didn't know much at all about HTML before playing with my own Blogger code. I learned a lot by trial and error. Just remember to save your original template before you start changing code, you never know when you'll have to re-upload it because you've made a boo-boo. :-D

By the way, with my current layout from Simply Fabulous Blogger Templates, the code was already set up with three columns, so that was a piece of cake!

Stay tuned for the next edition of Blogger Tips & Tricks: Functional Headers