Wouldn't it be great if you could add a “Google Reader” button to every single post in order to make it easy for your visitors to share all of your posts with their friends in Google Reader, even if they aren´t subscribers to your feed?
For all of you who have a Blogger layout based blog, the following instructions will enable you to do just that. (Instructions for Blogger Classic, Wordpress, and basic static HTML page will follow at a later time.)
This will require you to edit the HTML of your template. While I have tried to make this as simple as possible, if you don't feel comfortable doing this, then please don´t try.
The button will be added to the footer of every single post of your blog. It would not be wise to do this any other way, as the URL that will appear in Google Reader will be the URL of the page on which the button has been clicked. If the button were placed just on the main page, then the post may no longer be there when someone reads the entry in a friend´s shared items, and it probably won´t win you any new loyal readers if they don´t find what they are looking for right away. So, use the “Google Reader” button below every post.
There are also added some comments in the code that will make it a lot easier for you to add addional buttons in the future. Furthermore, they allow you to choose whether the buttons should appear on all pages or just post pages.
1. Sign in to Blogger Dashboard, then click the Layout link for the blog you want to add the button to.
2. Click the link for Edit HTML at the top of the Layout page.
3. Find the entry "Backup/Restore Template", click the link that says "Download Full Template" and save the .xml file to your hard drive. This backup file will help you restore your template should anything go wrong.
4. In the "Edit Template" section, find the box at the top right that says "Expand Widget Templates" and check it.
5. Use the search function of your browser to find the following line in the HTML code of your template:
<div class='post-footer'>
6. Now find the following two lines:
<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>
7. Copy and paste the following code between those two lines:
<!-- Footer Button Codes BEGIN -->
<div>
<p><span id='footer-buttons'>
<!-- things placed after this line will show on all pages -->
<!-- Google Reader Share Item Button BEGIN -->
<a href='javascript:var%20b=document.body;var%20GR________bookmarklet_domain="http://www.google.com";if(b&&!document.xmlVersion){void(z=document.createElement("script"));void(z.src="http://www.google.com/reader/ui/link-bookmarklet.js");void(b.appendChild(z));}else{}'>
<img src="http://i606.photobucket.com/albums/tt144/saxplayer2112/gr-small.png" border="0" alt="sharegooglereader"/></a>
<!-- Google Reader Share Item Button END -->
<b:if cond='data:blog.pageType == "item"'>
<!-- things placed after this line will only show on post pages –>
<!-- Do Not Paste Any Code Below This Line -->
</b:if>
</span></p>
</div>
<!-- Footer Button Codes END -->
8. Click the button at the bottom of the page saying "Save Template".
If you get red errors of any kind, either follow the instructions given along with the error or leave a comment stating the specific error message. I will try to help you out. If you get any errors beginning with "bX-", just try again later. Sometimes Blogger has issues with itself that can be resolved by waiting a while.
9. Now, look at your blog. If you have done everything correctly, the button should be visible below every post. Test the button by clicking it on a post and sharing one of your posts in Google Reader.
10. If you would like to add other buttons to the footer of your posts, the comments in the code will help you decide where to put your button codes. One place will show on all pages, and the other will only show on post pages.
11. If you would like a smaller button than the one that shows when you use this code, find the code "gr-small.png" in the file name of the image URL used and replace it with "gr-extrasmall.jpg", then insert a “2” after “sharegooglereader”.
0 Comments:
Post a Comment