Blogger: Stylish Comment Counts

I recently received a reader request for numbered comment counts. Honestly, I'd not even considered such a feature before though it seemed a nice addition I could whip up fairly quickly. So I sat down to put something together. My goal was to create something easy to install and customizable while utilizing modern CSS3 features for a pleasing look and feel. I think I've accomplished that goal quite well.

I've broken this tutorial down into two parts. First is the basic installation of a short javascript and style information for the comment count. You may modify the look of your comments manually by editing these settings. Second, I've included an Advanced Configuration option which extends the Template Designer with several key color options used by this feature. It's optional, but if you're unaccustomed to manually modifying color codes it's a handy option to have. So, let's begin. Note: Internet Explorer prior to version 9 does not support some of the styles, while Firefox 3.5+ and Google Chrome do. 

Blogger: Full Size Images in a LightBox

If you've ever added images to a blog post using the latest Blogger editor, I'm sure you've noticed they automatically link to the full size source. These images are hosted by Google using a Picasa Web album associated with your Google account. It's quick and easy to use, for the most part, but I've always found something a little lacking in the implementation. Namely, readers navigate to a new page by clicking to see the full size image and must back navigate to continue reading. In the past I've dealt with this by targeting links to a new Tab/window. Now, I have something better.

View Full Size Images Without Leaving the Page
Over the past few years a JavaScript known as Lightbox has become popular. There are many implementations each with their own unique methods and design, but each shares a common theme. Large images are retrieved and displayed after a visitor clicks a smaller thumbnail. Typically the background is darkened so the image can be better viewed as well. In recent days I took it upon myself to implement a small, lightweight script to automatically provide this functionality for Blogger users.

Blogger: Highlight Author Comments

I have always found it a little frustrating my own comments seem to blend in with all the rest. A new visitor can figure out for themselves that the James posting is the same James commenting, but wouldn't it be nice if my comments stood out from the crowd a bit? As this blog has become gradually more active, I thought it was time to at the very least find a way to highlight my own comments so new readers can easily find them. This post details a simple approach I developed.

Differentiating Authors Comments
There are many ways to differentiate one poster from another. I've long used comment Avatars when available, while this associates a comment to an image it doesn't quite communicate which ones should stand out. This tutorial provides a basic starting point, from which you may customize to your hearts content. For now I've chosen to simply set my own comments, the only author on JSBlogStop, to a unique background color. Visitors should easily recognize this highlighting and I recommend it as a minimum, although special icons or text could certainly be included as well.

Blogger: Ad Sense Inside Posts

Automatically Place Ad Sense in Posts
A great many websites insert advertisements within content. The methods vary from innocuous to downright obnoxious. Sometimes people just do not know when enough is enough, keywords with hover ads are the worst. However, developers place ads this way because it's the most effective way to draw attention and generate revenue.

Blogger provides an easy method to insert ads above or below posts automatically. Advertisements in the sidebars is also easily done. The three most popular ad units with advertisers are the Leaderboard (728x90px), Medium Rectangle (300x250px) and Wide Skyscraper (160x600px). These units tend to get the best ads. However, each presents design problems with bloggers default setup.

Blogger: JQuery External Links in a New Window

Around the beginning of the year I introduced a simple javascript to automatically update links to another domain contained in the blog section to open in a new window. This script worked pretty well, but had a drawback of relying on the onload event for the page body. As a result for some time while a page loaded, links would remain unchanged. In order to address this shortcoming I've improved my method with the use of JQuery.

Blogger: Animated Collapsible Widgets with JQuery

I began experimenting with JQuery this week while working on another project. It is my first experience with the library, having been away from web development until recently. While reading the documentation and experimenting I came across a nice animation effect similar to the function of the Collapsible Widgets script from earlier this week. So, I thought why not take things to the next level and add those animations.

Adding the Script to Your Blog
First things first, let's add the script to the template. Open up Design->Edit HTML then search for the </body> tag. Copy and paste this script just above that </body> tag.

Blogger: Gadgets Above and Below Blog Posts

Blogger templates usually hide the ability to add gadgets to the Blog Posts column. They allow adding to the sidebar, tabs, footer, but not the main section. Most templates Page Elements editor allows gadgets to be dragged from another column then dropped above or below and I've used this feature myself. However, it would be nice to just add directly to the main column wouldn't it?

Altering a template to enable adding a gadget to the main column is really simple. Open up Design->Edit HTML and find the line below:

<b:section class='main' id='main' showaddelement='no'>

Now, change that no to a yes. Save the template, switch back to Layout and you'll see a shiny new Add a Gadget box over Blog Posts. Changing just that one word gives you a good deal more flexibility in blog design. It's easy to add custom artwork, advertisements, sharing buttons, just about anything with that one little change.

Blogger: Transparent Header with Simple Template

Recently I came upon a blogger looking to use a transparent image header with the Simple template. They wanted to have the page body background show through the transparency with the rest of the blogs color intact below.

Unfortunately, the Simple template applies it's background color to the entire content section meaning we can't simply set the header to a transparent background. Instead we're left to alter a number of styles to get the job done.

Making the Simple Header Transparent
Two styles applied to four total template elements do most of the work. Start by opening Design->Edit HTML and Ctrl+F to find /* Mobile. Now, paste these lines just above:

.header-outer, .content-inner { background-color: transparent; }
.main-outer, .tabs-outer { background-color: $(content.background.color);}

Blogger: Collapsible Widgets

Recently, I came upon a request for the ability to Show and Hide widgets. This blogger had some long lists in the sidebar he wanted to make easier to skip through and condense. Another blogger found a solution here to alter the widget template with a show/hide anchor in the widget title. It works, but it occurred to me this would be cumbersome to maintain since it requires every widget template be modified.

I've come up with an alternate solution done entirely through javascript. The widget templates are not touched and adding collapse functionality to multiple widgets is much easier. All it takes is adding my script and the ID of the widget you want to make collapsible. Copy and paste the below script into your template just above the </body> tag.

Blogger: More Header Customization

A previous article discussed how to include a second column in the header. I also often see bloggers unhappy with the header spacing. Either there's too much empty space, the header doesn't line up how they'd like or something else is bothersome. In this article I explain which styles give the most control over header spacing and show how to override them to your liking.

New Blogger templates include a large amount of empty space. This is the result of a few pesky styles tucked away in a stylesheet included at run time. These styles aren't visible in Edit HTML and it's easy to miss where exactly the problem is coming from. Much as the main body of a blog is affected by 3 Key Styles,  five styles dominate header spacing.

Blogger: Upgrade your Template Designer

The Blogger Template Designer is a wonderful tool for customizing a blog. Blogger includes a number of options for customizing colors and font, but for many the options are too limited. Something just doesn't look the way it should and you're left digging through HTML making a change, seeing how it looks and tweaking it until just right. Wouldn't it be nice if we could upgrade the template designer to speed things up a bit?

Groups and Variables
As I'm sure many have seen when opening the Design->Edit HTML page near the top of each template there are a lot of tags like this <Group name= and this <Variable name=... These are where all the Advanced options come from. All of the colors and fonts set there have entries in your template. Adding your own is a simple matter of adding a custom variable group, then tying them into styles.

Blogger: Filling Wasted Header Space

New Blogger supplied templates waste a lot of space in the header. By default they provide a locked header widget with a Title and Description. Unfortunately, this leaves a lot of screen real estate blank which could be put to better use. One common request I see is to place a second column where the site designer can place another widget. Here's how to do it.

Open up the blog template in Design -> Edit HTML mode and save a copy of your template with the Download Full Template link, this will let you back track if something goes wrong. Next, make sure the Expand Widget Templates box is Not Checked. Now search for <div class='region-inner header-inner'>. Below should be section that looks like this:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='false' title='Your Blog Title (Header)' type='Header'/>
</b:section>

Blogger: External Links in a New Window

Automatically Open External Post Links in a new Tab
Providing rich content to readers often requires linking to other websites. Most links cause a visitor to leave your site potentially losing a reader. One way to keep their interest is by opening specific links in another window or tab. Your site remains accessible, while providing rich content to your readers.

Unfortunately, Blogger's built in links editor lacks a new window option. These posted links open in the same window potentially losing a visitor in the process. To fix the problem we're left to edit the link manually to include target='_blank'. Of course we'd all like to skip the editing and I've come up with a script to automatically change post body links.