How to add a bizSugar voting button to Blogger

If you use Blogger (Blogspot) to host your blog along with our voting button, you may have noticed an irritating little quirk: the total number of votes show up correctly on individual post pages, but not on the front page. Even worse, if a reader tries to submit a post from the front page, they end up submitting your entire front page.

But fear not, we have an answer.

The following will add the BizSugar voting button automatically to each post.

1. First, your blog should be set to save Post Pages, so that each post will have a unique URL. To verify or enable it, login to your Blogger Dashboard. Under Settings-> Archiving, set the “Enable Post Pages?” to “Yes” and save the settings.

2. While still in the Dashboard, click on the Layout tab and then the Edit HTML option. This should take you to your template code.

3. Click on “Expand Widget Templates.” This is located in upper right area near your template code.

4. Copy your entire template code and paste into a text editor.

5. Now, let’s say you already have other voting buttons and want to add BizSugar’s to the list. Find the location where you want to add the code and insert the following:

<!-- BizSugar button -->
<script type='text/javascript'>
submit_url=&quot;<data:post.url/>&quot;;
</script>
<script src='http://www.bizsugar.com/evb/button.php'
type='text/javascript'/>

Now paste the code back into your template page and your finished!

6. But what if you want to create a custom location for your BizSugar button? We can do that too. First, in your template code, find the following snippet of code.

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

This is the body of each blog post. If you want to put your button at the top of your post, you add the button code above it. If you want the button below you post, you add the code below it. For example…

7. Let’s say you want to add the BizSugar button to the top right of each blog post (like we have in this blog). You would add the following code right above the  <p><data:post.body/></p> snippet of code:

<!-- BizSugar button -->
<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
submit_url=&quot;<data:post.url/>&quot;;
</script>
<script src='http://www.bizsugar.com/evb/button.php'
type='text/javascript'/>
</div>

Now just paste the entire code back into your template page and you’re finished!

(By the way, notice the style tags ‘float:right; margin-left:10px;’ in the code above? Feel free to tweak those until you get just the right position for your button.)