Share This is a very popular service offering multiple Social Bookmarking Widgets for blogs and websites.The green Share This icon is a familiar sight on many of the top blogs opening up a wide range of options for readers to Bookmark and share the content.In this post i have a Blogger Tip show you how to add the new Share This ‘Oath’ Counter Buttons to various positions on your blog.You can see the buttons in question to the top of this paragraph and that position will be one of the options for your blog.
To generate the buttons you will need to go to the Share This website and use their very easy generator process.In the video below we will go through the steps from generating the buttons to adding them to your blog.Lets look at the demo on the test blog from the video.
Add The New Share This Counter Buttons To Your Blog
Video Tutorial
Summery And Codes
Go To Share This and generate your buttons as shown in the video tutorial – Share This
Add The Share This Script
When you have chosen your buttons you will be presented with two snippets of code.The top snippet is for the actual buttons and we will need that later now we will add the second snippet of code to your template.This code only needs to be added once and will allow all the buttons to work.
Step 1. In your Blogger dashboard click Design > Edit Html
Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – More Info)
</head>
Step 3. Copy and paste the second snippet of code from Share This directly above </head> then save your template.
That’s the script added, how easy was that.
Add The Counter Buttons Buttons To Your Blog
So i will show you how to add the buttons to various positions on your blog.Namely horizontally above your posts (Below the post title), Vertically At the top of your posts wrapped in text and horizontally below your posts.You can also add them to a Html/Javascript gadget in your sidebar.
For all positions you need to go your your blogs html, that’s Design > Edit Html > and tick the Expand widget templates box.
Horizontally Above Posts
Find This Code and paste the button code directly below it, save and that’s it !
<div class='post-header-line-1'/>
Horizontally Below Posts
Find this code and paste the code below it, save and once again that’s it !
<div class='post-footer'>
Wrapped In Text At The Top Left Or Right Of Posts
For this there is a little extra work, we need to set the buttons to sit on the left or right and we need them to be vertical.To do this i have added code to put them on the left, you will also need to add the line break tag between each button.
To add the line break you add <br/> between the code for each button.So in your button code after every instance of </span> you add <br/> to look like the example below :
<span class='st_twitter_hcount' displayText='Tweet'></span><br/><span class='st_facebook_hcount' displayText='Facebook'></span><br/><span class='st_friendfeed_hcount' displayText='FriendFeed'></span><br/><span class='st_blogger_hcount' displayText='Blogger'></span><br/><span class='st_sharethis_hcount' displayText='ShareThis'></span><br/>
First we find the position in your template for your buttons, once again we are clicking Design > Edit Html > And Tick The Expand Widget Templates Box.
Find the following code in your blogs Html :
<data:post.body/>
Next we add the following code directly Above <data:post.body/>
<div style="float: left; margin-right:5px;">
! Button Code Here !
</div>
-Replace ! Button Code Here ! with the code for your buttons.
-To have the buttons on the right change left and right to right and left.
And that’s it for this Blogger Tip, be sure to check out more of our Social Bookmarking Gadgets.
Drop Your Comments And Questions Below.
