Tag: CSS

how to make website search engine friendly

Over 80% of consumers use search engines to find products and services. Here tricks and tips, how to make website search engine friendly.
These days, no website owner can afford not to have a search engine friendly website. There are a lot of things which one should do to achieve high-ranking like search engine friendly code, Link building, submit website to various directories, Sitemap, Meta tags etc.

how to make website search engine friendly

Writing quality code is the first step in making website search engine friendly. In this article we are covering the points which should be taken care of while coding the website:

how to make website search engine friendly
how to make website search engine friendly

1. Use HTML for the content as much as possible. Avoid Flash, images, or other non-text formats.

Simple and cleanly coded website always rank higher than the flash based website. The non-text formats must be avoided in order to yield greater website accessibility. Not only the website becomes accessible to larger audience (Visually impaired or cognitive impaired users) but also can be accessed by a range of devices. The search spiders quickly spot the HTML coded and search engine friendly pages. Other advantages of using HTML are: faster loading, Cascading Style Sheet removing access load from server, browser compatibility, easy updating and maintenance.

2. Avoid login functionality to access the page unless it’s required. Search engine cannot index the page that requires login.

3. Do not use frames.

Using frames are considered to be a blunder by webmasters. Frames generally are not indexed by various search engines. Indexing leads to display of the embedded web addresses in frames, as the users are unable to navigate through the search results. Frames also create problem while printing, refreshing or bookmarking the webpage. Frames are becoming obsolete with the advent of AJAX and DIV layers.

4. Navigation should be in plain html. Avoid using flash.

Easy, simple coding in text like HTML facilitates the website to be ranked higher by the search engines.

5. Keep URL as short as possible. .

URL or the domain name is the essence of your website. Going by the KISS (Keep It Short and Simple) rule, the URL ought to be short as it would reduce the chances of misspelling and confusion by the visitors.

6. Static URL is always preferred over dynamic URL.

The search engines are able to index the static URLs in a comfortable manner than the dynamic URLs. Search engines can not access the dynamic and thus the websites lose on their market positioning.

7. Do not use numbers in URL.

Use of numbers in URL must be avoided to circumvent any confusion.

8. If possible, use keywords in URL.

Use of keywords communicates the basic crux of the website to the visitor and also invokes interest in the website, forcing the visitor to go through the website.

9. Separate words using Hyphens in URL.

Use of hyphens should be made clear in the URL else it may puzzle the visitor. Two words should be separated with the use of a hyphen as the search engine reads it as two words.

10. Always use lowercase in URL.

To maintain consistency and avoid any confusion, always use lowercase in URL.

11. Always add alt attribute for images, flash, audio & video file.

Alt attribute are a must while using images, flash, audio and video files as they are alternative names of the images and describe the files. The alt attribute basically lend a caption for such files and helps in search engine ranking.

12. Use Anchor text in links

The anchor text links are powerful tools for site optimization. Anchor text links provide a theme for the entire website.

13. Limit the length of title tag to 65 characters (including spaces) or less.

Different search engines accept different standards. Hence, to be on the safer side, it is important to limit the length of the title tag between 50-65 characters.

14. Incorporate keyword phrases in title tags.

Including 2-3 important keyword phrases of the website in the title tag facilitates good rankings by the search engines. However, the title tags must not be over burdened with keyword phrases as the chances are that the website would be blacklisted as spam. Each page with its own keyword phrase lends higher readership. A helpful tool for choosing which keywords to target is the Google Keyword Selection Tool.

15. Add Meta tags in the code.

Search engines use meta-tags to identify the objective of the website; therefore, meta-tags help in optimizing the website. The search crawlers determine the relevance of the meta-tags with respect to the content of the webpage.

16. Add Header Tags i.e, h1, h2, h3 etc.

Header tags as the name itself suggest are used to incorporate the headings in the text. The h1 header can be used to determine the main keyword and the h2 header tag can identify the next relevant keyword and so on.

17. Offload JavaScript and other non-text code (style sheets, etc.) to external files

18. Optimize images for fast loading

Larger images must be broken into smaller size images which enable uploading smaller images simultaneously and faster. Cropping unnecessary portions and reducing the image depth also help in loading the image faster.

19. Try to keep page size as low as possible

Lower the page size, lesser time will it take to load and thus would not distract the visitor from the website. Sometimes pages with larger size take ages to load and divert the potential user or client.

20. Validate your markup & CSS against w3c standards

Validating markup helps to identify the flaws or wrong coding on the webpage. The W3C standards are laid down to determine the errors and make the code neat & tidy.

how to create 3D push button effect using css

CSS tutorial, how to create 3D push button effect using css, In this article, we given CSS code with result screenshots. Explained about  creating 3d button using CSS only. Create a simple button with 3D look for your website using CSS.

how to create 3D push button effect using css

how to create 3D push button effect using css
how to create 3D push button effect using css

The main CSS commands you’ll need are:

a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}

a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

Aside from these commands, you can insert any other commands to achieve the desired presentation effect – the only limit is your imagination!

Thank You!

create sticky footer using css or javascript

You can create sticky footer using css perfectly. Use following css code for creating the sticky footer. Many people gave example of google sticky footer.

create sticky footer using css or javascript

create sticky footer using css or javascript
create sticky footer using css or javascript

Use bellow CSS code.


html{

height:100%

}

body{

height:100%

}

#footer{

position: relative;

bottom: 0px;

height: 100px;  //You must need to know your footer height

margin-bottom:-100px; //here I am thinking footer will be 100 px

}

You can change the footer height as per your need or footer height.

Sticky footer you will also achieve using javscript code.

<script>// <![CDATA[

// ]]></script>
document.body.onload = function () {
 var myWidth = 0, myHeight = 0;
 if( typeof( window.innerWidth ) == 'number' ) {
 //Non-IE
 myWidth = window.innerWidth;
 myHeight = window.innerHeight;
 } else if( document.documentElement &&
 ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
 //IE 6+ in 'standards compliant mode'
 myWidth = document.documentElement.clientWidth;
 myHeight = document.documentElement.clientHeight;
 } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
 //IE 4 compatible
 myWidth = document.body.clientWidth;
 myHeight = document.body.clientHeight;
 }
 window.alert( 'Width = ' + myWidth );
 window.alert( 'Height = ' + myHeight );

 middle_container = myWidth - 150; // here I am thinking footer and header hight is 150px
 document.getElelmentByID("main").style.height = middle_container;
}
// ]]>

You just need to minus the header and footer height from middle_container.

change image of on MouseOver Event using JavaScript

Using only javascript and CSS you can easily achieve mouseover effect. In article we given sample code for change image of on MouseOver Event in your site.

change image of on MouseOver Event using JavaScript or CSS

change image of on MouseOver Event using JavaScript or CSS
change image of on MouseOver Event using JavaScript or CSS

If you want to change the image on rollover or mouseover event. This is very old technique. You can achieve this using CSS or javascript. I given the simple and powerful code javascript mouse event. I tested this code. It works on all the browsers.

With CSS you can use the following code:


.yourimage { background-image: url('firstImage.jpeg'); }
.yourimage:hover { background-image: url('secondImage.jpeg'); }

<div class=”yourimage” style=”height:100px;width:100px;min-height:100px;min-width:100px;”></div>

I am using the yourimage class for div element.

With javascript you can use following code

<div>
<img src="firstimage.jpeg" onmouseover="this.src='secondimage.jpeg'" onmouseout="this.src='firstimage.jpeg'"/>

If you are using the Jquery then use following code:

<style>
.imagediv{background-image:firstimage.jpg}
<div class="imagediv"/>

 $(document).ready(function () {
            $('div.imagediv').mouseover(function () {
                $(this).css(background-image", "url('secondimage.jpg')");
            });
        });

How to write inline conditional css

We all know what is conditional css and how to write the conditional css. We have written CSS tutorial for writing  inline conditional css easily.

write inline conditional css

Here is few examples about conditional css.

write inline conditional css
write inline conditional css

[css-hacks]

With in style.css file

 a.button_active, a.button_unactive {
 display: inline-block;
 [if lte Gecko 1.8] display: -moz-inline-stack;
 [if lte Konq 3.1] float: left;
 height: 30px;
 [if IE 5.0] margin-top: -1px;
 text-decoration: none;
 outline: none;
 [if IE] text-decoration: expression(hideFocus='true');
 }

When we are use the inline css in document. If in that case we need to use conditional css then there is way

// Following is hack for all IE, including 7. It must go first, or it overrides the following hack
<div style=&quot;width:15px;^width:13px;&quot;>
some dynamic content
</div>
// Following is hack for all IE6 + browsers
<div style=&quot;width:15px;_width:14px;&quot;>
some dynamic content
</div>

How to use word wrap with css

Many times we need to do word wrap using languages. I recommend use css for word wrapping. In this article, we explained about How to use word wrap with css

How to use word wrap with css

You can force long (unbroken) text to wrap in a new line by specifying break-word with the word-wrap property.
This is a problem with CSS layouts that use floated divs.

use word wrap with css
use word wrap with css

Use following code for fix the word wrap with all divs.

div { word-wrap: break-word }

instead of this we always use following css code:

overflow:hidden;

But this is not good practice. Use word-wrap css property.
Word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.

footer stickable to end of the browser window without fixed position

Many web developer always think about why footer is not sticking to end of browser. In this tutorial we will show you to footer stickable to end of browser.

This is scenario:
If content is less than footer need to go bottom of browser and if content is more than footer will go down as per content.

Many people think this is CSS developer’s But I am not think that way. because this is totally different problem.

Some people suggest to use header, middle container and footer height in percentage. But that is wont be possible for all the time.

Here I will give you the solution. Use following JavaScript in document.

<script type="text/javascript">
 var header_height = 150;
 var footer_height = 100;
var reduce_height = header_height+footer_height;
 browserHeight = 0;
 if( typeof( window.innerHeight ) == 'number' ) {
 //Non-IE
 browserHeight = window.innerHeight;
 } else if( document.documentElement &amp;&amp; (  document.documentElement.clientHeight ) ) {
 //IE 6+ in 'standards compliant mode'
 browserHeight = document.documentElement.clientHeight;
 } else if( document.body &amp;&amp; (  document.body.clientHeight ) ) {
 //IE 4 compatible
 browserHeight = document.body.clientHeight;
 }
 // window.alert( 'Height = ' + browserHeight );
 var min_height = browserHeight-reduce_height+ +"px"
 document.write('<style>#middle_container{min-height:'+ min_height +'}</style>');
 //document.getElementById("middle_container").style.minHeight = browserHeight-146+"px";
</script>

Here in this JavaScript I am assuming middle_container is your main block of content. You can change the variables as per your need.

footer stickable to end
footer stickable to end

Create fixed side or top buttons in wordpress theme

We can easily introduce fixed side buttons in wordpress or any website. In this article I given code snippet for Create fixed side buttons in wordpress.

Create fixed side buttons in wordpress

Fixing the position of any document element using CSS this is very old technique but still  I am going to give you some good trick to show the twitter button or search buttons or add new button on bottom or sidebar.

Using following CSS code you can integrate the any button on sidebar.


#submit_news { background:transparent url(images/submit-news.png) no-repeat scroll 0px 0px; height:170px; left:0; position:fixed; top:180px; width:40px; }
div#submit_news:hover { background-position:-41px 0px; }
#submit_news a{ display:block; height:170px; width:40px; }

In this tutorial we are using the only one image as a button. As we know we are using the sprite image css here.

Open your header.php file from wordpres theme. and under body tag put following code.

<div id=”submit_news”><a href=”/submit-news” ></a></div>

First you need to create the submit news page in wordpress.

If you want to add the submit news button for your site you can download from here.

Advanced rounded corner with only css

CSS tutorial, Advanced rounded corner with only css. I got so many scripts which had solution with javascripts and some are given solutions with images.

In one of my project I got requirement about half rounded corner in header and footer.

Advanced rounded corner with only css

But I want customize every thing like color of rounded corner header background, footer background and border also.

I did so much R&D about same but did not found any solution.

So I tried to code myself in CSS and I got succeed in that.
In this article I am going to share the code with you.

first put my style sheet in your webpage.

<style type="text/css">
body {background-color: #fff;font: normal 10pt ,Arial,sans-serif;}

img{border:none;}

.wordpressapi-main{
 clear:both;
 float:left;
 width:300px;
 /*border:1px solid #f00;*/
}

.wordpressapi_round_header {
 background-color: #ddd;

 -moz-border-radius: 15px 15px 0px 0px;
 -webkit-border-radius: 15px 15px 0px 0px;
 border-radius: 15px 15px 0px 0px;
 /*behavior: url(border-radius.htc);*/
 text-align:center;
 padding:5px 0px 5px 0px;
 clear:both;
 float:left;
}

.wordpressapi_round_footer {
 background-color: #ddd;

 -moz-border-radius: 0px 0px 15px 15px;
 -webkit-border-radius: 0px 0px 15px 15px;
 border-radius: 0px 0px 15px 15px;

 /*behavior: url(border-radius.htc);*/
 text-align:right;

 clear:both;
 float:left;

}
.wordpressapi_round_middle {
 text-align:center;
 color:blue;
 clear:both;
 float:left;
}
.inner_ad {
 padding:10px;
 text-align:left;
 color:black;
 font-size:12px;
 vertical-align: middle;

}
.round_heading{
font-size:16px;
line-height:26px;
font-weight:bold;

}

/* rounded corners */
.wordpressapi-blue-round-container{ /*margin-top:10px;*/}
.wordpressapi-blue-round-container-top, .wordpressapi-blue-round-container-bot, .wordpressapi-acco-top, .wordpressapi-acco-bot {
 display:block;
 background:#fff;
 font-size:1px;
 clear:both;

}
.blue-round-t1, .blue-round-t2, .blue-round-t3, .blue-round-t4 {display:block; overflow:hidden;}
.blue-round-t1, .blue-round-t2, .blue-round-t3 {height:1px;}
.blue-round-t2, .blue-round-t3, .blue-round-t4 {
 background:#0000FF;
 border-left:1px solid #ccc;
 border-right:1px solid #ccc;
}
.blue-round-t1 {
 margin:0 5px;
 background:#0000FF;
 border-top:1px solid #ccc;
 height:0px;
}
.blue-round-t2 {margin:0 3px; border-width:0 2px;}
.blue-round-t3 {margin:0 2px;}
.blue-round-t4 {height:2px; margin:0 1px;}

.white-round-t1, .white-round-t2, .white-round-t3, .white-round-t4 {display:block; overflow:hidden;}
.white-round-t1, .white-round-t2, .white-round-t3 {height:1px;}
.white-round-t2, .white-round-t3, .white-round-t4 {
 background:#FFF;
 border-left:1px solid #ccc;
 border-right:1px solid #ccc;
}
.white-round-t1 {
 margin:0 5px;
 background:#FFF;
 border-top:1px solid #ccc;
 height:0px;
}
.white-round-t2 {margin:0 3px; border-width:0 2px;}
.white-round-t3 {margin:0 2px;}
.white-round-t4 {height:2px; margin:0 1px;}

.wordpressapi-blue-round-contents{
 display:block;
 border:1px solid #000;
 border-width:0 1px;
 padding: 0 15px;
 background:#0000FF;
 color:#000;
 text-align:justify;
 width: 878px;
 clear:both;
 float:left;

}

.hold{
 border-left:1px solid #ccc;
 border-right:1px solid #ccc;
 clear:both;
 float:left;
 width:298px;
}

.inner-adds-bottom{
 padding-top:1px;
 clear:both;
 float:left;
}

/* rounded corners */

.cross-img, .cross-img:link, .cross-img:hover{
 background:url(close_button.gif) no-repeat center;
 width:12px;
 height:12px;
 display:inline-block;
}

.info-img, .info-img:link, .info-img:hover{
 background:url(information_btn.gif) no-repeat center;
 width:12px;
 height:12px;
 display:inline-block;
}
</style>

Then Put following code in your HTML body.

Advanced rounded corner with only css
Advanced rounded corner with only css

You will get the following result as follows:

Download the main html file from  here: Advanced rounded corner with CSS

How to append html code using javascript and php

append html code using javascript and php, In this example I am going to show you how to add the dynamic HTML code into Document using javascript and PHP.

How to append html code using javascript and php

<!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php

$random_id = 125845465; // PUTTING SOME RANDOM ID YOU CAN USE YOURSELF.

$DYNAMIC_HTML = '<div>
<b>Sponsored Links</b>

<div>
 12px;font-weight:bold;" href="http://www.ucoz.com/" rel="nofollow">Create a website for free - uCoz

Build a website quickly and easily
Customizable templates and graphics

</div>

<div>
 12px;font-weight:bold;" href="http://www.purabtech.in/files/domain_names/">$1.99 Domain Names

 With every new non-domain purchase thru <a href="http://www.purabtech.in/files/domain_names/" rel="nofollow">wordpressapi</a>, you get a domain name for only $1.99.
</div>

<div>
 12px;font-weight:bold;" href="http://www.purabtech.in/files/" rel="nofollow">FREE Hosting!

 With every domain you register with <a href="http://www.purabtech.in/files/" rel="nofollow">wordpressapi</a> you get FREE hosting.
</div>
</div>';

 $HTML = "var objHead = document.getElementsByTagName('head');
 var objCSS = objHead[0].appendChild(document.createElement('link'));
 objCSS.id = '.$random_id.';
 objCSS.rel = 'stylesheet';
 objCSS.href = 'http://YOURSITE/STYLE.css';
 objCSS.type = 'text/css';";

 $HTML .= '
 var WORDPRESAPI_html_'.$random_id.' = document.createElement("div");
 WORDPRESAPI_html_'.$random_id.'.id = "WORDPRESAPI_html_'.$random_id.'";
 WORDPRESAPI_html_'.$random_id.'.style.position = "absolute";
 WORDPRESAPI_html_'.$random_id.'.style.zIndex = "100";
 WORDPRESAPI_html_'.$random_id.'.style.left = "0px";
 WORDPRESAPI_html_'.$random_id.'.style.top = "0px";
 WORDPRESAPI_html_'.$random_id.'.style.visibility = "hidden";
 WORDPRESAPI_html_'.$random_id.'.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
 WORDPRESAPI_html_'.$random_id.'.innerHTML = "'.addcslashes($DYNAMIC_HTML,"\\\'\"&\n\r<>").'";
 document.body.appendChild(WORDPRESAPI_html_'.$random_id.');';

echo $HTML;

?>

In this code if you observe then following line is very important.

 WORDPRESAPI_html_'.$uniqid.'.innerHTML = "'.addcslashes($HTML,"\\\'\"&\n\r<>").'";
How to append html code using javascript and php
How to append html code using javascript and php

Whenever you are using javascript and PHP both together then use following way to push your HTML in Dom.