Home » , » Customize Twitter Follow Button In 7 ways!

Customize Twitter Follow Button In 7 ways!

Now to make customization changes add the following codes (given below) just before the highlighted yellow text to make the effects take place.

1) To Change the button color you have two choice blue or grey. The blue one is the default one and the grey color is the one that I am using.

twitter grey color

data-button = "grey"

PS: With the grey color you will not be able to see the followers count because its color is automatically changed to white.  So read below..

2) To change the text color use this code,

twitter text color

data-text-color = "#000000"

To change the hexadecimal color use our [a href="http://www.mybloggertricks.com/2008/01/color-code-generator-and-color-wheel.html" target="_blank"]color generator tool[/a]

 

3) Add this code to change link color,

twitter link color

data-link-color = "#000000"

Again replace the 6 digit hexadecimal code with a color of your choice

 

4) To Hide the followers count number, use this code,

twitter followers count

data-show-count="false"

If you wish to show counts again then simply change false to true

 

data-lang="ja"

Simply replace ja with any language code you want.

 

6) You can adjust the width of the follow button in pixels or percentage using the following code,

 

data-width="300px"

The default width is 300px. You can increase or decrease it. The default dimensions for the follow button are 300px by 20px

 

7)  You can also align the plugin to left or right just like the float property by using this code,

data-align="right"

You can float the button to either right or left.

 

Combined Customized code:

The following code will put the important effects in a single button,

customized twitter button

<a href="http://twitter.com/mybloggertricks" data-lang="de" data-text-color = "#0080ff"  data-link-color = "#289728" data-button = "grey" class="twitter-follow-button">Follow @mybloggertricks</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

You can add your required codes in the similar manner as shown in the above code.

Any Questions?

You can also visit the [a href="http://dev.twitter.com/pages/follow_button" target="_blank"]developers page[/a] for more info. If you wish to add this button to your blogger blogs then you may read this post:

  • [a href="http://www.mybloggertricks.com/2011/07/add-twitter-follow-button-to-blogger.html" target="_blank"]Add Twitter Follow button to Blogger[/a]

I hope you find it easy and useful to implement. If you have any questions then you are most welcomed to ask for any help if needed by posting your questions in the [a href="#comments" rel="nofollow"]comments box[/a].

Source: http://www.mybloggertricks.com/2011/07/customize-twitter-follow-button-in-7.html

0 comments :

Post a Comment

 
Play : Agame | Y8 Games | Y3 Games
Copyright © 2011. Blogger Tips And Tricks 2012 - All Rights Reserved

Proudly powered by Blogger