<?xml version="1.0" encoding="utf-8" ?>

<rss version="2.0" 
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:admin="http://webns.net/mvcb/"
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
   xmlns:wfw="http://wellformedweb.org/CommentAPI/"
   xmlns:content="http://purl.org/rss/1.0/modules/content/"
   >
<channel>
    
    <title>WebsiteTheme.com</title>
    <link>http://websitetheme.com/</link>
    <description>Quality website themes and designs.</description>
    <dc:language>en</dc:language>
    <generator>Serendipity 1.5.5 - http://www.s9y.org/</generator>
    <pubDate>Sun, 01 Jan 2012 20:23:06 GMT</pubDate>

    <image>
        <url>http://websitetheme.com/templates/default/img/s9y_banner_small.png</url>
        <title>RSS: WebsiteTheme.com - Quality website themes and designs.</title>
        <link>http://websitetheme.com/</link>
        <width>100</width>
        <height>21</height>
    </image>

<item>
    <title>BlackLens Wordpress theme</title>
    <link>http://websitetheme.com/archives/18-BlackLens-Wordpress-theme.html</link>
            <category>Wordpress themes</category>
    
    <comments>http://websitetheme.com/archives/18-BlackLens-Wordpress-theme.html#comments</comments>
    <wfw:comment>http://websitetheme.com/wfwcomment.php?cid=18</wfw:comment>

    <slash:comments>0</slash:comments>
    <wfw:commentRss>http://websitetheme.com/rss.php?version=2.0&amp;type=comments&amp;cid=18</wfw:commentRss>
    

    <author>nospam@example.com (Abdussamad Abdurrazzaq)</author>
    <content:encoded>
    &lt;p&gt;A brand new theme for wordpress users. BlackLens is a black, white and pink theme with a floral decoration in the top right of the page. Its a two column theme with a left sidebar and support for widgets:

&lt;/p&gt;&lt;center&gt;
&lt;div class=&quot;serendipity_imageComment_center&quot; style=&quot;width: 300px&quot;&gt;&lt;div class=&quot;serendipity_imageComment_img&quot;&gt;&lt;a class=&#039;serendipity_image_link&#039; href=&#039;http://websitetheme.com/uploads/BlackLenstheme.png&#039;&gt;&lt;!-- s9ymdb:19 --&gt;&lt;img width=&#039;300&#039; height=&#039;228&#039;  src=&quot;http://websitetheme.com/uploads/BlackLenstheme.jpg&quot; alt=&quot;blacklens theme&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;serendipity_imageComment_txt&quot;&gt;BlackLens theme&lt;/div&gt;&lt;/div&gt;
&lt;/center&gt; &lt;br /&gt;&lt;a href=&quot;http://websitetheme.com/archives/18-BlackLens-Wordpress-theme.html#extended&quot;&gt;Continue reading &quot;BlackLens Wordpress theme&quot;&lt;/a&gt;
    </content:encoded>

    <pubDate>Sun, 08 Nov 2009 07:43:00 -0800</pubDate>
    <guid isPermaLink="false">http://websitetheme.com/archives/18-guid.html</guid>
    <category>blog themes</category>
<category>wordpress themes</category>

</item>
<item>
    <title>Blog Pixel wordpress theme</title>
    <link>http://websitetheme.com/archives/15-Blog-Pixel-wordpress-theme.html</link>
            <category>Themes</category>
    
    <comments>http://websitetheme.com/archives/15-Blog-Pixel-wordpress-theme.html#comments</comments>
    <wfw:comment>http://websitetheme.com/wfwcomment.php?cid=15</wfw:comment>

    <slash:comments>0</slash:comments>
    <wfw:commentRss>http://websitetheme.com/rss.php?version=2.0&amp;type=comments&amp;cid=15</wfw:commentRss>
    

    <author>nospam@example.com (Abdussamad Abdurrazzaq)</author>
    <content:encoded>
    
&lt;p /&gt;&lt;div class=&quot;serendipity_imageComment_left&quot; style=&quot;width: 110px;&quot;&gt;&lt;div class=&quot;serendipity_imageComment_img&quot;&gt;&lt;a class=&quot;serendipity_image_link&quot; href=&quot;http://websitetheme.com/uploads/blog-pixel.png&quot;&gt;&lt;!-- s9ymdb:18 --&gt;&lt;img width=&quot;110&quot; height=&quot;87&quot; src=&quot;http://websitetheme.com/uploads/blog-pixel.serendipityThumb.png&quot; alt=&quot;/uploads/blog-pixel.serendipityThumb.png&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;serendipity_imageComment_txt&quot;&gt;Click on image to view larger version&lt;/div&gt;&lt;/div&gt;Fuad of &lt;a title=&quot;Blog Anything&quot; href=&quot;http://bloganything.net&quot;&gt;bloganything.net&lt;/a&gt; has released his &lt;a title=&quot;Blog Pixel wordpress theme&quot; href=&quot;http://www.bloganything.net/541/blog-pixel-3-column-wordpress-theme-released&quot;&gt;Blog Pixel wordpress theme&lt;/a&gt; for free. Blog Pixel is a wide three column theme with impressive attention to detail. As Fuad puts it in his post, blog pixel is very easy on the eyes. &lt;p /&gt;&lt;p&gt;With a wide left side column for your posts and two sidebars on the right, blog pixel gives your posts prime screen position while also providing you with plenty of space in your sidebars. There are also different colour versions of blog pixel available. Go on try out &lt;a href=&quot;http://www.bloganything.net/541/blog-pixel-3-column-wordpress-theme-released&quot;&gt;Blog Pixel&lt;/a&gt;!&lt;/p&gt;&lt;p /&gt; 
    </content:encoded>

    <pubDate>Wed, 30 May 2007 18:07:56 -0700</pubDate>
    <guid isPermaLink="false">http://websitetheme.com/archives/15-guid.html</guid>
    <category>blog themes</category>
<category>free themes</category>
<category>themes</category>
<category>wordpress themes</category>

</item>
<item>
    <title>Quality wordpress templates</title>
    <link>http://websitetheme.com/archives/14-Quality-wordpress-templates.html</link>
            <category>Themes</category>
    
    <comments>http://websitetheme.com/archives/14-Quality-wordpress-templates.html#comments</comments>
    <wfw:comment>http://websitetheme.com/wfwcomment.php?cid=14</wfw:comment>

    <slash:comments>0</slash:comments>
    <wfw:commentRss>http://websitetheme.com/rss.php?version=2.0&amp;type=comments&amp;cid=14</wfw:commentRss>
    

    <author>nospam@example.com (Abdussamad Abdurrazzaq)</author>
    <content:encoded>
    &lt;div class=&quot;serendipity_imageComment_left&quot; style=&quot;width: 110px&quot;&gt;&lt;div class=&quot;serendipity_imageComment_img&quot;&gt;&lt;a class=&#039;serendipity_image_link&#039; href=&#039;http://websitetheme.com/uploads/purpling.jpg&#039;&gt;&lt;!-- s9ymdb:14 --&gt;&lt;img width=&#039;110&#039; height=&#039;87&#039;  src=&quot;http://websitetheme.com/uploads/purpling.serendipityThumb.jpg&quot; alt=&quot;/uploads/purpling.serendipityThumb.jpg&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;serendipity_imageComment_txt&quot;&gt;Purpling wordpress theme&lt;/div&gt;&lt;/div&gt;&lt;p&gt;Wordpress is by far the most popular open source blogging system around. There are lots of Wordpress themes out there but not all of them are of the highest quality. Quality wordpress themes make your blog stand out from the crowd and help you gain that little extra respect among your readers.&lt;/p&gt;
&lt;p&gt;
But how do you go about finding a quality wordpress template? There is a site called Romow blog that tries to list the best &lt;a href=&quot;http://www.romow.com/blog/category/free-wordpress-themes/&quot;  title=&quot;null&quot;&gt;WordPress templates&lt;/a&gt; out there. Among the unique designs on that site is the theme purpling as shown in the image to the left. Romow blog includes links to download your choice of theme as well as live demo&#039;s so you can see exactly how it will look on your blog. Wordpress bloggers now have a good resource to find quality themes or templates.

&lt;/p&gt; 
    </content:encoded>

    <pubDate>Wed, 02 May 2007 00:26:00 -0700</pubDate>
    <guid isPermaLink="false">http://websitetheme.com/archives/14-guid.html</guid>
    <category>free templates</category>
<category>free themes</category>

</item>
<item>
    <title>PHP Variables and constants</title>
    <link>http://websitetheme.com/archives/13-PHP-Variables-and-constants.html</link>
            <category>PHP Tutorial</category>
    
    <comments>http://websitetheme.com/archives/13-PHP-Variables-and-constants.html#comments</comments>
    <wfw:comment>http://websitetheme.com/wfwcomment.php?cid=13</wfw:comment>

    <slash:comments>1</slash:comments>
    <wfw:commentRss>http://websitetheme.com/rss.php?version=2.0&amp;type=comments&amp;cid=13</wfw:commentRss>
    

    <author>nospam@example.com (Abdussamad Abdurrazzaq)</author>
    <content:encoded>
    &lt;h4&gt;Variables introduction&lt;/h4&gt;

&lt;p&gt;Variables are used by programmers to store values and to refer to those values in code. Variables in PHP need not be defined. Variable types also do not exist although variable scope does. All variables begin with a $ sign. Variable names can contain numbers, letters and underscores. Variable names can only begin with letters or underscores. PHP variables are case sensitive. For ex: $a is different from $A. Below are given some examples of valid variable names:&lt;/p&gt; &lt;br /&gt;&lt;a href=&quot;http://websitetheme.com/archives/13-PHP-Variables-and-constants.html#extended&quot;&gt;Continue reading &quot;PHP Variables and constants&quot;&lt;/a&gt;
    </content:encoded>

    <pubDate>Fri, 02 Mar 2007 21:40:00 -0800</pubDate>
    <guid isPermaLink="false">http://websitetheme.com/archives/13-guid.html</guid>
    <category>beginners guide</category>
<category>php</category>
<category>programming</category>
<category>server side programming</category>
<category>tutorial</category>

</item>
<item>
    <title>Key features of a good website navigation system</title>
    <link>http://websitetheme.com/archives/12-Key-features-of-a-good-website-navigation-system.html</link>
            <category>General website design</category>
    
    <comments>http://websitetheme.com/archives/12-Key-features-of-a-good-website-navigation-system.html#comments</comments>
    <wfw:comment>http://websitetheme.com/wfwcomment.php?cid=12</wfw:comment>

    <slash:comments>0</slash:comments>
    <wfw:commentRss>http://websitetheme.com/rss.php?version=2.0&amp;type=comments&amp;cid=12</wfw:commentRss>
    

    <author>nospam@example.com (Abdussamad Abdurrazzaq)</author>
    <content:encoded>
    
&lt;p&gt;Website useability is an important consideration in any website design.
Websites are designed to be viewed by many different people and it is
important that designers allow for different needs. A website
navigation system must allow for easy and intuitive navigation between the
different sections of a site. Some of the key features of any website
navigation system are given below:&lt;/p&gt;&lt;p /&gt; &lt;br /&gt;&lt;a href=&quot;http://websitetheme.com/archives/12-Key-features-of-a-good-website-navigation-system.html#extended&quot;&gt;Continue reading &quot;Key features of a good website navigation system&quot;&lt;/a&gt;
    </content:encoded>

    <pubDate>Sun, 03 Dec 2006 03:09:19 -0800</pubDate>
    <guid isPermaLink="false">http://websitetheme.com/archives/12-guid.html</guid>
    <category>hci</category>
<category>navigation</category>
<category>useability</category>
<category>website design</category>

</item>
<item>
    <title>Colour combinations for web designers</title>
    <link>http://websitetheme.com/archives/11-Colour-combinations-for-web-designers.html</link>
            <category>General website design</category>
    
    <comments>http://websitetheme.com/archives/11-Colour-combinations-for-web-designers.html#comments</comments>
    <wfw:comment>http://websitetheme.com/wfwcomment.php?cid=11</wfw:comment>

    <slash:comments>0</slash:comments>
    <wfw:commentRss>http://websitetheme.com/rss.php?version=2.0&amp;type=comments&amp;cid=11</wfw:commentRss>
    

    <author>nospam@example.com (Abdussamad Abdurrazzaq)</author>
    <content:encoded>
    
Visually appealing colour combinations are not always easy to make. But there are a number of websites that allow you to generate good looking colour combinations.&lt;br /&gt;&lt;br /&gt;Siteprocentral&#039;s &lt;a href=&quot;http://www.siteprocentral.com/html_color_code.html&quot;&gt;color combination tool&lt;/a&gt; is very impressive. It allows you to automatically generate complimentary, monochromatic and analogic colours based on the colour you select. You can vary the hue, saturation and brightness to get the colour you like.&lt;br /&gt;&lt;br /&gt;&lt;a href=&quot;http://www.colorcombos.com/&quot;&gt;Colorcombos.com&lt;/a&gt; allows you to compare colours and generate various combinations. It also generates basic templates from your choosen colour combo.&lt;br /&gt;&lt;br /&gt; 
    </content:encoded>

    <pubDate>Thu, 23 Nov 2006 07:40:29 -0800</pubDate>
    <guid isPermaLink="false">http://websitetheme.com/archives/11-guid.html</guid>
    <category>colour combination</category>
<category>design sense</category>
<category>HCI</category>

</item>
<item>
    <title>Why blogs are easier to promote</title>
    <link>http://websitetheme.com/archives/10-Why-blogs-are-easier-to-promote.html</link>
            <category>Promotion</category>
    
    <comments>http://websitetheme.com/archives/10-Why-blogs-are-easier-to-promote.html#comments</comments>
    <wfw:comment>http://websitetheme.com/wfwcomment.php?cid=10</wfw:comment>

    <slash:comments>0</slash:comments>
    <wfw:commentRss>http://websitetheme.com/rss.php?version=2.0&amp;type=comments&amp;cid=10</wfw:commentRss>
    

    <author>nospam@example.com (Abdussamad Abdurrazzaq)</author>
    <content:encoded>
    
Blogs are increasing in popularity as an easy to promote website. Blogs
tend to have better search engine visibility and rankings and they have
many advantages over conventional websites.&lt;br /&gt;&lt;br /&gt;Each blog post is
worth a few backlinks straight off the bat. This is because each time
you post your blog software pings services like technorati which then
link to your post. The more you post the more backlinks you get and the
greater your chances of higher page rank.&lt;br /&gt;&lt;br /&gt;Blogs also seem to
have more &amp;quot;pages&amp;quot; of content than static websites. Consider in how many
ways a single post appears. It can be accessed through your frontpage,
archives, category overview, tag overview or as a single post. In
almost every case it appears alongside different posts that together
make the whole page unique. This is why blogs have more pages and SEs
like websites with lots of pages.&lt;br /&gt;&lt;br /&gt;By its very nature a blog is
designed to be updated regularly. SEs love websites that have fresh
content and so they will rank a blog with regularly updated content
better than a static site that is only occassionaly updated.&lt;br /&gt;&lt;br /&gt;Blogs are also easier to promote because they provided rss feeds that your users can subscribe to.&lt;br /&gt;&lt;br /&gt;One
of the most important factors behind SEO is the need to have your
content at the very start of your web page. Since a lot of blogs favour
the right hand sidebar, they usually have most of their content at the
beginning of the source code. This makes them more search engine
friendly.&lt;br /&gt;&lt;br /&gt;For all these reasons blogs are easier to promote.&lt;br /&gt;
 
    </content:encoded>

    <pubDate>Fri, 10 Nov 2006 20:07:13 -0800</pubDate>
    <guid isPermaLink="false">http://websitetheme.com/archives/10-guid.html</guid>
    <category>blogging</category>
<category>search engine optimization</category>
<category>seo</category>

</item>
<item>
    <title>This site is now in the first page of google results</title>
    <link>http://websitetheme.com/archives/9-This-site-is-now-in-the-first-page-of-google-results.html</link>
    
    <comments>http://websitetheme.com/archives/9-This-site-is-now-in-the-first-page-of-google-results.html#comments</comments>
    <wfw:comment>http://websitetheme.com/wfwcomment.php?cid=9</wfw:comment>

    <slash:comments>0</slash:comments>
    <wfw:commentRss>http://websitetheme.com/rss.php?version=2.0&amp;type=comments&amp;cid=9</wfw:commentRss>
    

    <author>nospam@example.com (Abdussamad Abdurrazzaq)</author>
    <content:encoded>
    &lt;div class=&quot;serendipity_imageComment_left&quot; style=&quot;width: 110px&quot;&gt;&lt;div class=&quot;serendipity_imageComment_img&quot;&gt;&lt;a class=&#039;serendipity_image_link&#039; href=&#039;http://websitetheme.com/uploads/google.png&#039;&gt;&lt;img width=&#039;110&#039; height=&#039;61&#039;  src=&quot;http://websitetheme.com/uploads/google.serendipityThumb.png&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;serendipity_imageComment_txt&quot;&gt;Click on thumbnail to view larger image&lt;/div&gt;&lt;/div&gt;Just 7 entries later this site has reached the first page of the Google Search Engine Results Page for &lt;a href=&quot;http://www.google.com/search?lr=&amp;amp;ie=UTF-8&amp;amp;oe=UTF-8&amp;amp;q=website%20theme&quot;&gt;&quot;website theme&quot;&lt;/a&gt;!  The main reason for this jump appears to be the domain and the free theme I recently created and promoted. Just goes to show the potential in this domain.
 
    </content:encoded>

    <pubDate>Tue, 17 Oct 2006 01:37:53 -0700</pubDate>
    <guid isPermaLink="false">http://websitetheme.com/archives/9-guid.html</guid>
    
</item>
<item>
    <title>Standards based coding is easy</title>
    <link>http://websitetheme.com/archives/8-Standards-based-coding-is-easy.html</link>
            <category>Code</category>
    
    <comments>http://websitetheme.com/archives/8-Standards-based-coding-is-easy.html#comments</comments>
    <wfw:comment>http://websitetheme.com/wfwcomment.php?cid=8</wfw:comment>

    <slash:comments>0</slash:comments>
    <wfw:commentRss>http://websitetheme.com/rss.php?version=2.0&amp;type=comments&amp;cid=8</wfw:commentRss>
    

    <author>nospam@example.com (Abdussamad Abdurrazzaq)</author>
    <content:encoded>
    Coding according to w3c standards is a major selling point for website designers these days. But how hard is it really? Consider some of the differences between valid XHTML transitional and the usual sloppy HTML coding:&lt;br /&gt;&lt;br /&gt;&lt;ul&gt;&lt;li&gt;All tags in XHTML are written in simple letters. So no more &amp;lt;P&amp;gt; or &amp;lt;BODY&amp;gt; but &amp;lt;p&amp;gt; or &amp;lt;body&amp;gt;. Saves typing really.&lt;/li&gt;&lt;li&gt;All tags are closed even ones that you wouldn&#039;t close in HTML. For example: &amp;lt;br /&amp;gt; . &lt;br /&gt;&lt;/li&gt;&lt;li&gt;img tags need to specify alternate text like &amp;lt;img src=&quot;gg.gif&quot; alt=&quot;somting&quot; /&amp;gt; .Note also the self closing of the img tag.&lt;br /&gt;&lt;/li&gt;&lt;/ul&gt;These are just some of the simple changes you have to make to get your site to validate. So in essence its not really a lot of work!&lt;br /&gt; 
    </content:encoded>

    <pubDate>Fri, 06 Oct 2006 11:03:37 -0700</pubDate>
    <guid isPermaLink="false">http://websitetheme.com/archives/8-guid.html</guid>
    <category>validation</category>
<category>w3c standards</category>

</item>
<item>
    <title>PHP introduction, code delimiters, comments and statements</title>
    <link>http://websitetheme.com/archives/7-PHP-introduction,-code-delimiters,-comments-and-statements.html</link>
            <category>PHP Tutorial</category>
    
    <comments>http://websitetheme.com/archives/7-PHP-introduction,-code-delimiters,-comments-and-statements.html#comments</comments>
    <wfw:comment>http://websitetheme.com/wfwcomment.php?cid=7</wfw:comment>

    <slash:comments>0</slash:comments>
    <wfw:commentRss>http://websitetheme.com/rss.php?version=2.0&amp;type=comments&amp;cid=7</wfw:commentRss>
    

    <author>nospam@example.com (Abdussamad Abdurrazzaq)</author>
    <content:encoded>
    &lt;h4&gt;Introduction&lt;/h4&gt;

&lt;p&gt;PHP Hypertext Preprocessor (PHP) is the most popular server-side scripting language on the world wide web. This guide is designed to introduce programmers familiar with other programming languages to PHP.&lt;/p&gt;

&lt;p&gt;
This guide will take the form of a series of posts that will cover PHP from the basics to intermediate level. In this post I will cover code delimiters, comments and PHP statements.
&lt;/p&gt; &lt;br /&gt;&lt;a href=&quot;http://websitetheme.com/archives/7-PHP-introduction,-code-delimiters,-comments-and-statements.html#extended&quot;&gt;Continue reading &quot;PHP introduction, code delimiters, comments and statements&quot;&lt;/a&gt;
    </content:encoded>

    <pubDate>Mon, 18 Sep 2006 19:04:30 -0700</pubDate>
    <guid isPermaLink="false">http://websitetheme.com/archives/7-guid.html</guid>
    
</item>
<item>
    <title>RoundedCorner free website theme</title>
    <link>http://websitetheme.com/archives/6-RoundedCorner-free-website-theme.html</link>
            <category>Themes</category>
    
    <comments>http://websitetheme.com/archives/6-RoundedCorner-free-website-theme.html#comments</comments>
    <wfw:comment>http://websitetheme.com/wfwcomment.php?cid=6</wfw:comment>

    <slash:comments>1</slash:comments>
    <wfw:commentRss>http://websitetheme.com/rss.php?version=2.0&amp;type=comments&amp;cid=6</wfw:commentRss>
    

    <author>nospam@example.com (Abdussamad Abdurrazzaq)</author>
    <content:encoded>
    
&lt;div style=&quot;width: 110px;&quot; class=&quot;serendipity_imageComment_left&quot;&gt;

&lt;div class=&quot;serendipity_imageComment_img&quot;&gt;

&lt;a href=&quot;http://websitetheme.com/uploads/roundedcorner_rs.png&quot; class=&quot;serendipity_image_link&quot;&gt;

&lt;img width=&quot;110&quot; height=&quot;77&quot; src=&quot;http://websitetheme.com/uploads/roundedcorner_rs.serendipityThumb.png&quot; /&gt;

&lt;/a&gt;

&lt;/div&gt;

&lt;div class=&quot;serendipity_imageComment_txt&quot;&gt;Click on thumbnail to see full sized version

&lt;/div&gt;

&lt;/div&gt;

&lt;div style=&quot;width: 110px;&quot; class=&quot;serendipity_imageComment_right&quot;&gt;&lt;div class=&quot;serendipity_imageComment_img&quot;&gt;&lt;a href=&quot;http://websitetheme.com/uploads/roundedcorner_both.png&quot; class=&quot;serendipity_image_link&quot;&gt;&lt;img width=&quot;110&quot; height=&quot;77&quot; src=&quot;http://websitetheme.com/uploads/roundedcorner_both.serendipityThumb.png&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;serendipity_imageComment_txt&quot;&gt;Click to view larger image.&lt;/div&gt;&lt;/div&gt;

A standards based pure CSS design that is full of rounded rectangles and soft shadows. An ideal theme for a blog or personal site, roundedcorner is free for most uses. I would appreciate it if you did not remove the link to my site in the footer of each page. This theme has 3 variations included in the zip file. &lt;br /&gt;&lt;a href=&quot;http://websitetheme.com/archives/6-RoundedCorner-free-website-theme.html#extended&quot;&gt;Continue reading &quot;RoundedCorner free website theme&quot;&lt;/a&gt;
    </content:encoded>

    <pubDate>Mon, 18 Sep 2006 15:44:34 -0700</pubDate>
    <guid isPermaLink="false">http://websitetheme.com/archives/6-guid.html</guid>
    <category>free templates</category>
<category>free themes</category>
<category>themes</category>
<category>website design</category>

</item>
<item>
    <title>CSS button hovers without the lag</title>
    <link>http://websitetheme.com/archives/5-CSS-button-hovers-without-the-lag.html</link>
            <category>Code</category>
    
    <comments>http://websitetheme.com/archives/5-CSS-button-hovers-without-the-lag.html#comments</comments>
    <wfw:comment>http://websitetheme.com/wfwcomment.php?cid=5</wfw:comment>

    <slash:comments>0</slash:comments>
    <wfw:commentRss>http://websitetheme.com/rss.php?version=2.0&amp;type=comments&amp;cid=5</wfw:commentRss>
    

    <author>nospam@example.com (Abdussamad Abdurrazzaq)</author>
    <content:encoded>
    &lt;div class=&quot;serendipity_imageComment_right&quot; style=&quot;width: 136px&quot;&gt;&lt;div class=&quot;serendipity_imageComment_img&quot;&gt;&lt;img width=&#039;136&#039; height=&#039;84&#039;  src=&quot;http://websitetheme.com/uploads/button.jpg&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;&lt;div class=&quot;serendipity_imageComment_txt&quot;&gt;Both the hover (bottom) and normal (top) states of the button are in one image. &lt;/div&gt;&lt;/div&gt;One of the best features of css is the ability to perform button hovers without java script. By button hovers I mean creating links that have different background images based on whether the mouse pointer is over the link or not. With CSS this is as simple as setting different background images for the a tag and the a:hover pseudo class:

&lt;div class=&quot;css&quot; style=&quot;text-align: left&quot;&gt;&lt;ol&gt;&lt;li style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; color: black; font-weight: normal; font-style: normal;&quot;&gt;&lt;div style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; font-weight: normal;&quot;&gt;a&lt;span style=&quot;color: #66cc66;&quot;&gt;&amp;#123;&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;li style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; color: black; font-weight: normal; font-style: normal;&quot;&gt;&lt;div style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; font-weight: normal;&quot;&gt;&lt;span style=&quot;color: #000000; font-weight: bold;&quot;&gt;background-image&lt;/span&gt;:&lt;span style=&quot;color: #993333;&quot;&gt;url&lt;/span&gt;&lt;span style=&quot;color: #66cc66;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #ff0000;&quot;&gt;&quot;img/normal.png&quot;&lt;/span&gt;&lt;span style=&quot;color: #66cc66;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;/div&gt;&lt;/li&gt;&lt;li style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; color: black; font-weight: normal; font-style: normal;&quot;&gt;&lt;div style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; font-weight: normal;&quot;&gt;&lt;span style=&quot;color: #66cc66;&quot;&gt;&amp;#125;&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;li style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; color: black; font-weight: normal; font-style: normal;&quot;&gt;&lt;div style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; font-weight: normal;&quot;&gt;a:hover&lt;span style=&quot;color: #66cc66;&quot;&gt;&amp;#123;&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;li style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; color: black; font-weight: normal; font-style: normal;&quot;&gt;&lt;div style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; font-weight: normal;&quot;&gt;&lt;span style=&quot;color: #000000; font-weight: bold;&quot;&gt;background-image&lt;/span&gt;:&lt;span style=&quot;color: #993333;&quot;&gt;url&lt;/span&gt;&lt;span style=&quot;color: #66cc66;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #ff0000;&quot;&gt;&quot;img/mouseover.png&quot;&lt;/span&gt;&lt;span style=&quot;color: #66cc66;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;/div&gt;&lt;/li&gt;&lt;li style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; color: black; font-weight: normal; font-style: normal;&quot;&gt;&lt;div style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; font-weight: normal;&quot;&gt;&lt;span style=&quot;color: #66cc66;&quot;&gt;&amp;#125;&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;li style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; color: black; font-weight: normal; font-style: normal;&quot;&gt;&lt;div style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; font-weight: normal;&quot;&gt;&amp;#160;&lt;/div&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/div&gt;
&lt;p&gt;The image specified in the a:hover class will be displayed when the user moves the mouse pointer over an image. Once the user moves the mouse pointer away from the image it will revert to normal.png as specified in the a class.&lt;/p&gt;

&lt;p&gt;This technique is an easy way to implement button hovers but it has one flaw. When the user moves the mouse over the link for the first time there is a time lag during which the mouseover.png image is fetched by the browser. Therefore the user does not see this effect immediately.Whats the solution? Well I discovered it while going through the code of the free wordpress theme &lt;a href=&quot;http://www.jide.fr/english/downloads/template-freshy-wordpress/&quot;  title=&quot;http://www.jide.fr/english/downloads/template-freshy-wordpress/&quot;&gt;freshy&lt;/a&gt;.
&lt;/p&gt;&lt;p&gt;
The author of that theme Julien  De Luca uses an interesting techinque. Both the normal state and the hover state of the button are placed in the same image. However the position of the background is changed depending on hover or not:&lt;/p&gt;

&lt;div class=&quot;css&quot; style=&quot;text-align: left&quot;&gt;&lt;ol&gt;&lt;li style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; color: black; font-weight: normal; font-style: normal;&quot;&gt;&lt;div style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; font-weight: normal;&quot;&gt;a &lt;span style=&quot;color: #66cc66;&quot;&gt;&amp;#123;&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;li style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; color: black; font-weight: normal; font-style: normal;&quot;&gt;&lt;div style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; font-weight: normal;&quot;&gt;&lt;span style=&quot;color: #000000; font-weight: bold;&quot;&gt;background-image&lt;/span&gt;:&lt;span style=&quot;color: #993333;&quot;&gt;url&lt;/span&gt;&lt;span style=&quot;color: #66cc66;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #ff0000;&quot;&gt;&quot;normal.png&quot;&lt;/span&gt;&lt;span style=&quot;color: #66cc66;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;/div&gt;&lt;/li&gt;&lt;li style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; color: black; font-weight: normal; font-style: normal;&quot;&gt;&lt;div style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; font-weight: normal;&quot;&gt;background-position&lt;span style=&quot;color: #3333ff;&quot;&gt;:&lt;span style=&quot;color: #000000; font-weight: bold;&quot;&gt;top&lt;/span&gt; &lt;/span&gt;left;&lt;/div&gt;&lt;/li&gt;&lt;li style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; color: black; font-weight: normal; font-style: normal;&quot;&gt;&lt;div style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; font-weight: normal;&quot;&gt;&amp;#160;&lt;/div&gt;&lt;/li&gt;&lt;li style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; color: black; font-weight: normal; font-style: normal;&quot;&gt;&lt;div style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; font-weight: normal;&quot;&gt;&lt;span style=&quot;color: #66cc66;&quot;&gt;&amp;#125;&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;li style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; color: black; font-weight: normal; font-style: normal;&quot;&gt;&lt;div style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; font-weight: normal;&quot;&gt;&amp;#160;&lt;/div&gt;&lt;/li&gt;&lt;li style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; color: black; font-weight: normal; font-style: normal;&quot;&gt;&lt;div style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; font-weight: normal;&quot;&gt;a:hover&lt;span style=&quot;color: #66cc66;&quot;&gt;&amp;#123;&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;li style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; color: black; font-weight: normal; font-style: normal;&quot;&gt;&lt;div style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; font-weight: normal;&quot;&gt;background-position&lt;span style=&quot;color: #3333ff;&quot;&gt;:&lt;span style=&quot;color: #000000; font-weight: bold;&quot;&gt;bottom&lt;/span&gt; &lt;/span&gt;left;&lt;/div&gt;&lt;/li&gt;&lt;li style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; color: black; font-weight: normal; font-style: normal;&quot;&gt;&lt;div style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; font-weight: normal;&quot;&gt;&lt;span style=&quot;color: #66cc66;&quot;&gt;&amp;#125;&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;li style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; color: black; font-weight: normal; font-style: normal;&quot;&gt;&lt;div style=&quot;font-family: &#039;Courier New&#039;, Courier, monospace; font-weight: normal;&quot;&gt;&amp;#160;&lt;/div&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/div&gt;
&lt;p&gt;
Using this technique you can remove the time lag because the browser has to fetch only one image that contains both normal and hover states.&lt;/p&gt; 
    </content:encoded>

    <pubDate>Sun, 17 Sep 2006 11:00:52 -0700</pubDate>
    <guid isPermaLink="false">http://websitetheme.com/archives/5-guid.html</guid>
    <category>website design</category>

</item>
<item>
    <title>Search engine optimization basics</title>
    <link>http://websitetheme.com/archives/4-Search-engine-optimization-basics.html</link>
            <category>Code</category>
            <category>General website design</category>
    
    <comments>http://websitetheme.com/archives/4-Search-engine-optimization-basics.html#comments</comments>
    <wfw:comment>http://websitetheme.com/wfwcomment.php?cid=4</wfw:comment>

    <slash:comments>0</slash:comments>
    <wfw:commentRss>http://websitetheme.com/rss.php?version=2.0&amp;type=comments&amp;cid=4</wfw:commentRss>
    

    <author>nospam@example.com (Abdussamad Abdurrazzaq)</author>
    <content:encoded>
    Search engines are used by all netizens to find useful content. Search Engine Optimization or SEO is the art of developing websites that enjoy a good position on search engine results pages. Website designers and developers are keen to see their websites succeed.&amp;#160; Optimizing thier websites for search engine traffic can really help improve their website&#039;s visibility. In this post I examine some of the key factors that affect search engine rankings. &lt;br /&gt;&lt;a href=&quot;http://websitetheme.com/archives/4-Search-engine-optimization-basics.html#extended&quot;&gt;Continue reading &quot;Search engine optimization basics&quot;&lt;/a&gt;
    </content:encoded>

    <pubDate>Thu, 17 Aug 2006 21:49:36 -0700</pubDate>
    <guid isPermaLink="false">http://websitetheme.com/archives/4-guid.html</guid>
    <category>search engine optimization</category>
<category>SEO</category>
<category>website design</category>

</item>
<item>
    <title>Firefox Website Design Extensions</title>
    <link>http://websitetheme.com/archives/2-Firefox-Website-Design-Extensions.html</link>
            <category>General website design</category>
            <category>Software</category>
    
    <comments>http://websitetheme.com/archives/2-Firefox-Website-Design-Extensions.html#comments</comments>
    <wfw:comment>http://websitetheme.com/wfwcomment.php?cid=2</wfw:comment>

    <slash:comments>0</slash:comments>
    <wfw:commentRss>http://websitetheme.com/rss.php?version=2.0&amp;type=comments&amp;cid=2</wfw:commentRss>
    

    <author>nospam@example.com (Abdussamad Abdurrazzaq)</author>
    <content:encoded>
    Like most website designers I am addicted to Mozilla Firefox. I have been using this browser since its 0.8 release version. I was first exposed to it when I switched to using Linux as my primary OS for a short while. In those days firefox was known as Firebird. But you really can&#039;t beat its feature set now. &lt;br /&gt;&lt;br /&gt;One of the great things about Firefox is that it can be extended with extensions. These extensions add functionality to the browser. In this post I will examine a few of the Firefox extensions that aid website design. &lt;br /&gt;&lt;a href=&quot;http://websitetheme.com/archives/2-Firefox-Website-Design-Extensions.html#extended&quot;&gt;Continue reading &quot;Firefox Website Design Extensions&quot;&lt;/a&gt;
    </content:encoded>

    <pubDate>Tue, 15 Aug 2006 19:26:21 -0700</pubDate>
    <guid isPermaLink="false">http://websitetheme.com/archives/2-guid.html</guid>
    <category>validation</category>
<category>w3c standards</category>
<category>website design tools</category>

</item>
<item>
    <title>Domain WebsiteTheme.com For Sale</title>
    <link>http://websitetheme.com/archives/1-Domain-WebsiteTheme.com-For-Sale.html</link>
            <category>General website design</category>
    
    <comments>http://websitetheme.com/archives/1-Domain-WebsiteTheme.com-For-Sale.html#comments</comments>
    <wfw:comment>http://websitetheme.com/wfwcomment.php?cid=1</wfw:comment>

    <slash:comments>0</slash:comments>
    <wfw:commentRss>http://websitetheme.com/rss.php?version=2.0&amp;type=comments&amp;cid=1</wfw:commentRss>
    

    <author>nospam@example.com (Abdussamad Abdurrazzaq)</author>
    <content:encoded>
    &lt;p&gt;This domain is for sale. The great thing about this domain is that it includes two keywords &amp;quot;website&amp;quot; and &amp;quot;theme&amp;quot; related to website design and development. It is also a short and easy to remember dot com. &lt;/p&gt; &lt;br /&gt;&lt;a href=&quot;http://websitetheme.com/archives/1-Domain-WebsiteTheme.com-For-Sale.html#extended&quot;&gt;Continue reading &quot;Domain WebsiteTheme.com For Sale&quot;&lt;/a&gt;
    </content:encoded>

    <pubDate>Fri, 11 Aug 2006 12:28:43 -0700</pubDate>
    <guid isPermaLink="false">http://websitetheme.com/archives/1-guid.html</guid>
    <category>domain for sale</category>
<category>domain name industry</category>

</item>

</channel>
</rss>
