Replace old HTML Buttons with new stylish ones

Why to replace old Buttons?

This is the age of success and development. And as a matter of fact all the bloggers and Web developers want to drive high quality traffic to their blogs or web pages. Most of the web developers want to improve their skills and make their web pages better than rest of the other people's pages, to generate some traffic and to generate some revenue.

One of the most necessary tips for high traffic and better readership of your webpage is the good enough design of your webpage. The readers attract more to a page which seems graphically more attractive and visually more explanatory.

So I suggest all my fellow bloggers who want to improve their readership, that they must improve their blog, graphically so that their readers may find the blog more attractive than rest of the others.

Some days ago, I learnt a new trick about blogging and I found that trick useful enough to share it with the entire blogging universe. I was very glad when I practiced it myself and when I thought that people will love this if I would share it with them.

I was just wondering about the media: I thought, which way should I use to publish this trick to more and more people? At last after some days, I came to remember about guest posting on some good blog having thousands of readers and having good traffic. So, I consulted Mohammad about my guest post and finally today I am going to tell you about how you can replace static HTML button with the new stylish one in the Blogger Platform to make your "Blog more Beautiful".

And I am sure that you will find this very easy to do and all of you would Love this trick.

How to do it:

All you have to do is to follow these simple steps.

1. Go to Blogger > Template

2. Backup your template

3. Click on "Edit HTML"

4. Find for </b:skin> and paste the following code just before it.

/*-------WINFOPTC Stylish Button-------*/

.button {

-moz-border-radius:5px 5px 5px 5px;

-webkit-border-radius:5px 5px 5px 5px;

border-radius:5px 5px 5px 5px;

-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);

-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);

box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);

background:url(&quot;http://www.zurb.com/images/overlay-button.png&quot;) repeat-x scroll 0 0 #222222;

border-bottom:1px solid rgba(0, 0, 0, 0.25);

color:#FFFFFF !important;

cursor:pointer;

font-weight:bold;

line-height:1;

overflow:visible;

font-size:17px;

padding:8px 19px 9px;

position:relative;

text-decoration:none;

text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);

width:auto;

}

.winfoptcbutton {

background-color:#EA0101;

text-align:center;

width:150px;

}

.winfoptcbutton:hover {

background-color:#00A0EE;

}

.button:hover {

-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);

-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);

box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);

}

5. And now paste the following code where you want the button to appear.

<div style="text-align: center;">

<a class="winfoptcbutton button" href="YOUR BUTTON LINK GOES HERE" rel="nofollow" style="float: center; text-align: center;" target="_blank"><span style="display: inline-block;">YOUR BUTTON TEXT GOES HERE</span></a>

</div>

*Note: You can use this button inside a post or even in a sidebar widget.

Customization:

1.       To change the button’s colors, change these codes : #EA0101 and #00A0EE

Something about me:

 I am not a professional blogger or web developer; I just started blogging a couple of months ago with my very new blog: "My SMS Folder" that was created with the idea to remove useless and meaningless "poetry" from the "mobile sms" networks and replace it with "matchless poetry".

Hope you like it

I am sure that all of you will try and will succeed in doing the procedure given above. If you like it, please give me feedback in your comments section below.

Thanks :)