Some Of Cool Styles To Have Good Hyperlinks

Hi All My Dears Readers ;-)

I got this cool changes to add more features to your content that should have some of hyperlinks so you can change this default hyperlinks to have good hyperlinks, For example you can change font color on mouse over or change font size or font family on mouse over or another smart changes look like adding background color on mouse over, Just follow this simple steps to do it.

 Firstly: You can remove the default underline from any hyperlink just add this:

Any default link code will look like this:

<a href="URL">TEXT LINK<a>

Just add text-decoration and set it to none or look in this:

<a style="text-decoration:none;" href="URL">TEXT LINK<a>

Secondly: Also you can change font color on mouse over like this in head area:

<style type="text/css">
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}
</style>

,You can change colors code  #ff0000 .

Now to make your style working just add your class a.one in this code look like this:

<a class="one" href="URL">TEXT LINK</a>

Thirdly: If you want to change font family or font size on mouse over just add this styles in head area:

A)To change font family when you mouse over the link add this:

<style type="text/css">
a.four:link {color: #ff0000}
a.four:visited {color: #0000ff}
a.four:hover {font-family: monospace}
</style>

,You can change font monospace to Verdana or Arial or any other font families.
Now to make your style working just add your class a.four in this code look like this:

<a class="four" href="URL">TEXT LINK</a>

B)To change font size when you mouse over the link add this in head area:

<style type="text/css">
a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}
</style>

,If you want to change size just change 150%.
Now to make your style working just add your class a.two in this code look like this:

<a class="two" href="URL">TEXT LINK</a>

Fourthly: To add background color or background image when you mouse over the link just add this code in head area:

<style type="text/css">
a.three:link {color: #ff0000}
a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66;background-image: Image Url;}
</style>

,You can change color by editing color code #66ff66 and also you can add Image Url .

Now to make your style working just add your class a.three in this code look like this:

<a class="three" href="URL">TEXT LINK</a>

Have Fun And Well Done,

Read full story

How To Add Your Author Photo Alongside Post Title

All of us always look for the better to make a greatest post in terms of improving the form and content, So you can add some cool features to your post look like adding your blog photo beside every post title.

Follow this simple steps:

Now search for this tag in your template:

<b:if cond='data:post.title'>

And now copy this code adove the previous code recommended size for your photo is 32×32 or 25×25px:

<img align='left' border='0' height='32' hspace='5' src='YOUR IMG URL HERE' vspace='3' width='32'/></img>

Now just add your image url and preview, Have fun And Certainly Well Done, Mission Accomplished;

Read full story

Make a Drop Shadow To Your Website with CSS Dreamweaver Tutorial

Have Fun With This Tutorial:

Read full story