1. On your Blogger Dashboard, click the Layout link for the blog you want to add the button to.
2. At the top of the Layout page, click the link for Edit HTML.
3. Where it says "Backup/Restore Template", click the link that says "Download Full Template" and save the .xml file to your hard drive. This file will help you restore your template, in case anything goes wrong.
4. In the "Edit Template" section, check the box at the top right that says "Expand Widget Templates".
5. Use your browser's search function to find this line:
<div class='post-footer'>
6. Find the 2 lines in your template that look like this:
<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>
7. Copy and paste the following code between those 2 lines:
<!-- Footer Button Codes BEGIN -->
<div>
<p><span id='footer-buttons'>
<!-- things placed after this line will show on all pages -->
<b:if cond='data:blog.pageType == "item"'>
<!-- things placed after this line will only show on post pages -->
<!-- TwitThis Button BEGIN -->
<a href='javascript:(function(){TwitThisPop=window.open(%22http://twitthis.com/twit?url=%22+encodeURIComponent(location.href)+%22&title=%22+((document.title)%20?%20encodeURIComponent(document.title.replace(/^\s*|\s*$/g,%27%27))%20:%20%22%22),%20%22TwitThisPop%22,%20%22width=600,%20height=500,%20location,%20status,%20scrollbars,%20resizable,%20dependent=yes%22);%20setTimeout(%22TwitThisPop.focus()%22,%20100);%20})()'><img alt='TwitThis' src='http://ajax.twitthis.com/chuug.twitthis.resources/twitthis_grey_72x22.gif' style='border:none;'/></a>
<!-- TwitThis Button END -->
<!-- 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 that says "Save Template".
If you get any red errors, leave a comment stating the specific error message, and I will try to help you out. If you get any errors beginning with "bX-", just try again tomorrow. Sometimes Blogger has issues with itself and waiting a bit can resolve them.
9. Look at your blog. If you have done this correctly, the button should appear on post pages only, and not the main page. Test the button by clicking it on a post and sharing one of your posts on Twitter.
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.
2. At the top of the Layout page, click the link for Edit HTML.
3. Where it says "Backup/Restore Template", click the link that says "Download Full Template" and save the .xml file to your hard drive. This file will help you restore your template, in case anything goes wrong.
4. In the "Edit Template" section, check the box at the top right that says "Expand Widget Templates".
5. Use your browser's search function to find this line:
<div class='post-footer'>
6. Find the 2 lines in your template that look like this:
<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>
7. Copy and paste the following code between those 2 lines:
<!-- Footer Button Codes BEGIN -->
<div>
<p><span id='footer-buttons'>
<!-- things placed after this line will show on all pages -->
<b:if cond='data:blog.pageType == "item"'>
<!-- things placed after this line will only show on post pages -->
<!-- TwitThis Button BEGIN -->
<a href='javascript:(function(){TwitThisPop=window.open(%22http://twitthis.com/twit?url=%22+encodeURIComponent(location.href)+%22&title=%22+((document.title)%20?%20encodeURIComponent(document.title.replace(/^\s*|\s*$/g,%27%27))%20:%20%22%22),%20%22TwitThisPop%22,%20%22width=600,%20height=500,%20location,%20status,%20scrollbars,%20resizable,%20dependent=yes%22);%20setTimeout(%22TwitThisPop.focus()%22,%20100);%20})()'><img alt='TwitThis' src='http://ajax.twitthis.com/chuug.twitthis.resources/twitthis_grey_72x22.gif' style='border:none;'/></a>
<!-- TwitThis Button END -->
<!-- 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 that says "Save Template".
If you get any red errors, leave a comment stating the specific error message, and I will try to help you out. If you get any errors beginning with "bX-", just try again tomorrow. Sometimes Blogger has issues with itself and waiting a bit can resolve them.
9. Look at your blog. If you have done this correctly, the button should appear on post pages only, and not the main page. Test the button by clicking it on a post and sharing one of your posts on Twitter.
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.
0 comments:
Post a Comment