Add the new Twitter Follow button to your Artisteer blog

In one of my previous post I show you how to add a nice twitter follow button. Now we have a new button that Twitter has released recently. In the new button we don't have any more the pop-up window to view the profile of the user in order to click follow. Now the follow button works exactly like the Facebook "like" button. (as long users are logged  into there Twitter accounts).
Also the new twitter button has a couple options, like: choosing a light or dark color scheme, different language and chose to display the number of followers.
For adding the button first click on THIS LINK to go and select your options for the button and then copy the button's code and follow the next steps.


1. Log in to your dashboard--> Design- -> Edit HTML

2. Click on "Expand Widget Templates"

3. Search "Ctrl+F" and find the following code:

<b:if cond='data:post.title'>
<h2 class='art-postheader'>

4. Now paste the next code after the upper code:

<div style='float:right; margin-right:10px;'>
<a href="http://twitter.com/ArtisTutorials" class="twitter-follow-button">Follow @ArtisTutorials</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
</div>

5. Replace the upper code with your own code or just change the red lines with your twitter username and save the template.


With this trick the buttons will appear in the right side of the title , if you want to make the buttons appear in the article you have to paste the  code on step 4 before (for the buttons to appear top of the article) or after (for the buttons to appear bottom of the article) this code:

<data:post.body/>

You can also insert the button in the sidebar widget or in your post. just paste the twitter follow button code in the place you want to appear.
When add the button in posts make sure the editor is in HTML mode.

DEMO

Follow @ArtisTutorials