Add Email This Post Link to Blogger

In this article you will learn how to place an email this post link or button at the bottom of each post in a Blogger Blogspot blog.

You may have noticed that some blogs give readers the option below their posts to email the article to themselves or a friend via a link or button. This affords readers yet another way to have access to your posts and a link for them to find you if they want to call back.

This email link should not be confused with the subscribe by email link which once a reader is signed up to will give them regular updates of each post you publish. This email link on the other hand only emails the reader the single post they are interested in.

There are several ways to place an email this post link on your Blogger Blogspot blog. Here are three methods known to me.

Add Email This Post to Blogger - Method 1
The easiest method. Adds an email button to the end of each post.

1. Login to Blogger if not already logged in

2. Navigate to Layout > Page Elements

3. Within the template click the Edit link on Blog Posts


4. A pop up menu will open. Under Select Items check the box labelled Show Email Post Links

5. Click Save

6. Click on View Blog and scroll to the end of your post to see the envelope button which has now appeared.



Add Email This Post to Blogger - Method 2
Another method of adding an email this post link to your blog is to add an all-in-one social bookmarking button to your Blogger Blogspot blog. All in one social bookmarking buttons are minimalist and reduce the clutter of having lots of buttons. Read the following article for information about how to add an Add This Social Bookmarking Button to your Blogger blog


Add Email This Post to Blogger - Method 3
By far the most advanced method and requires a change to your Blogger template. Yet another way to add an email this post link to your Blogger blog is to make use of your Feedburner FeedFlare if you have one. For information about getting a Feedburner FeedFlare for a Blogger feed and configuring it please refer to my article Add a Feedburner FeedFlare to a Blogger Feed

Assuming that you already have a burned feed at Feedburner (if not then read my article on how to Burn a Blogger RSS Feed at Feedburner and a FeedFlare set up follow these instructions to add an email this post link.

1. Click the My Account link at the top right corner of the Blogger navbar and then select Feedburner from the list of Google services or sign in to Feedburner directly.

2. Select your blog feed from the My Feeds List on the My Feeds page

3. From the Feedburner dashboard select the Optimize tab.

4. From the left sidebar menu select FeedFlare

5. On the FeedFlare page enable Email This by checking the box under the Site column. (Note the first column is what appears in the feed and the second column is what will appear on your blog). If you don't have your FeedFlare set up yet you can set up the FeedFlare options for both site and feed together at the same time. Follow my article about adding a Feedburner FeedFlare to Blogger for more on this.


6. Once you have checked the Email This option under Site and added any other options to the FeedFlare in the feed or site that you would like then click on Save. If this is a new FeedFlare then you will click on a button marked Activate instead.


7. After activating or saving you need to get the code to add to Blogger. Do this by clicking on the dropdown menu labelled Get the HTML code to put FeedFlare on your site and selecting Blogger from the list.

8. A pop up window entitled Adding FeedFlare to your Blogger blog will open with instructions on how to make the necessary changes to your blog. These are a bit confusing so I will break them down a bit here. Don't close this window yet as we will return

9. Login into Blogger if not already logged in

10. Navigate to Layout > Edit HTML.

11. Check the Expand Widgets Template

12. As a precaution back up you template

13. Scroll down to the following code or use CTRL + F to bring up the search tool.

<div class='post-footer'>

Note assumes you are using layout in Blogger. If you don't have this code you are likely to be using a custom template and will need to read the advanced instructions. Any problems just ask.

14. Copy the layout code in the Feedburner pop up window and paste it directly below this line <div class='post-footer'>

15. Click Save Template to save changes

16. Click View Blog to see the link in the footer of your blog posts



In this article I have suggested three different methods to add an Email This Post link to a Blogger Blogspot blog to give readers the option of emailing their favorite articles directly to themselves. If you get stuck or have problems with any of these methods please just ask and I will try to help.


Related Articles
Add Email Subscription Links to Your Blogger Blogspot Blog
Add a Social Bookmarking Button to your Blogger Blog
Add a Feedburner FeedFlare to a Blogger Feed
Burn a Blogger RSS Feed at Feedburner
List of Blog Know How Tutorials for Blogger Blogs

Add Printer Button or Link to Blogger Blogspot

Today's article will show you how to add a print button or printer link to your Blogger Blogspot blog. The facility to print a hard copy of a post may be important to some visitors especially if you are like me and publish lengthy posts. Adding a printer button or link will add to your blog's functionality and user friendliness.

The reason I am writing this article is in response to a reader who asked me how to print out posts without the sidebar showing up. All the suggested buttons and links print out the post only and not the sidebar, header or footer.

This tutorial involves changing the template code but is not difficult as long as you follow these step by step instructions.

How to Add a Custom Print Button to Your Blogger Blogspot Blog
The following instructions will place a printer button on each individual page of your blog below the post. Only the blog article itself will be printed along with any comments. The sidebar will not be printed.

Example of the printer button to be added:

1. Log in to Blogger if not already logged in

2. Navigate to Layout > Edit HTML

3. Back up your template by downloading full template to your computer

4. Check Expand Widgets Template

5. Bring up the search toolbar by using CTRL + F

6. Find this line by typing it into the search box:

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

7. Now replace that line with the following code block:


<!-- Add Printer Button by http://blogknowhow.blogspot.com/-->
<span class='noprint'><p><data:post.body/></p></span>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='javascript:window.print()'>
<img src='http://i1020.photobucket.com/albums/af326/bookwise77/printer-button.gif'/></a></b:if>
<!-- End Add Printer Button by http://blogknowhow.blogspot.com/-->



8. Click on Save Template to save changes

9. Click View Blog to see your button in action

Note: If you want to change the printer icon to your own icon upload your image to a photo storage service like Photobucket and note the URL address of the icon. Now substitute the URL address of the existing image for your image by changing the line beginning with <img src='
Change printer icon to this alternative printer icon

So to change the printer image to another printer image the code would look like:


<!-- Add Printer Button by http://blogknowhow.blogspot.com/-->
<span class='noprint'><p><data:post.body/></p></span>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='javascript:window.print()'><img src='http://i1020.photobucket.com/albums/af326/bookwise77/printer-button-2.gif'/></a></b:if>
<!-- End Add Printer Button by http://blogknowhow.blogspot.com/-->


How to Add a Printer Link to a Blogger Blogspot Blog
You may not want a button and prefer to add a printer link instead. To do this you would follow steps 1 to 6 and then insert the following code instead of the code contained in step 7


<!-- Add Printer Link by http://blogknowhow.blogspot.com/-->
<p><span class='noprint'><data:post.body/></p></span>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='javascript:window.print()'>Print this post</a>
</b:if>
<!-- End Add Printer Link by http://blogknowhow.blogspot.com/-->


Save the changes to your template and then navigate to an individual post to see your link at the bottom of the post.


How To Add a Combination of Printer Button and Link
If you would like to display a printer button along with a link follow steps 1 to 6 and then insert the following code instead of the code contained in step 7


<!-- Add Combined Printer Button and link by http://blogknowhow.blogspot.com/-->
<span class='noprint'><p><data:post.body/></p></span>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span style='background: url(http://i1020.photobucket.com/albums/af326/bookwise77/printer-button.gif) left no-repeat; padding-left: 28px;'>
<a href='javascript:window.print()'>Print this post</a></span>
</b:if>
<!-- End Add Combined Printer Button and link by http://blogknowhow.blogspot.com/-->


In this article I have shown you how to add a print button, a print link and a combined button and link to the bottom of your Blogger Blogspot posts. Enjoy!


Related Articles
List of Blog Know How Tutorials for Blogger Blogs

Add Banner Adsense Above Blogger Header

One of my readers asked me how to add a Google Adsense ad unit above the header of a Blogger Blogspot blog. Rather than post a long reply I decided to write an article about it so that others looking for help to place an affiliate banner or Google Adsense banner at the top of their blog will find the solution more easily.

To set up Blogger so that ad units can be placed above the header requires the addition of a snippet of code to your Blogger Template. I have aimed this tutorial at beginners and newbies to Blogger. The tweak can be performed in less than 5 minutes.


How to Add a Google Adsense Ad Unit or an Affiliate Banner Above the Blogger Header

1. Login to Blogger if not already logged in

2. Navigate to Layout > Edit HTML

3. As a precaution back up your template by downloading the full template to your computer

4. Tick the Expand Widget Templates box

5. Using CTRL + F to bring up the search box find this line which in most templates will be directly after <body> tag

<div id='outer-wrapper'>

6. Paste this block of code after this line to create a new section

<div id='topads-wrapper'>
<b:section class='topads' id='topads' preferred='yes'/>
</div>

7. Next we need to add some CSS styling to the new section. Please note that the banner will be centered by default. If you want to change the alignment for some reason you just need to change the CSS styling.

Place the following code in the head section of your template before these lines:

]]></b:skin>
</head>

/* Top Ads
----------------------------------------------- */
#topads-wrapper {
margin: 0;
padding: 0;
position: relative;
text-align: center;
width: 100%;
}

#topads {margin: 0; padding: 0;}

#topads .widget {margin: 0; padding: 5px 0;}

8. Click the Save Template button

9. Go to Layout > Page Elements

10. You will now see that you can add a gadget to a new section above your header and directly below the navbar.

11. To Add a Google Adsense Ad Unit
Click on Add a Gadget and choose your desired Google Adsense ad unit. If you are uncertain how to add a Google Adsense ad unit to Blogger read my article Google Adsense Tips for Blogger Blogs

To Add an Affiliate Banner
Or if you want to add an affiliate banner then you would click on Add a Gadget and choose a HTML/Javascript widget from the list of gadgets available in the menu. You would then paste the affiliate banner code into the content box in the popup window and save your changes. Click on View Blog and you will see your new banner displayed above your blog's header. For more detailed instructions about adding affiliate banners to a Blogger Blogspot blog please refer to my article Add an Affiliate Banner to the Blogger Sidebar


Tips and Troubleshooting

• If you wish to add more than one widget to the section you will need to change the template code:
  
  from
  

  <b:section class='topads' id='topads' preferred='yes'/>

  
  to:
  

  <b:section class='topads' id='topads' maxwidgets='3'>

  
  This change to the template will allow you to add up to 3 widgets above the Blogger header.



• If you wish to display your Google Adsense ad unit only on the post page and not the home page then you need to add an if statement. For instance go to Layout > Edit HTML after you have created your ad unit and you will see that the code you inserted is now different. That is because the Adsense widget code has been added. You are likely to have something that looks like this:
  
  

  <b:section class='topads' id='topads' preferred='yes'/>
<b:widget id='AdSense7' locked='false' title='' type='AdSense'>
<b:includable id='main'>
<div class='widget-content'>
<data:adCode/>
</div>
</b:includable>
</b:widget>
</b:section>

  
  By inserting the code within an if statement we can control where it appears. To have the Google Adsense ad unit only display on the post page add these lines of code:
  
  

  <b:section class='topads' id='topads' preferred='yes'/>
<b:widget id='AdSense7' locked='false' title='' type='AdSense'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:blog.pageType == "item"'>
<data:adCode/>
</b:if>
</div>
</b:includable>
</b:widget>
</b:section>

In today's tutorial you have learned how to create a new section above the Blogger Blogspot header and how to add a Google Adsense ad unit to that spot or an affiliate banner. You have also learned how to place that Google Adsense unit or banner only on the post page rather than on every page on your blog. Any questions please ask.


Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Blogspot Blogger Guide to Google Adsense Placement
Google Adsense Tips for Blogger Blog
Add an Affiliate Banner to the Blogger Sidebar