-->

Wednesday, August 14, 2013

Personlized Twitter Buttons:

OK, so I made some animated twitter buttons that is easy to customize with your own twitter handle.

The out come should look something like this:

But you can choose the font and color that you like best of course.


First you'll want to right click on any of the images below, and either save it to your computer, or you can just click on "Copy Image Location":


Then you'll want to go to LunaPic.com and scroll down to either "Basic Upload" (if you saved your image to your computer), or "Open from Web with URL" (if you selected copy image location instead).

There you'll be able to add your Twitter handle to your image. You can also change the size of the image, and host the image from that site as well.

The code will be something like this:
(Substitute the text in blue for your twitter link, and substitute the text in orange for you image link)

Code:
<a href="https://twitter.com/Poker_Babe69" target="_self"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcXrDBfIvSpai1nWCVSmPRySkGR5uIYXwoXQOxRForwlxQJ8yN5PYW-tRLEPpcL8kbydb2lIfn4cqVx07uNoF7sFPyvGP7ulrQpcHfVf9FxICDzI19TsLNsP0K3_2NjzyRprq4gh20UMs/s1600/137651196780458.gif" border="0" /></a>


If you want it to highlight when you scroll the cursor over it add class='highlight' to the code.
It will look something like this:

Code:
<a href="https://twitter.com/Poker_Babe69" target="_self"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcXrDBfIvSpai1nWCVSmPRySkGR5uIYXwoXQOxRForwlxQJ8yN5PYW-tRLEPpcL8kbydb2lIfn4cqVx07uNoF7sFPyvGP7ulrQpcHfVf9FxICDzI19TsLNsP0K3_2NjzyRprq4gh20UMs/s1600/137651196780458.gif" class='highlight' border="0" /></a>


Then go to Customize Profile add add this CSS code:
(If you want a thicker or thinner highlight, you can change the two border: 4px rbga(x,x,x,x) rules. If you want to change the color of the highlight, you need to change the rbga values in the second rule. You can go here to find different colors.)

Code:
.highlight {
    outline:none;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border:4px solid rgba(0,0,0, 0.0);
}

.highlight:hover {
    box-shadow: 0 0 10px rgba(255,0,255,1.0);
    -webkit-box-shadow: 0 0 10px rgba(255,0,255,1.0);
    -moz-box-shadow: 0 0 10px rgba(255,0,255,1.0);
    border:4px solid rgba(255,0,255,1.0);
}





No comments:

Post a Comment