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

Two Steps To Validating Your Site or Blog With "CSS, XHTML, HTML, SMIL, MathML, ....etc"

● Are you have a identical blog or website with other programming languages ?!! Yes, surly but how can i know that, All of us ask this question because both of us know the impact of programming languages and their role in the development of web page, Sites Validating with this languages have many benefits.

For example:

1- Improve the performance of your site in terms of browsing speed and organization of site parts.  

2- More compatibility with all of browsers example (IE , Firefox, Safari , Google Chrome, Folck, …etc).  

3- Validating with Programing languages makes your site more popular with search engines.

● This applies to all of sites types and also this makes the process of development and modernization more easily.

● Now you will learn how can check your site, There are many of ways to check any site and knowing is it conformed to programing languages or not ?? .

 ● Go to this site:
Validator.W3 - This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML,... etc.

Validate By URL :
• In this option you can check your site or any site by copy/paste direct URL ex: www.Yoursite or any site.com,org,net,info, ... etc.


Validate By FileUpload :
• In this option you should upload your source code file ex:(index.html,index.xhtml) to the site "This option is useful for web designers and developers to know under construction sites errors".

Validate By Direct Inbut :
• To do your checking in this option you should copy/paste all of source codes in the place of writing code area .

• These type of sites provide unique service in that it found errors and corrected. • If you got a good result you should see this result :

- now we finish checking about Xhtml, Html.

● Go to this site :

W3C.Validator:This validator checks the markup validity of Web documents in Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets. 

 If you see the second site is too similar than with the first site never mind just your checking.

After checking and if your resualt have a few errors just fix them and should see this image:

Well done, Have fun (-;

Read full story

Use This Smart "Expando" CSS&JS Tricks!!

● Learn this trick to add more interesting to your content by expanding your images in your posts, This simple script for folks who want to have an image expand onMouseover (Set its to actual size).

● Expando Image is AJAX friendly, meaning imported content with images with the "expando" class will be immediately recognized by the script.

● Installation is simple- install the script in the HEAD section of the page, then give your "thumbnail" images a CSS class of "Expando"



To do it just follow this simple two steps, In the first as usual copy/paste this code in head area or between <head>...here...</head> tags:

<style type="text/css">
img.expando{ /*sample CSS for expando images. Not required but recommended*/
border: none;
vertical-align: top; /*top aligns image, so mouse has less of a change of moving out of image while image is expanding*/
}
</style>

And this:

<script type="text/javascript">
//<![CDATA[
/* Expando Image Script ©2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

if (document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
im.title = '';
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};

expConIm.ims = {};

expConIm.r = new RegExp('\\bexpando\\b');

if (document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}
//]]>
</script>

In the second when you posting and before adding images just copy your image look like this ex.code:

<p>
<img class="expando" border="0" src="Your Image Url" width="100" height="75">
</p>

If you see we add the expando class to order the script, Now you can change values for width and height.

Have fun, Well done (-;

Read full story

Styling The First Character Of Your Post

Hi there my readers i get this addition to make our posts more interesting, It's very simple steps to do it just follow this steps and surly you will add it:



Step 1):

As usual copy this code in the head area of your template html:

<style type="text/css">
.bigfont {
float:left;
margin-top:2px;
margin-right:10px;
max-height:auto;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:500%;
color:#ff9900;
width:0.7em;
line-height:80%;
}
</style>

Also you can add your changes look like increase font-size or change font-family and color .

Step 2):
When posting your article in the beginning just add the first character in this code

<span class="bigfont">Your First Character Here</span>

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