My Blogger Portfolio Site

Journey to overhaul Blogger to produce something Unique

Since starting JS Blog Stop nearly a year ago I've spent a lot of time experimenting with Blogger and Google services. I wanted to see how much I could achieve using their free tools to complete projects for which they were not designed. Most of this time Blogger was the chosen test bed and I think I've learned quite a lot over the months and shared some interesting tools with everyone. Still, being a developer with a background in server side programming I've found the platform a bit restricting and difficult to work with. Most of this centers around the online templates and I've been searching for a better way to work.

Over the past few weeks I've done a lot of research and development with Dojo Toolkit and Less CSS with a Twitter Bootstrap foundation. I have to say Less CSS is fantastic and light years easier to work with as a developer than the template skin Blogger uses. I get the same kind of power with stored variables, but also get to mix in multi-browser support for CSS3 features through reusable single line commands. It's really phenomenal how much more quickly I can churn out CSS effects. Although this functionality comes at a price, no more template designer, I'm happy with the trade off.

Blogger: View Your Blog as Images

I've been hard at work on projects and contract work which has taken me away from this blog of late. It's been a really busy and my time working on Blogger tools isn't what it was. However, I did come up with a fun little not long ago I thought some readers might enjoy.

It all started one day while browsing Reddit.com when I stumbled upon a blog specializing in photo shopped celebrity pictures which for some strange reason removed their eyebrows. The pictures were a fun little time killer to break some tension, but wading through the near year old collection of 1 photo each day was taking a while. So, being as this blog was using Blogger I decided I'd use a script to pull their feed and spit out the pics so I could see them all in one big collage.

Blogger: Add Twitter and Facebook Comments

Due to an Upcoming change by Twitter in their API, Twitter comments will cease to function sometime early in 2013 at the latest. Unfortunately, this cannot be fixed reasonably and no further support will be available. I hope everyone that's used my script over the past year and a half has enjoyed it, but regretfully Twitter is no longer friendly to this type of usage and I've ceased development for their service.

Twitter and Facebook have come to dominate social media in the past few years. Although many other services exist, these two have grown to mammoth proportions dwarfing most others. As such there's a fair chance your blog readers have an account with one or both, though they may not have an account compatible with Blogger comments. In order to increase interactivity of your blog, wouldn't it be nice to broaden your reach by utilizing these two social titans?

In this post I detail how to implement both Twitter and Facebook comments into each blog post along side Bloggers own comment system. This tutorial results in comments which look and function exactly as those active on this blog at the time of publication. End result being a three tab paged comments section with active counts for the number of comments under each for the page.

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. 

Twitter Comments In the Works

Some time ago I added the Facebook and Twitter tabs into the comments section under each post. The FB comments box post has been quite popular and I've gotten several requests for a tutorial on setting up Twitter as well. Unfortunately, the setup of the Tweet box hasn't really met my expectations. The code to make it work is clumsy and it offered only the ability to authorize my Twitter application, then send tweets with no confirmation the tweets succeeded and no real conversation to contribute to. Yesterday, I began taking steps to expand functionality by writing my own Tweet Box rather than using the one provided by Twitter.

Blogger: Dropdown Menu Designer

Blogger provides a fairly bare bones set of tools for creating menus. More or less you're left to either accept generated links for Labels, Pages or required to build your own. These menus are primitive vertical or horizontal link lists. Blogger menus can get the job done, but I've always found them a bit underwhelming.

Take Your Menus to the Next Level
Over the past several weeks I experimented off and on to create a highly customized menu for this blog. This new menu includes drop downs which I think cleans the look up quite well while providing direct access to interesting posts, labels, pages, etc. I think this is much better than what Blogger offers out of the box, so I thought why not provide a tool so others can create their own.

Blogger: Add Forms to your Blog

Blogger provides many wonderful tools for posting to the web. You can write just about anything you like then make it available to the world, just friends or keep it for yourself. Although blogging is generally a public and often social experience usually in the form of comments. Unfortunately, this limits the conversation a bit to topics you've already posted.

Over the months I've been running this blog I've come to realize some visitors would like to talk about topics other than those I've posted. Some have asked questions through comments to existing posts, others by emailing my Blogger profile. This works to some degree, but I think it's better to provide a visible obvious point of contact to discuss other topics. Forms are a nice solution, but Blogger doesn't provide that ability out of the box. After some investigating, I found Google Docs have an excellent Form feature.

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 Gadget: Subscribe and Follow Update

I'm pleased to announce the Version 2.0 release of my Subscribe and Follow Gadget now with support for LinkedIn and YouTube! A couple readers requested support for these services in the past several weeks and I wasn't sure if I could add them or not. I took some time the past few days to organize and evaluate the artwork available and see what it would take to get done. As a result, I've redesigned the Gadget code to better accommodate updates and I hope to provide additional support more easily in the future.

Impact on Current Users and New Features
Those already using the Subscribe and Follow Gadget need not worry. Your gadget will continue to work just as it has. The code and icon images are intact and remain available. If you wish to add links for LinkedIn or YouTube you must upgrade to this new version. Also, Feed support has changed and no longer differentiates Feedburner feeds for ease of configuration. Instead it uses the default Blogger feed URL of the provided Blog URL. Unfortunately, there is no means to import gadget settings so you will need to reconfigure the Version 2.0 Gadget and remove the original from your blog.

Blogger: Tips with Google Checkout

Blogger released a new Gadget this week enabling you to collect tips using Google Checkout. Details on this feature can be found at Blogger Buzz. Put simply sign up for a Google Checkout merchant account, add the gadget and start collecting small donations from your readers. Sounds simple enough doesn't it?

The Devils in the Details
Unfortunately, Google Checkout is structured for high volume merchants and suffers much the same problem Paypal donations do these days. Namely each transaction incurs a minimum service fee of $0.30 plus a percentage based on your monthly volume. Dare I say most bloggers would fall under the $3,000 monthly threshold meaning each transaction takes a 2.9% fee on top of the $0.30 service charge. For instance a tip of $1.00 would see $0.329 taken by Google, I assume would round up to 33 cents. On the other hand a $10 tip would cost you $0.59. In all honesty, this just isn't a very sustainable or realistic model for low volume tip transactions.

Blogger: Simple Template, Remove Content Box Shadow

The Blogger Simple template has a box shadow placed to either side of the blog content. Some people like it, others hate it. I've removed it from all of my own blogs and helped a few others do the same. Luckily, it's a simple CSS Tweak you can do in just a few moments.

Making the Change
Open the blog in Design->Edit HTML view, hit Ctrl+F to search for .content-outer to find the below style:

.content-outer {
-moz-box-shadow: 0 0 40px rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 10px #333333;
box-shadow: 0 0 40px rgba(0, 0, 0, .15);
margin-bottom: 1px;
}

Delete the four box-shadow lines, then preview your changes. Poof the shadow along the sides of your blog content are gone. Save the template and you're done. Short, sweet and simple.

Blogger: Sidebars Display Below Posts Fix

My Sidebars are at the Bottom of the Page, Please Help!
One very common problem I encounter while browsing the Blogger help forums are people with their sidebars displayed below posts. Everything will be fine for a while, then suddenly poof your Archive, About and Follower gadgets end up at the bottom of the page. To many this appears a random problem with no apparent cause. Fortunately, it is avoidable and fairly easy to track down the issue.

The Cause of this Common Problem
As I'm sure most bloggers are aware, web pages are constructed with primarily HTML code. HTML requires opening and closing tags to compartmentalize a page usually with these tags <div></div>. Tag pairs define the contents of a given tag and established rules determine how those contents are displayed. Blogger extensively uses <div></div> tags to segment or divide a page primarily into columns. Most layouts come with either two or three columns each with it's own beginning and ending tag.

Blogger: Add Facebook Comments Count to Post Footers

Reflect All Comments in your Main Page Post Footers
A couple of weeks ago I posted a walk through to add Facebook Comments to your blog along side Blogger comments. This gives visitors two commenting options and the opportunity to increase reader feedback by using the most popular social network on Earth. Just today one of my own readers requested a feature I had not even considered. He'd like to include a Facebook Comments count with each post on the main page. Sounds like a nice feature to me so I set out to implement this request.

Placement and Branding Comments
This tutorial assumes you're using my Facebook Comments tabbed setup already and is constructed to use show both counts side by side with the same tab icons each service provides. Bear in mind this modification nearly triples the width the comment count footer requires, so make sure to leave plenty of room on the footer line for best effect. Adjust the footer position for the comment count by editing the Blog widget under Design->Layout until you're satisfied this modification has sufficient space. Note: if you've customized your Blog template this likely will fail and you'll need to alter the code manually in Edit HTML mode.

Blogger: Remove Sidebar Widget Title Margins

Remove Excessive Title Margins from your Sidebars

I come across this problem pretty regularly while browsing the help forums. Blogger gave us templates with excessively large title margins. It breaks up flow with an often large empty space regularly bigger than the text title itself. Luckily, this is a simple enough problem to remedy with a little CSS.

Quickly Override the Title Margin

The simplest approach to the problem is to open up your blog Design->Template Designer->Advanced->Add CSS box and insert this single line.

.sidebar h2 { margin-bottom: 0px !important; }

You should see the empty space greatly shrink in the preview section. Adjust the 0 value to find the right look for your blog, then just click Apply Changes in the upper right corner and you're done! That was simple enough wasn't it?

Conclusion

This minor CSS change can have a strong impact on the flow of your sidebar. Try out new values and perhaps consider adding some color or an image to the background for even more impact. There are a lot of options in CSS and you can customize the sidebar titles with them. Just remember the .sidebar h2{ } element and experiment.

Blogger: Label Summary with Thumbnails Widget

Maximize Blogger Labels with Thumbnail Summaries

A common complaint I've read from many Bloggers is how the lack of 'Categories' is a real sore spot. Blogger contends 'Labels' are equivalent, but objectors heartily disagree. For some time now I've contended the problem isn't so much a distinction between the two, but rather a lack of robust tools to exploit labels to their fullest.

I decided to address the Label problem by learning as much as possible about Google Gadgets, widgets and Blogger Feeds. After some time experimenting and working on demonstration code I built a pretty good understanding of the concepts their limitations and capabilities. I now have the ability to generate and process post feeds based on multiple Labels, the results mimic a Category and tag system. I am now ready to release a Widget script to leverage this ability.

Blogger: Dynamic Views Unveiled

Five New Ways to View Blogger

Several hours ago Blogger released an update to the presentation and viewing engine behind its blogs. These Dynamic Views are in effect templates built by their engineers meant to push the platform forward embracing cutting edge design and technology. Each option presents an enabled blog in a much different way than traditional blogs. The style is definitely Google with a twist of Tumblr and Apple thrown into the mixer.

Is this Really a Step Forward?

I find myself reviewing Dynamic Views and finding mostly negatives from a design standpoint. At this time I have no real control over these views. I can only infer through experimentation how Blogger will treat my posts within each, then adjust presentation accordingly. Some such as Flipcard and Mosaic are only suited to Photo/Video blogs. This blog being neither presented horrendously in both, yet I have no ability to disable the inappropriate view options. As this moment, it's an all or nothing proposition enabled by default settings. Older blogs may have some of the required settings disabled, check this post for more details.

Blogger: How to Add the Facebook Comments Box

Expand your reach with the Facebook Comments Box 
Comments are an integral method of interacting with visitors in a meaningful way. They are an opportunity to engage in productive conversations and build new relationships. You want to be accessible, but the ever present problem of comment spammers must be dealt with. In order to avoid Anonymous spammers, setting your blog to Registered users is helpful. Unfortunately, a good number of visitors may not have the required account.

The Facebook comments box is a convenient way to expand comment accessibility. Facebook has the largest base of users in the world and their reach continues to grow. Chances are readers have either a Facebook account or one Blogger accepts. In this article, I'll show you how to add Facebook comments along side Bloggers built in system.

Blogger: Add a Facebook Like Button to Posts

Get more social with One click sharing to Facebook 
Facebook recently upgraded the functionality of several developer plug-ins. These new scripts are a snap to include and function very smoothly for visitors. No need to manage authentication or ask a user to log in, Facebook handles everything in convenient IFrames. Any reader with an active Facebook account need just visit your site and they have access to several nice features.

The Like button has long been a means of showing approval for interesting content. Facebook recently upgraded the functionality to include well constructed wall posts similar to a shared link. The page title, address, a thumbnail and brief snippet of text are included. As a Blogger this is a great opportunity to unobtrusively get more eyes on your content by allowing visitors convenient One click sharing.

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.