top-commentators

Top Commentators Widget for Blogger

This top commenters widget is a wonderful tool for giving back to your most loyal readers. It’s a great way to inspire your constituents to keep making useful comments on your blog. The widget displays links to to the top commentators websites and can easily be implemented in your blog’s sidebar.

Continue Reading

Like Us on Facebook?

Change-title-tags

Change the Title Tags in Blogger for More Search Engine Traffic

By default Blogger displays the blog title first, followed by the name of the post. As you might notice this is not good when it comes to SEO. It’s important for the name of the post to come before the name of your blog, especially when it comes to google search results. Learn how to make your post title show up first so that you can reel in more traffic from the search engines.

Continue Reading

Like Us on Facebook?

recent-posts-widget-thumbnails

Recent Posts Widget for Blogger with Thumbnails and Summaries

Display beautifully crafted links to Recent Posts on your blog with this widget. You can easily customize whether or not you would like to display thumbnails and post summaries for each post.

Install the Recent Post Widget on Your Blog:

This widget is very simple to install. Just simply click the button below to choose which blog you would like to implement it on.


How to Customize the Widget

Replace http://feeds.feedburner.com/theblogwidgets with your site’s feed.
(Example: http://blogname.blogspot.com/feeds/posts/default)

Features

  1. The Recent Post Titles
  2. Display Post Thumbnails
  3. Choose which blog posts to display (choose URL).
  4. Display Post Summaries
  5. Length of Summaries
  6. Display Post Date
  7. Number of Posts do Display
  8. Determine height

Like Us on Facebook?

tag-cloud

Blogger Tag Cloud Widget by Categories / Labels

This widget is perfect for blogspot users who desire a simple tag cloud for their Categories. The Labels Cloud can easily be implemented within the sidebar of your blog and will match your template wonderfully.

Steps for Implementation

Step 1: Back it Up
Always make sure to back up your Blogger Template before doing anything else!

Step 2: The Labels Gadget

Make sure that you have the Labels Page Element installed. If you haven’t already…
  1. Go to Layout >Page Elements .
  2. Click “Add a Gadget” and then add the “Labels” gadget.
Step 3: Locating the “Old Code”
  1. Now go to Layout >Edit HTML
  2. Make sure that the “Expand Widgets Template” box is unchecked.
  3. Now we need to search for the code that looks like this. Your code may look a little different. So try using your browser’s search tool to find type=’Label’.
Step 4: Replacing the “Old Code” with the “New Code”
  1. Once you’ve located type=’Label’, remove the whole line of code that looks just like the code mentioned in part 3 of step 3.
  2. Replace this code that you’ve just deleted with the code below:

Step 5: Previewing the New Tag Cloud

Before saving the template make sure to click preview. The new tag cloud should now be visible. If not, make sure that you’ve completed all the steps correctly.

Like Us on Facebook?

random_posts_widget

Random Posts Widget for Blogger / Blogspot

This widget can definitely bring some excitement to your blogger powered blog. Letting your readers surf your blog to the fullest extent by creating a link to a random post in your blog’s sidebar. Besides providing fun for your blog, hopefully your visitors will stay on your site for longer periods of time.

Installation and Customization:

  • Click button below to complete Installation:
  • Once you have installed the widget, you can change the link text. The default value is “View Random Post”. To change this, view the code and search for “View Random Post“, and change it to any desired text.

Those are all the steps necessary to implement the Random Post Widget to blogger. I hope you and your readers thoroughly enjoy it!

Like Us on Facebook?

related_posts_widget

Related Posts Widget for Blogger / Blogspot

Now here is wonderful hack for displaying links to related posts beneath each of your blog posts. The related articles are chosen from other posts in that same category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest.

Preview of Related Posts Links:

Error Fix:

If your related posts have not been working correctly:

  1. Search for this line of code: http://theblogtemplates.com/scripts/Related_posts_hack.js
  2. Replace the URL above with https://sites.google.com/site/widgetsforfree/scripts/Related_posts_hack.js

How to Add Related Posts Widget to Your Blog?

    1. Go to Layout >Edit HTML in your Blogger Dashboard.
    2. Back up your existing Template before making any changes!
    3. Make sure to check the “Expand Widget Templates” box.
    4. Search for the </head> tag.
    5. Add the following code just before the </head> tag.

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(“http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png”) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src=’https://sites.google.com/site/widgetsforfree/scripts/Related_posts_hack.js’ type=’text/javascript’/>

  1. Now search for <data:post.body/>. In some of the templates this code may look like this
    <div class=’post-body>
    or
    <data:post.body/>
  2. Add the following code just beneath the code you just searched for.

    <b:if cond=’data:blog.pageType == “item”‘>
    <div id=”related-posts”>
    <font face=’Arial’ size=’3′><b>Related Posts : </b></font><font color=’#FFFFFF’><b:loop values=’data:post.labels’ var=’label’><data:label.name/><b:if cond=’data:label.isLast != &quot;true&quot;’>,</b:if><b:if cond=’data:blog.pageType == &quot;item&quot;’>
    <script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;’ type=’text/javascript’/></b:if></b:loop> </font>
    <script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels();
    </script>
    </div></b:if>

 

  • Now Save your Template and you’re done!

 

Customization

    • In order to change the number of maximum related posts being displayed for each label, search for the code below (within the code given in step 7) and change the number “5” to any desired number.

max-results=5

If you have any questions on implementing this hack into your own blog, shoot me a comment and I’ll be glad to help!
Make sure to check out our other great Blogger Hacks as well:
Recent Posts Hack with Thumbnails; Recent Comments Hack; Sleek Search Bar

Special thanks to Real Trix!

Like Us on Facebook?