AddThis button in your posts

From Bloggerhacks

(Difference between revisions)
m
 
(10 intermediate revisions not shown)
Line 1: Line 1:
-
==Platform==
+
{{moved}}
-
Specifically for use with [[Blogger]] blogs.
+
-
 
+
-
==License==
+
-
[http://creativecommons.org/licenses/by-sa/2.5/ Creative Commons Attribution Share-Alike 2.5]
+
-
 
+
-
==Required Skills==
+
-
You should be able to edit and save your [[Blogger template]] file.
+
-
 
+
-
==Other Requirements==
+
-
You need an [http://www.addthis.com AddThis] account/username to use this hack. Don't worry, it's free.
+
-
 
+
-
==Description== What does it do?
+
-
This hack, through use of JavaScript, will add an '''AddThis button''' to each of your posts. AddThis is a free social bookmarking sharing tool that provides a ''one button for all'' functionality to your blog.
+
-
 
+
-
==Method==
+
-
* Open template file: on your dashboard, go to '''Layout | Edit HTML''' to open your template file.
+
-
* Create a backup of your template: click '''Download Full Template''' to download a backup copy before editing your template file (just in case).
+
-
* Check '''Expand Widget Templates''' to see the full template.
+
-
* Search for the following lines of code (you will insert the ''AddThis code'', i.e. the hack, above these lines):
+
-
<nowiki>
+
-
</div>
+
-
 
+
-
<div class='post-footer-line post-footer-line-2'></nowiki>
+
-
* Insert the JavaScript code so that the result looks like this:
+
-
<nowiki>
+
-
<!-- HACK STARTS HERE -->
+
-
<script type='text/javascript'>
+
-
  expr:addthis_url    = '<data:post.url/>';
+
-
  expr:addthis_title  = '<data:post.title/>';
+
-
  expr:addthis_pub    = 'USERNAME';
+
-
</script>
+
-
 
+
-
<span style='float:right; display:inline;'>
+
-
  <script src='http://s7.addthis.com/js/addthis_widget.php?v=12' type='text/javascript'/>
+
-
</span>
+
-
<!-- HACK ENDS HERE -->
+
-
 
+
-
</div>
+
-
 
+
-
<div class='post-footer-line post-footer-line-2'></nowiki>
+
-
: You'll want to replace ''USERNAME'' (line 5) with your AddThis username.
+
-
* That's it! Just click ''Save Template'' and watch the result.
+
-
 
+
-
==Modifications==
+
-
When using the code as given here, the ''AddThis button'' will be place in the post footer section and aligned to the right. Optionally, you can place the button in the post header section or elsewhere. Just paste the JavaScript code suitably.
+
-
 
+
-
Of course, you can change the ''float:right;'' statement (line 8) to ''float:center;'' or ''float:left;'' to align the button to the center or to the left, respectively.
+
-
 
+
-
==Sites Using This Hack==
+
-
* [http://ankerboje.blogspot.com Boat Builder's Blogbook]
+
-
 
+
-
==See Also:==
+
-
* [[Social bookmarking in Blogger beta]]
+
-
* [[PopMarks - Blog Buttons]]
+
-
 
+
-
[[Category:Hacks]]
+
-
[[Category:Bookmarking]]
+
-
[[Category:New Blogger]]
+

Current revision as of 13:45, 22 September 2009

Bloggerhacks has moved!

Please visit

the AddThis button in your posts page at Wikia.
Personal tools
FreshTags