Blogger Hacks

Star ratings is a new feature currently available through Blogger in Draft. This enables you to add a widget beneath your posts which readers can use to rate your articles on a scale of 1-5, like this:

If you use a default Blogger template, you should be able to activate this feature right away when logged through Blogger in Draft: simply go to Layout>Page Elements and edit the “Blog Posts” widget to activate the display.

However, those using a customized or third party template will need to add the required code to their templates first. In this tutorial, I’ll explain how you can add “star-rating” functionality to your customized Blogger template.

To use the “star ratings” feature, you will first need to activate this through Blogger in Draft (it’s still in beta, and not yet available for use in the regular Blogger dashboard).

Log into Blogger in Draft and choose the blog you wish to work with. Then go to Layout>Page Elements, and click the “Edit” link on the “Blog posts” widget.

This screen offers many options for you to add (or remove) from the posts section of your blog. If you scroll down a little, you’ll see the “star ratings” option. Tick this option to activate this setting for your blog, then scroll down to save your settings.

If you are using a default template, you should see the star ratings widget appear on the post pages of your blog. However, if you have customized your template (or are using a third party template), it is likely that your template does not include the code required to make the star ratings display.

Here is how you can add the required code for star ratings to your non-standard Blogger template

Step 1: Backup your existing template. I assume you know it very well so I am not gonna explain it again.

Step 2: Expand widget templates and copy the entire code some where in Notepad or something. In case something goes wrong, you have the entire widget code.

*Step 3: Go to ‘Layouts’ and under ‘Blog post’ widget, select Star rating. And save the changes.

*Step 4: Go to ‘Edit HTML’ and select ‘Expand widget templates’.

Step 5: Search for this line of code:

<p><data:post.body/></p>

Step 6: Copy the following code right after the above line of code:

Click here For The Code!

Step 7: Now again search for following code:

<b:include name=’feedLinks’/>

This line you may find several times, so make sure you seek for the last instance at the bottom of the code which should ideally be before the start of sidebar codes. So when you see this line, it should look something like:

<b:include name=’feedLinks’/>

  </div>

            </div>

        <div class=’cont-bottom’/>

        </div>

        </div>

        </div>

 </b:includable>

</b:widget>

</b:section>

….

….

<div id=’sidebars’>

Step 8: Copy the following code right after the line mentioned above:

<b:if cond=’data:top.showStars’>

    <script src=’http://www.google.com/jsapi’ type=’text/javascript’/>

    <script type=’text/javascript’>

      google.load(&quot;annotations&quot;, &quot;1&quot;);

      function initialize() {

        google.annotations.setApplicationId(<data:top.blogspotReviews/>);

        google.annotations.createAll();

        google.annotations.fetch();

      }

      google.setOnLoadCallback(initialize);

    </script>

  </b:if>

Step 9:Preview your changes without saving it. You should see the star rating in each post on your blog posts on the main page itself.

Step 10: That’s it, save your template if satisfied and enjoy the Star ratings on your blog.

Also let me know if this post helped you in customising your template by dropping a comment here or at least leaving your rating.

Speed Up Your Blogger Page Load Time – Compress Your CSS

You have to admit, most free 3rd party Blogger templates that you download are a mess. You open up the xml file and it’s a long and ugly-looking beast of code spaghetti. If you’re like me, you prefer a nice and neat template (even though you’ll be the only one seeing it) and you’ll want to tidy it up.

Most of the code you don’t want to tinker with but the .css code (the part that styles your entire blog with images and colors) is where some people like to change font colors, sizes, or even just space it out properly so it’s important that it’s not only neatly organized, but also properly aligned.

More importantly, did you know the more lines of code your template has, the longer it takes to load in a browser? So your 1,500 lines of code in your newest Blogger template could really be much shorter in size, thus speeding up page load times for your visitors. The slower your site, the more likely a visitor will be deterred and not wait for it to load up.

So here’s a neat trick to optimize your template. I’ve started doing it with some of the newer templates now being hosted on eBlog Templates. You’ll want to do what’s called “commpress your css” into a much smaller format. There’s a site I use called CSSDrive that offers a free web-based CSS Compressor. All you do is select a few basic options like compression mode and comments handling and then paste in your css. The css is the code between the and tags.

Make sure you backup your template code before doing this! Some people might not like how the css looks after it’s compressed so it’s best to have a backup. You also might make a mistake and copy the wrong sections which could screw up your template code. Bottom-line, backup your template before doing this.

After you click on the “Compress-it!” button it will go through your .css code and shrinks it down. Essentially it removes unnecessary white spaces and better organizes each css element into one line. Here are the results for one of the Blogger templates I compressed.

My xml Blogger template was originally 1,286 lines of code and after the css compression was done, it dropped it down to 914. Now that’s not a huge difference (14%) and you probably won’t notice a difference when you load up your blog with the new code, but every little bit helps. Also, some template code might be messier than others so the size decrease could potentially be a lot more.

I also just ran the normal compression mode and wanted to keep my comments so if you go with the super compact mode and strip out all comments, you can compress it even further.

This tool can be used for WordPress blogs or any other websites actually. Most of the Blogger templates I come across are the ones in need of a code clean up, however. So if you’re ready to give CSS Compression a shot, check out CSS Drive’s free tool and compress away!

How to Setup FeedBurner on Blogger

Blogger is a great blogging platform which almost anybody can use. If you already have a Google account, it’s easy to setup (if not you just need one) and start blogging within minutes. The downside of using Blogger is the lack of built in features that are in my opinion essential to have. I’m going to share with you some of my favorite free Blogger add-ons that I highly recommend using. The first of the bunch being FeedBurner

Step #1 – Setup a FeedBurner Account

FeedBurner’s free rss service (now owned by Google) is very powerful. It allows you to place an rss image like the ones you see below on your blog so your readers can easily subscribe to your blog content. FeedBurner also offers a way for your readers to subscribe by email so everytime you post, an email will automatically get sent to them. Other features include seeing how many blog subscribers you have , which posts are most popular, as well as many other rss feed statistics. You’ve probably seen images like these on websites and especially blogs. This is what they are using. Create your free account now.

Step #2 – Create Your Feed

The main piece of information you’ll need when setting up your FeedBurner account is your original blog feed url. All blogs automatically come installed with a feed but nothing is really done with it. That’s where the magic of FeedBurner comes in. Your feed url will look something like this:

http://yourblognamehere.blogspot.com/feeds/posts/default
http://yourblognamehere.blogger.com/feeds/posts/default

Feedburner offers auto discover so you don’t even need to figure out your feed url. Just enter your Blogger url right on their home page and it will automatically discover your feed. If you have more than one blog, it will list them all so select the blog you’d like to setup.

For bonus points and just for fun, paste the url into your internet explorer browser and watch what comes up. It’s basically the raw text and images from your blog posts. Pretty neat huh?

Follow the rest of the setup wizard and you’ll eventually come to the configuration page. Here’s where you want to select the extra features like “track item clickthroughs” and also check the “FeedBurner Pro” box. They used to charge $4.95 a month extra for this service but ever since Google acquired them, they offer these extra features for free. Why not take advantage of it?

Click the Next » button to finish the setup process and enter the feed management interface. Now you’re now ready to make your FeedBurner feed available on your Blogger site!

Step #3 – Point Your Blogger Feed to FeedBurner

Once you setup an account on FeedBurner, you’ll need to make sure all feed traffic for your blog content goes to your FeedBurner feed. This helps make sure your FeedBurner stats are more accurate and even any existing subscribers to your ‘Original Feed’ are routed through FeedBurner.

-The first step is to get the url of the new feed you just created. When you setup your Feedburner account, it asked you for a name of your first feed. For example, our feed on eBlog Templates looks like this:

http://feeds.feedburner.com/templatestreasure

Here’s the screen where you’ll find your new feed:

Once you click on the “edit feed details”, you’ll see this screen. Notice what I highlighted in red? That’s the feed url you need to copy and save.

-Now you’re going to log into your Blogger account and head on over to the “Settings” => “Site Feed” tab.

Scroll down until you find the “Post Feed Redirect URL” text box and enter the FeedBurner feed url you wrote down earlier. It will look something like this:

http://feeds.feedburner.com/templatestreasure

Make sure you type in your entire feed address including the “http://” portion otherwise you’ll have problems later. Click the “Save Settings” button and you should see the message “Settings were Saved Successfully”. Now Blogger will redirect all feed traffic for your blog to your FeedBurner feed which is exactly what we want!

Step #4 – Promote Your FeedBurner Feed on Your Blog

So now that everything is wired up properly we just need to promote it using one of those cool rss buttons on our blog. FeedBurner calls these icons chicklets (cute huh) so that’s what we’ll call it. Switch back over to your FeedBurner account and click on the “Publicize” tab.

Then on the left side find and click on “chicklet chooser” and select one of the icons which will end up on your blog.

Then scroll down to the bottom of the page and click on the drop-down. You’ll want to select “Blogger” to add the chicklet as a widget to your blog.

After you click the “Go!” button, Blogger will open in a new window and you’ll need to follow the prompts to continue to add the new widget.

Once you click on “Add Widget”, it will take you to your Blogger page elements layout where you can arrange the new FeedBurner widget. Save your layout and you’re done! You should now have a cool-looking rss feed icon on your blog where anyone can easily subscribe to your blog. Remember to login to FeedBurner often to check out your stats. You can accurately see the number of subscribers and also get a good idea of what people are reading. It helps you decide the types of things to write about in the future!

For extra credit, see if you can add the Email Subscription widget to your blog. It’s a great option for people to use who don’t understand quite what rss feeds are. I’d also recommend spending some additional time browsing around FeedBurner’s interface because there’s lots of other cool options for you to configure. The best things in life are always free.