Sunday, May 9, 2010

Add a Facebook Share Button to Blogger

An easy way to have your readers share your articles on Facebook is to add a Facebook Share Button to your Blogger blog (Blogspot blog). It only takes a few minutes to put a Facebook Share Button on your Blogger blog.

Sharing your content on Facebook is an excellent way to attract many more visitors to your Blogger blog. By adding a Facebook Share Button to Blogger you will allow your content to be shared with all the friends of your blog visitor through their Facebook account.

When a visitor to your blog clicks on the Facebook Share Button Facebook collects post details like your blog name, post title and the first few lines of the content including the images and other media.

The Facebook Share Buttons look and act very similar to the Twitter Retweet buttons by Tweetmeme.

Steps to Put a Facebook Share Button on Blogger (Blogspot)
There are 2 different Facebook Share Button styles to choose from: a large button and a compact button. The following codes will place the Facebook Share Button at the top of the post only on the post page. If you wish to have the button appear on the homepage as well you will need to remove the if statement.

<b:if cond='data:blog.pageType == "item"'>
Facebook Share Button Code
</b:if>
  1. Login to Blogger
  2. At the Dashboard go to Layout >> Edit HTML
  3. Check the Expand Widget Templates box on the right
  4. Using CTRL + F find this code: <data:post.body/>
  5. Copy and paste the following codes depending on your choice of Facebook Share Button style immediately before the line <data:post.body/>

    Note: If you have trouble finding <data:post.body/> alternatively you can paste the code directly below:
    <div class='post-header-line-1'/>

    Large Facebook Share Button (right aligned)


    <!-- Facebook Share Button -->
    <b:if cond='data:blog.pageType == "item"'>
    <div style='float:right;padding:4px;'>
    <a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
    <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
    </div></b:if>
    <!-- End Facebook Share Button -->


    Large Facebook Share Button (left aligned)


    <!-- Facebook Share Button -->
    <b:if cond='data:blog.pageType == "item"'>
    <div style='float:left;padding:4px;'>
    <a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
    <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
    </div></b:if>
    <!-- End Facebook Share Button -->


    Compact Facebook Share Button (right aligned)

    <!-- Facebook Share Button -->
    <b:if cond='data:blog.pageType == "item"'>
    <div style='float:right;padding:4px;'>
    <a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
    <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
    </div></b:if>
    <!-- End Facebook Share Button -->


    Compact Facebook Share Button (left aligned)


    <!-- Facebook Share Button -->
    <b:if cond='data:blog.pageType == "item"'>
    <div style='float:left;padding:4px;'>
    <a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
    <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
    </div></b:if>
    <!-- End Facebook Share Button -->

  6. Click Save
  7. View a blog post to see your new Facebook Share Button in action

Summary
Today you have learned how to add a Facebook Share Button to your Blogger blog. The Facebook Share Button will allow your readers to share your content which will attract new visitors to your blog. Adding a Facebook Share Button to your post pages only takes a few minutes.



Related Links
Add a Follow Me Twitter Icon Button to Blogger
How to Remove the Blogger Navbar
How to Change the Color of the Blogger Navbar
How to Increase the Image Size in a Blogger Blogspot Blog
How to Add a Print Friendly Button to Blogger
Set the Date of a Blogger Post to a Future or Past Date
How to Remove Blogger Labels Counter
Making Money From Banners with Blogger
How to Get More Adsense Clicks with Blogger
Blogger Guide to Google Adsense Placement
Easy Ways to Put Banners on Blogger



Subscribe to Blogspot Blogger Guide Full RSS Feed

Subscribe to Blogspot Blogger Guide by Email


Add To Google BookmarksStumble ThisFav This With TechnoratiAdd To Del.icio.usDigg ThisAdd To Reddit

Bookmark and Share

Friday, May 7, 2010

Change Color of Blogger Navbar

This article shows you how to change the color of the Blogger Navbar so that it matches the color scheme of your Blogger blog. The Navbar in Blogger is the blue colored link bar that appears by default at the top of Blogger blogs. Changing the color of the Blogger Navbar takes less than a minute and is an easy trick that requires no change to the Blogger code.

One of the most frequent complaints about the Blogger platform is from webmasters who want to change the Blogger navbar. Most people want to get rid of it altogether but before you do remember that the navbar has a lot of uses and all that might be required is to change its color so that it is coordinated with the other colors of your blog. Please refer to my Blogger tutorial about How to Delete the Blogger Navbar if you want to remove it completely.


Currently Blogger offer the choice of 6 different Blogger Navbar colors: blue, tan, black, silver, transparent light and transparent dark. Transparent light and transparent dark are the most recent additions and it is likely that Blogger may continue to offer more color options for the Navbar as time goes on.


Steps To Change the Color of the Blogger Navbar

  1. Login to Blogger and select the blog you wish to change

  2. From the Blogger Dashboard go to Layout >> Page Elements

  3. Click the edit button which appears on the right side of the Navbar. The Navbar is the blue strip labelled Navbar which is located directly under the Add and Arrange Page Elements heading.

    Edit Blogger Navbar
  4. Select the color of your choice by clicking on the radio button on the left side of each color in the pop up Navbar Configuration window that appears

  5. Once you have made your selection click on the Save Button to save your changes

  6. Click View Blog to see the effects of changing the color of the Blogger Navbar to match the design and style of your blog


Summary
Today I have shown you how to change the color of the Navbar of your Blogger blog (Blogspot blog) so that it matches the color and design of your blog.



Related Links
How to Remove the Blogger Navbar
How to Increase the Image Size in a Blogger Blogspot Blog
How to Add a Print Friendly Button to Blogger
Set the Date of a Blogger Post to a Future or Past Date
How to Remove Blogger Labels Counter
Add a Follow Me Twitter Icon Button to Blogger
Making Money From Banners with Blogger
How to Get More Adsense Clicks with Blogger
Blogger Guide to Google Adsense Placement
Easy Ways to Put Banners on Blogger


Subscribe to Blogspot Blogger Guide Full RSS Feed

Subscribe to Blogspot Blogger Guide by Email


Add To Google BookmarksStumble ThisFav This With TechnoratiAdd To Del.icio.usDigg ThisAdd To Reddit

Bookmark and Share

Thursday, May 6, 2010

How to Remove the Blogger Navbar

It is easy to hide the Blogger Navbar and it only takes a couple of minutes to do this simple Blogger trick.

Most people dislike the Blogger Navbar and want to remove it because it looks unprofessional and it encourages readers to leave your blog by clicking on the Next Blog link. If you are using a custom template the Blogger Navbar is likely to already be hidden but if you are using a default Blogger template it will need to be removed manually.

Before you get rid of the Blogger Navbar completely though remember that it has some pretty useful features such as:

1. Follow Me link to encourage your readers to follow you
2. Share via email, Facebook, Twitter, Google Buzz, Google Reader
3. Blog search
4. Quick links to Blogger New Post, Page Elements and Blogger Dashboard

I would suggest that if you do decide to hide the Blogger Navbar that you add a custom search box and some social bookmarking features to your blog to partly compensate for the features you will be losing.


If you simply want to change the color of the Blogger Navbar please refer to my Blogger tutorial How to Change the Color of the Blogger Navbar

Steps to Remove the Blogger Navbar

  1. Login to Blogger and select the blog you wish to change

  2. From the Blogger Dashboard go to Layout >> Edit HTML

  3. Use CTRL + F to find this code: ]]></b:skin>

  4. Insert the code below just before the ]]></b:skin> tag

    /*
    #navbar-iframe {
    height: 0px;
    visibility: hidden;
    display: none;
    }*/

  5. Use the Preview button before committing the change to see the Blogger Navbar is now hidden.

  6. When you are satisfied click on the Save button to save your changes

  7. Click on View Blog to admire your Blogger blog with the Navbar removed

Blogger Tip:
If you decide that you want to reinstate the Blogger Navbar you can do one of two things:
  1. Simply remove the code you inserted:

    #navbar-iframe {
    height: 0px;
    visibility: hidden;
    display: none;
    }

  2. Or comment out the code like this

    /*
    #navbar-iframe {
    height: 0px;
    visibility: hidden;
    display: none;
    }*/

Summary
Today I have shown you an easy trick to remove the Blogger Navbar. By adding a short piece of code to your Blogger template the Blogger Navbar can be hidden from view. I have also shown you what to do if you need to reinstate a missing Blogger Navbar.


Related Links
How to Change the Color of the Blogger Navbar
How to Increase the Image Size in a Blogger Blogspot Blog
How to Add a Print Friendly Button to Blogger
Set the Date of a Blogger Post to a Future or Past Date
How to Remove Blogger Labels Counter
Add a Follow Me Twitter Icon Button to Blogger
Making Money From Banners with Blogger
How to Get More Adsense Clicks with Blogger
Blogger Guide to Google Adsense Placement
Easy Ways to Put Banners on Blogger


Subscribe to Blogspot Blogger Guide Full RSS Feed

Subscribe to Blogspot Blogger Guide by Email


Add To Google BookmarksStumble ThisFav This With TechnoratiAdd To Del.icio.usDigg ThisAdd To Reddit

Bookmark and Share