Blogineering

In last Monday’s post, we have learned how to add a Follow me on Twitterbutton using a code generator.  In this post, we are going to learn a little HTML which will enable us to customize our button.

First, we will use the img src code to display the Follow me on Twitter icon. The img src code is the html code used to display images.  The code is as follows.

<img src = “the URL of your Twitter button”>

For example, the URL of my Twitter button at my side bar is http://www.howtonew.com/wp-content/themes/Simplista/twitter.png. So, to display button in this post, the code should be:

<img src = “http://www.howtonew.com/wp-content/themes/Simplista/twitter.png”>

The output of this code is the small Twitter button shown below.

We have have now displayed the button. The next step is to link the button to your Twitter account.

Linking to Twitter

To link a text or a picture to any URL, we  use the href command.  The syntax for the href command is

<a href = “Your Twitter page URL”>Text or picture</a>

For example, the code <a href = “https://twitter.com/#!/blogineeringph”>This takes you to my Twitter page</a> has the following output:

This takes you to my Twitter page

However, we don’t need the text;  we want the text to be replaced with the cute Twitter button above. So instead of the This takes you to my Twitter page text, we replace it with our img src code above. Doing this, our final html code will

is

<a href = “https://twitter.com/#!/blogineeringph”><img src =”http://www.howtonew.com/wp-content/themes/Simplista/twitter.png”></a>

The output of this code is the picture below with the link to my Twitter.

Now, you can follow Math and Multimedia on Twitter by clicking the final button.