adsense tricks & templets

Releasing Mind Blowing Magazine style Blogger Template "Falkner Press"

2011-03-30T13:17:00.000-07:00

After the huge hit of my previous two Magazine style Blogger Templates Turnout Mag and SchemerMag, here is my latest yet another Mind Blowing Blogger Template "Falkner Press".
Yes! It's simply Mind Blowing with so many cool features including Automatic Thumbnails and Automatic Post summarize on homepage, Youtube video integration,etc.
This was converted from a wordpress theme designed by CamelGraph.com.

LIVE DEMO | DOWNLOAD

Main Features:
* Automatic Thumbnails on posts
* Automatic Post Summarize
* Featured Content Slider
* Adsense ready
* PSD Custom Logo Included
* Youtube Video embedding Integrated
* Fully SEO Optimized
* Advertisement Block Ready
* 3 Columns
* Social Bookmarking Icons
* Twitter Updates widget
* Feedburner Email Subscription ready
* Thumbnails on Recent Posts in Sidebar
* Integrated Search box
* Beautiful top Navigation bar
* Cross-browser compatible
* and many more....

Step by Step Installation Guide:

(Make sure you backup your current template before installing any new template)

Step 0 : First Follow the basic installation steps here.

Step 1 : Edit the Logo

The logo *psd (photoshop) file is included in the download file. Open it with Photoshop and Edit the logo and Save it in .jpg format.
Next, upload that image to some image host like tinypic, photobucket,etc.. and get the image link to that file.
Help : Don't have photoshop ? or don't know how to edit the logo ? Leave a comment here with your site name.. I'll make it for you..
If you want the logo quickly.. Post your request here. I'll quickly help you out!

Go to Layout » Edit html
Find this url



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNcgPT_FmwOxfAXeMJ5lckmtlSgiWYGqd51V65XuNVn9-5ffmj5Nj83MvzHKhzkTObWYmZ3KYlxdwcffBSCROZYMZ4VtQ-m3QHa-xO74XZ4MbvMaFVTqwXWmfLHLfA6VGJg4f2FDt8QKEz/

and replace it with your image url.

Step 2 : Edit the top Navigation links

Go to Layout » Edit html and find this code

<ul>



<li><a expr:href='data:blog.homepageUrl'>Home</a></li>



<li><a href='WEBSITE URL HERE'>About</a></li>



<li><a href='WEBSITE URL HERE'>Archives</a></li>

<li><a href='WEBSITE URL HERE'>Contact</a></li>





<li><a href='WEBSITE URL HERE'>Disclaimer</a></li>





<li><a href='WEBSITE URL HERE'>Forum</a></li>





<li><a href='WEBSITE URL HERE'>Subscribe</a></li>





<li><a href='WEBSITE URL HERE'>History</a></li>





<li><a href='WEBSITE URL HERE'>Profiles</a></li></ul>

See the pattern..you can easily understand. Simply replace the WEBSITE URL HERE with your target url. Also, Edit the anchor texts to your liking (About,Archives,Contact,etc)

Step 3 : Edit the Latest Twits

If you use twitter, You can use the integrated twitter twits widget. Simply find this



<a href='http://twitter.com/bloggertricks' id='twitter-link' style='display:block;text-align:right;'>follow me on Twitter</a>



</div>



<script src='http://twitter.com/javascripts/blogger.js' type='text/javascript'/>



<script src='http://twitter.com/statuses/user_timeline/bloggertricks.json?callback=twitterCallback2&amp;count=1' type='text/javascript'/>

and replace bloggertricks with your twitter id.

Don't use Twitter...? then simply delete this code from the template.

From...

<b:widget id='HTML5' locked='false' title='Twitter' type='HTML'>



...................



...............



<script   src='http://twitter.com/statuses/user_timeline/bloggertricks.json?callback=twitterCallback2&amp;count=1'  type='text/javascript'/>



</div>



</div>



<b:include name='quickedit'/>



</b:includable>



</b:widget>

Step 4: Edit Feedburner Email subscription and Feed count Button

This is another cool feature in this template.. built in Email subscription form and Feed count button.

Search for this line



http://feedburner.google.com/fb/a/mailverify?uri=bloggertricksdotcom

and next, this line



<p><a href='http://feeds2.feedburner.com/bloggertricksdotcom'><img alt='' height='26' src='http://feeds2.feedburner.com/~fc/bloggertricksdotcom?bg=FD6D00&amp;fg=202931&amp;anim=1' style='border:0' width='88'/></a></p>

and Edit those urls to your feedburner links.
Don't have Feedburner yet ? You can signup here.

Step 5 : Add Youtube Video

Go to Layout tab.. and you can see like this

Click on the edit button and paste your youtube video code.
Don't forget to change the width and height of the video to 250 x 190 px to fit perfectly in the layout. You can edit the width and height values in the youtube embed code.
Help: How to add Youtube videos to Blogger

Don't want Youtube Video Widget ? then, simply remove this code from the template.



<b:widget id='HTML2' locked='true' title='VIDEO (250 x 190)' type='HTML'>



<b:includable id='main'>



<!-- only display title if it's non-empty -->



<data:content/>



<b:include name='quickedit'/>



</b:includable>



</b:widget>

Step 6 : Setup Mini Updates (Recent Posts with thumbnails)

This template has inbuilt Recent Posts with Thumbnails widget. All you have to do is enter your blog url and it will do the rest.
Look for this code in the template



home_page = &quot;http://falknerpress.blogspot.com/&quot;;

and replace the url with your Blog url.

Step 7 : Edit Social Bookmarking links

In the footer, you will see three widgets, 1.About me 2. Be my Frined? and 3. Advertisement widget.
The 1 & 3 widgets can be directly added by going to Layout tab.
All you need to edit is the second widget 'Be my Friend'. Using Social Bookmarking sites is a smart way to drive traffic to your sites.. So, if you don't have any of those accounts, Just take time to register..they are free and worth it :)

Find these lines:

<ul>





<li><a href='http://your-feedburner-url.com' target='_blank'>Subscribe</a></li>





<li><a href='http://digg.com/users/bloggertricks' target='_blank'>Digg</a></li>





<li><a href='http://www.facebook.com/people/bloggertricks' target='_blank'>Facebook</a></li>





<li><a href='http://bloggertricks.stumbleupon.com'>Stumble It!</a></li>





</ul>





</div>



<div class='share-list2'>





<ul>





<li><a href='http://technorati.com/faves?add=http://your-blog.blogspot.com/'>Technorati</a></li>





<li><a href='http://twitter.com/bloggertricks' target='_blank'>Twitter</a></li>





</ul>

and Edit them accordingly.

Step 8 : Featured Content Slideshow

Check out the Live Demo to see how it looks.

Edit the Slideshow...
Go to Layout » Edit html and find these lines..
Observe the pattern, it's easy!
wait! First prepare your images... the images should be 490(width) x 280 (height) pixels. Use Photoshop or any other image editing software to crop the images to 490 x 280 px and then upload the images to some image host like photobucket,tinypic,etc.

Next, find this code

<div id='myGallery'>



<!-- First Picture Start -->



<div class='imageElement'>



<h3>Title One </h3>



<p/>



<a class='open' href='http://bloggertricks.com'/>



<img alt='Marley And Me' class='full' src='IMAGE URL'/>



<img alt='Marley And Me' class='thumbnail' src='http://54800.com/wp-content/uploads/a1.jpg'/>



</div>



<!-- First Picture End -->



.........................................



..........................................



</div>

The pattern is like this



<div id='myGallery'>





<!-- First Picture Start -->





<div class='imageElement'>





<h3>Title 1  </h3>





<p/>





<a class='open' href='LINK 1 '/>





<img alt='Marley And Me' class='full' src='URL OF IMAGE 1 '/>





</div>





<!-- First Picture End -->





<!-- Second Picture Start -->





<div class='imageElement'>





<h3>Title 2  </h3>





<p/>





<a class='open' href='LINK 2 '/>





<img alt='Marley And Me' class='full' src='URL OF IMAGE 2 '/>





</div>





<!-- Second Picture End -->





<!-- Third Picture Start -->





<div class='imageElement'>





<h3>Title 3  </h3>





<p/>





<a class='open' href='LINK 3 '/>





<img alt='Marley And Me' class='full' src='URL OF IMAGE 3 '/>





</div>





<!-- Third Picture End -->







</div>

Got it? Now edit those links and Save the Changes!!
Now, FalknerPress template is successfully installed!

Extras

Here are few more things you can learn about this template..
Adsense Color Codes:

Here is the Color Palattes you can use to perfectly blend your adsense ads in the layout

1. Adsense in Left sidebar:
Preview:

Colors to use:

2. Adsense in Right sidebar:

Preview:

Colors to use:

3. Adsense just below Featured Content Slideshow:
(468 x 60px)

SAME COLORS as 2nd one

4. Adsense in Footer:
Colors to use:

That's it guys! Hope you like the template :D

Like the template? or If you have any questions ? Comment here...

[Hack] How to Post Larger (HQ) Images in Blogger Posts

2011-03-30T13:12:00.000-07:00

This is one of the most wanted blogger hacks, which makes it possible to post big size pictures in blogger posts.
Normally, If you upload a large image to blogger(with large thumb size selected), it will automatically resize it and then post it as thumbnail . But, the image quality of the resized image is very poor. So, to make the image look more clean and sharper, this trick will come handy.

Normally Uploaded Image: (with large thumbnail selected)

Image after applying the hack:

So, lets learn how to do this..

1.First, calculate how much image size(large) you want to display ( normally, its just a bit less than your main body width). Suppose, take this blog as an example, the main body width is about 570px. So, the maximum width to post a large image is 570px. But, to make the image looks nice, we have to give some padding to it.so,choose the width which is a bit less than the post body width.. like 560px.

Now, Go to Layout » Edit html

Find this

]]></b:skin>

Add this before that line:

img {
max-width: 560px;
width: expression(this.width > 560 ? 560: true);
}

Change the value in red depending on the previous step.

Note: Do check if you have the img{ tag already in your template. If its there, just add the additional couple of lines to it.

max-width: 560px;
width: expression(this.width > 560 ? 560: true);

Save the changes.

2. Now, while doing your posts, upload the images normally like you did previously. Once the image is uploaded, go to Edit html tab, and the image code will look something like this

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1jNFS8yCkEm-I2_wfD5fLNcVEfCk3j6DJN1xFDuH0fmIIelXPSMJ-VrkKIdIsKXjo4jJrz8EZXuVsJZJEzzw-jJDFRIlLs0ZYHJS8wA_lwYO7WZnvS_HqOQEnOmrQtuY3LPtsce_rT5DZ/s1600-h/megan+fox.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 280px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1jNFS8yCkEm-I2_wfD5fLNcVEfCk3j6DJN1xFDuH0fmIIelXPSMJ-VrkKIdIsKXjo4jJrz8EZXuVsJZJEzzw-jJDFRIlLs0ZYHJS8wA_lwYO7WZnvS_HqOQEnOmrQtuY3LPtsce_rT5DZ/s400/megan+fox.jpg" alt="Normal Picture without the hack" id="BLOGGER_PHOTO_ID_5350218059319919970" border="0" /></a>

All you have to do is Just remove that bolded text (width and height attributes) and replace s400 to s800.

So, the final code looks like this

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1jNFS8yCkEm-I2_wfD5fLNcVEfCk3j6DJN1xFDuH0fmIIelXPSMJ-VrkKIdIsKXjo4jJrz8EZXuVsJZJEzzw-jJDFRIlLs0ZYHJS8wA_lwYO7WZnvS_HqOQEnOmrQtuY3LPtsce_rT5DZ/s1600-h/megan+fox.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1jNFS8yCkEm-I2_wfD5fLNcVEfCk3j6DJN1xFDuH0fmIIelXPSMJ-VrkKIdIsKXjo4jJrz8EZXuVsJZJEzzw-jJDFRIlLs0ZYHJS8wA_lwYO7WZnvS_HqOQEnOmrQtuY3LPtsce_rT5DZ/s800/megan+fox.jpg" alt="Normal Picture without the hack" id="BLOGGER_PHOTO_ID_5350218059319919970" border="0" /></a>

Done! Now, your uploaded image will look big in the post.

How to Use Blogger to Upload your Javascript (.js) files ?

2011-03-30T13:07:00.000-07:00

This post explains how to host javascript(.js) files in blogger itself, so you don't need to worry about bandwidth limitations,etc:-

"How to host Javascript files for Free with unlimited bandwidth ?" is one of the most frequently asked questions in the blogger community. There are tons of hosting providers out there who can help you host your .js files for Free, but all have some bandwidth limitations and also they are not very reliable.

My friend Switcher previously explained how to use google sites to host your javascipt files for free in his blog (you can read that post here)... I used that method to host javascript files of my previously released magazine style blogger template ' Falkner Press '... but, the problem is even google sites have bandwidth limitations. So, if the bandwidth exceeds at a particular moment, the javascript files don't load which results in complete template mess up.

So, if you have those kind of problems, here is a simple trick.

I'll take Falkner Press template javascript files as an example.
If you look at the top of the template code, you see something like this:

So, as you can see, there are three javascript files (highlighted with colors) in the template. The files are hosted at google sites.

2. Copy each of those three links and paste them in your browser and download all those three files.

3. Now, open each file with Wordpad (not notepad) and copy that code.

4. Now, here is the trick...
Paste the code you copied (copied from first file) in your blogger template like this.



<script type='text/javascript'>



//<![CDATA[



PASTE THE JAVASCRIPT CODE HERE



//]]>



</script>

What about if you have 2 javascript files or three (like falkner press template) ? Simple! Just repeat the process again... like this..

5. And the Final and Most Important step... SAVE THE CHANGES ;)

Benefits of this trick:
» No file size limitations
» No bandwith limitations
» Super fast page loading (coz files are stored in blogger itself)

Free SEO Tools for Blogger

2011-03-30T13:00:00.000-07:00

If you want to get some good amount of visitors to your blog from search engines, you need to do a bit of SEO to your blog like meta tags, title tags, heading tags, choosing good keywords,etc.

But,its a bit difficult to do all that stuff on your own..especially if you are new to blogging and know less about design stuff(html,etc). Many sites are charging lots of bucks monthly for SEO tools like backlink checker, keyword researcher, etc. But, some people can't afford it.. So, I decided to create "SEO Tools" section here in BloggerTricks with full of useful SEO,design tools (ofcourse..for Free :D) which can help your blog traffic,search engine rankings,revenue..
With these tools, you can get to know lot of information about your blog like..your keywords, the keywords you should be targetting, how fast your blog is loading, your site pagerank,backlinks in search engines,etc.
I'm working on this new Tools section from a week now..and it is finally ready and I'm very happy to release it :)

Here are some of the top tools in the list..

Meta Tags Generator

Adding Meta Tags is one of the Best way to increase your search engine rankings.
This tool automatically creates you effective, error free, meta tags code. All you have to do is provide some basic information like your blog description,etc.. and it will generate your meta tags code for you.
If you don't know how to add meta tags to Blogger... Read this tutorial.

Help: How to add Meta Tags to Blogger

Blogger Ad Code Converter

Adding adsense inside blog posts can maximize your earnings a lot. But, if you directly paste adsense code in blog template, it will give you bx error. So, you need to first convert the code....and this tool will do just that. Just put your adsense code in the box and it will generate the encoded code which you can put anywhere you want in your template. You can also use this tool for any other codes too.. (abrite,chitika,etc)
I'll write a detailed post about how to add adsense inside blog posts in different positions soon..

Favicon Generator

Ever wondered about that short icon next to the address bar in your browser ? It is called FavIcon. It will give your blog a cool and professional look.
Use this Free Online Favicon Generator tool to create stunning favicons in many sizes like 16 x 16 , 32 x 32 , 48 x 48 , 64 x 64 ,etc.

Help: How to add Favicon in Blogger

Google Pagerank Checker

Google Pagerank plays a vital role in Search Engine Rankings. Improving your backlinks,etc can increase your pagerank.
Use this Free Online Google Pagerank Checker tool to check your blog pagerank easily.

Link Popularity/Backlinks Checker Tool

Increasing Quality Backlinks to your site increases your blog traffic, search engine rankings, pagerank,etc. So, try to get as many inbound backlinks as you can.

Use this Backlink Checker tool to check How many backlinks your site have in Google and Yahoo. Note down your site backlinks and check back from time to time to see if your backlinks increasing or not and try to improve your blog accordingly.

Keyword Suggestion Tool

If you are trying to rank for some specific keywords in search engines, you need to know all the relevant Keywords in that niche. Good Keywords increases your blog PPC, revenue and your traffic.

So, use this Free Keyword Suggestion Tool to get some keyword ideas.

Keyword Density Checker Tool

Repeating keywords often in your site make Search Engines to consider it as spam which decreases your SERP's (search engine rank positions). On the other hand, if you don't have proper keywords, you lose traffic and rankings.

So, use this free Keyword Density Checker tool to scan your blog and find out how often keywords are repeating and optimize your site according to that.

Instant Domain Name Search

If you're trying to register a domain name, you don't need to load hundreds of pages trying to find a good domain name. All you need is Just One ! With this Instant Domain Search Tool, you can know if a domain name is available or not (.com, .net or .org) instantly while you're typing.

Website Speed Test

Adding tons of images, javascript codes,etc slow down your blog page loading speed which is not good. So,Use this Free Website Speed Test checker tool to find out your website loading speed and try to optimize it as much as you can.

Online 3D Logo Maker Tool

Adding a cool header logo image to your blog makes your blog look more professional and nice.
But, what if you don't know photoshop, image editing well ? Don't worry! Use this Free Online Logo Maker tool to create Stunning Logo images to your blog. Hundreds of Font styles and text effects (shadow,reflection,glossy,etc) to choose from.

Email to Image Converter

Never type your email address directly in public forums,blogs,etc.. because, Spammers use harvesters to search email addresses and spam your inbox. So, instead of typing email address directly in your Contact Us Pages, forums,etc.. Use this Email to Image Converter tool to convert your email address into an image which makes it difficult for Email harvesters to find your address.

Nofollow Link Checker Tool

Search Engines don't follow and crawl links with nofollow tag and it don't benefit you SEO wise.. So, if you have your links in other sites, Use this tool to find out if they are using Nofollow tag to your links or not.

Reciprocal Link Checker

If you have purchased or exchanged links with other sites, make sure they are linking back to you properly. Use this Tool to scan your partner's website and find out if they are linking back to you or not.

Numbered Page Nagivation hack for Blogger

2011-03-30T12:53:00.000-07:00

This post explains how to add numbered page navigation widget to blogger (blogspot) blogs:

What is Numbered Page Navigation ?

In blogger, by default, you see Older posts, Newer Posts links near the bottom of the page which is useful to your blog visitors to navigate to other posts of your blog. But, the problem is.. people hardly notice those newer and older posts links.. which means.. less pageviews to your blog.

So, to increase your blog pageviews you can use this cool looking, advanced numbered page navigation to your blog.

So, how to add this to your Blogger blog ?
(first backup your blog template before editing anything)

1. Sign into your Blogger account » Settings » Formatting
Choose the number of posts you want to display on homepage

2. Go to Design » Edit html » tick the expand widget templates

Scroll down to the bottom of the template code and find this

</body>

PASTE this code above that line

<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <script type='text/javascript'> var pageCount=5; var displayPageNum=5; var upPageWord ='Previous'; var downPageWord ='Next'; </script> <script type='text/javascript'> //<![CDATA[ function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea" style="padding:10px 10px 10px 10px;"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}} //]]> </script> </b:if> </b:if>

In that above code, Edit the part that I highlighted in red color according to Step 1. It determines the number of posts that to be displayed per page. (Make sure, the number you set is same like the one in Step 1)

3. Control + F and search for all the occurrences of this code

'data:label.url'

and replace it with this

'data:label.url + "?&max-results=5"'

Again, the number in the above line depends on the number you set in the STEP 1.

4. Now, the styling part.. I've made x styles.. you can choose the one you wish..

(i) Default

Code

.showpageArea a { text-decoration:underline; background: #ffffff; padding: 10px 10px 10px 10px; } .showpageNum a { text-decoration:none; border: 1px solid #cccccc; border-top: 1px solid #cccccc; margin:0 3px; padding:3px; } .showpageNum a:hover { border: 1px solid #cccccc; background-color:#cccccc; } .showpagePoint { color:#333; text-decoration:none; border: 1px solid #cccccc; background: #cccccc; margin:0 3px; padding:3px; } .showpageOf { text-decoration:none; padding:3px; margin: 0 3px 0 0; } .showpage a { text-decoration:none; border: 1px solid #cccccc; padding:3px; } .showpage a:hover { text-decoration:none; } .showpageNum a:link,.showpage a:link { text-decoration:none; color:#333333; }

Copy the above code. Find this line and paste that code ABOVE IT.

]]></b:skin>

Save the changes.

I've made a few more navigation styles.. I'll post them in a few min.. look for it.

Free $75 Google Adwords Coupon

2011-03-29T22:04:00.000-07:00

17Share

Remember the last time we offered many useful online coupon codes like Godaddy Promo Codes, ClearTrip Coupons etc. Today you are going to find about a new useful coupon from Google Adwords which is going to give you a 75$ Free Advertising on Google and its network websites.
Why advertise on Google

Effective. Advertise on the most used search engine worldwide to grow your business.
Pay for results. You only pay when someone clicks on your ad and comes to your site.
Full control. You decide how much to invest and can change, pause or resume your ads anytime.

To get started you need to visit this link, and enter all the required details. Do make sure that you have a very good running business website which adwords team would review. If they find your website is worth advertising and if there is no prior advertising done on the ad network then the chances of getting the coupon increases.
Once the form is filled you will get the following message :

Thank you for your interest in Google AdWords! We will review your request for a free trial and if approved, we will send you your coupon code via email – please note that this may take a couple of hours! Thank you for your understanding.

Complete Working Godaddy Promo Codes and Coupons

2011-03-29T21:58:00.000-07:00

I recently got 2 enquiries regarding latest working coupons for Go Daddy Bulk Domain Registration
promo codes which can help you save a lot of money while you register / renew domain names. Also some of these coupons can help you save money when you are planning to book a web hosting package. These coupons keep expiring and new ones are announced regularly, so i will keep updating the list with new ones. Also some coupons may work for some people and they might not work for others because of your account levels and the membership plans you have with godaddy. Make sure you select a good domain name and read some domain name selection tips before registering new domains.
Here is the List of coupons and Promo Codes from Godaddy :
Some Latest Coupon Codes :
.mobi 10.29-gdp0129c renew
.INFO $6.99 -gdp0130c (renew)
.net $6.20-gdp0119d (reg+renew)
.com 7.15 -hash3 (reg+renew)
.ws $8 gdp0108e (renew)
.biz $6.99. -cjcbentld gets (renew)
.us $6.79 (renew)-cjcbentld
TDNAM -$2(discount) -gdbb776 -

OYH3 – $3 off / $6.95 any .COM
OYH1 – 10% off whatever
GDM1207 – 5.99$ for .org
BTPS7 – 20% any order of $50 or more
BTPS20 – 25% any order of $100 or more
BTPS4 – 10% off anything
OYH2 – $5 off a $30 purchase
chill1 – 10% off
chill2 – $5 off $30
chill3 – $6.95 .coms
hash1 – 10% off
hash2 – $5 off $30
hash3 – $6.95 .com registration
gdd1101c – 10% off any order of $40 or more
LOL65 gives you 5.99 .net buys
gdm0716 5.99 .net renewal and buys, 7.95 .coms
command10 10% off any order
gdd1101c – 10% off on orders $40 or more
OYH1 – 10% off anything
OYH2 – $5 off a $30 purchase
OYH3 – $6.95 for .COMs
Todd -10% off anything
cjcdeal105 – Save $5 off a $30
cjcdeal106 – Save $10 off a $50
cjcdeal107 – Save $20 off a $100
DLTV – Save $10
gdm1225g – 25% of an order of $75 or more
gdbb776 – .com and .net – $5.99 renewals
BTPS7 – 20% off any order of $50 or more
OYH3 – $3 off .com
Please make a comment here if the coupon works for you and in case it didnt work for you so others dont use it because these coupons expire regularly and new ones are announced.

Selecting Domain Name

2011-03-29T21:57:00.000-07:00

Everyone on the internet is always in search of domain names which are good easy to remember and available for registration because as of today already 96,787,761 domain names are redistered [source - Total domain names count]
Now while registering a domain name many people always look out for keyword stuffed domain names like www.mainkeywords.com but lets assume every 1 word and 2 word domains are all registered. Here are some suggestions while registering a domain name.
1. Always register a .com domain name rather than a .info domain name if you are really serious about your project.
2. Never book a domain name like www.applyforacreditcardonline.info just for targetting a keyword like “Apply credit card online” because keywords stuffing is not always suggested.
3. If you are looking for a credit card related domain name just give a search in google for the keyword – “Apply credit card” and you will find websites having the following title – Credit Card Applications, Compare Credit Card, Online Credit Card, Credit Card Offers, Online Credit Card, capital one credit card, Bank of america credit card, best credit cards, citibank credit card and lots more from which you need to reshuffle the keywords back and front and try to make a good combination using some additional words if necessary like – top, best, zoom, pedia, szoom, hub, shub, city, scity, time, stime, times, depot, sdepot, plus, plus, book, sbook, world, sworld, gears, base, guru, brains, minds, talk, 9, ideas and some more suffix or prefix keywords you would like to add. These keywords gives your domain name a professional look because the 4-6 words domains or hiphen domains dont look professional.
4. Here is a example domain name which we registered when we were looking for a domain name related to Health Tips – www.helpfulhealthtips.com which now Ranks #2 for the highly competitive keyword – “Health Tips” – Results 1 – 10 of about 250,000,000 for Health Tips. This is a clear example of why to add some related keyword in the suffix or prefix of a domain name.
5. Always register a domain name for a longer period if you are looking for a serious project on the website and dont signup with offers like 1$/year domain name registrations which companies like yahoo.com offer since they charge heavily on renewal time.
6. Dont buy expired domain names just by seeing their old page rank, because page rank does not help in long term and the expired domain would have got many previous penalities. Always go for a new fresh domain name registration or a domain name from a good seller which has a good archieve record with no search engines ban due to previous black hat optimization.
7.Go for a local TLD registration of you are targetting local visitors, for example if you are targeting visitors who would come to your website in search of gadgets information go for a domain name like gadgetsinformation.in
Will update here with more tips and tricks on domain name selection for Top Search engine rankings.

ow to Submit Tax Information for Google Adsense Account

2011-03-29T21:00:00.000-07:00

Adsense is an ad serving service for web-masters to show related ads in their site and earn from a CPC factor. Most Indian bloggers use adsense to show ads on their blog. There are a lots of guide to adsense basics, adsense setup, etc all information in Adsense Category.
Some of us earn much from adsense and make blogging our primary work, and some of us uses adsense as a extra earnings. But these earnings are tax payable. As a beginner, someone is curious about many factors, as will his earnings pre tax-deducted, or there’s need of PAN card, or how to pay tax to government, etc etc. The best thing here is that we don’t have to pay tax directly. We have to pay tax on our total income as it is some legal income, and the tax amount depends on how much you earn.
For individuals, the tax is free for earnings upto 1.40 lacs p.s, which is a very high limit for casual bloggers who earn through adsense a little pretty-some amount, only huge earners (pro bloggers) have to think about it. But as Google itself is in USA, it confirms from us if there is some US activities belonging to our site, content for which they will deduct and report tax information. We, Indian bloggers sign-up using India address, but Google re-confirms it from us after our unpaid earnings reach an amount of 10$ (actually more than 9$). We can get our payment by cheque once our earnings reach at-least 100$. We need to provide tax information or else our earnings will be on hold, and we cannot encash them, even we reach payment level. For providing correct tax information, follow the below screen-shots.

Go to Home–>Payments
Click on “Please submit your tax information”
Click on “Submit your information now” at next page
Give the three selection as “No” (one will come after at same page) and click on continue
Here is your confirmation page. There in the box, enter your name and submit the information, it’s your legal signature

Adsense Payments Settings

Submit Tax Information

Tax Info US Citizen

No US Activities

Verify Adsense PIN Number

Now we have to enter adsense PIN, which is mailed to us in our registered address. PIN mailer is sent after balance reaches 10$.

After you get our PIN in an envelope, follow following instructions,
Go to Home–>Payments
Click on “Please enter your PIN”

Then verify your address by giving the pin you got by mail. The page shows your PIN generation status and date. (Note: If you have not received your PIN within 3 weeks, you may request that it be resent.)

45 Link Building Tips To Help You Promote Your Blog

2011-03-29T02:07:00.000-07:00

Getting Links for Writing Content

1. Write content that is useful — Writing resourceful content will always attract links, hands down. If you write an article that is overflowing with useful and resourceful information — people will link to it.
2. Don’t forget trackbacks — This handy feature for WordPress can be great way of returning the compliment for a dedicated link.
3. Remind your readers to link to you — After each posts, just throw in a quick reminder that your article can be socially bookmarked or linked to.
4. Make a Top “X” List — Alex’s post on “100 Lists To Become A Better Blogger” is the most successful post on Blogussion, to-date. This just goes to prove how much people love “lists posts” such as your “Top X [Something]”
5. Debunk a Myth — There’s only one thing better than coming up with an idea, is to prove someone else one wrong. People love opposition and to see a debate bubble up, so don’t be afraid to challenge other people’s opinions.
6. Write with a touch of conspiracy — Just reinforcing tip #5. If you can create that atmosphere of retaliation, it will always raise a few eyebrows.
7. Spread the Love — Dedicate a post or two per week to link to other blogger’s posts that you found useful. More often than not, they will tell their readers “Mr.X linked to my post, how cool!”
8. Trade articles with webmasters — Similar to guest posting, just swap articles with a fellow webmaster.
9. Release a Press Release — This guide shows you how to write + submit a good Press Release.

Freebies/Giveaways for Link-Baiting

10. Hold a contest with an incentive. Contests are great for link-baiting because when people talk about it, there will always be “Check it out here” tagged along with it.
11. Release a free design. If you can make/buy a custom WP-Theme then release it for free to your guests, you can really kick off on a viral market. Just don’t forget the “Designed by [YOUR LINK]”
12. Release a free plugin. This serves a similar purpose as a design, but not so much with a direct back-link. Instead, if your plugin is useful, the incoming links will just grow exponentially.
13. When running a contest, reward your referees that bring the most referrals. This will encourage them to blog about your contest.

Connecting With Communities

14. Become active and post on relevant forums
15. Become active and comment on relevant blogs.
16. Try not to forget your signature on forums, otherwise the whole thing is an epic fail.
17. When commenting on blogs, try to use post URLs instead of just your Blog URL — This can help regulate your links evenly amongst your blog, and not just solely to your front page.
18. DON’T spam communities with your links to your site, offer a reason for them to visit and contribute with a purpose.
19. Submit your blog to directories — These are still helpful when it comes to getting indexed, especially these directories listed here.
20. Search up DoFollow Blogs/Forums — These will carry the most significant back-links.
21. Browse Craigslists and they can provide you with a free or cheap link.
22. Build on your Technorati Profile
23. Become a Sponsor — Whether it be a theme, whole website or a small project; the sponsors always get mentioned.
24. Run for Charity, and request others to help spread the word.
25. DON’T spam. This tip cannot be reinforced enough. A deleted comment will server no purpose.

Directories, Social Bookmarking + Discussion Groups.

26. Write content for Article directories — Publish content for directories such as eZineArticles, GoArticles or iSnare. In the “About Author’s” area, you can leave a link to your website.
27. Build a Squidoo Page — It’s easy and if you have the time to develop it, it can be very authoritative. If you don’t there’s heaps of services out there to help you out.
28. Join Discussions over at Yahoo! Answers — Providing useful answers, along with a link is an easy way to earn a back-link.
29. There’s also Google Groups — It’s almost the same as Yahoo! Answers, but owned by Google.
30. Submit your voice on Digg — First build a solid profile, where you have a network of loyal diggers. If you can hit the Digg front page, you are likely to get linked to by a lot of web-masters.
31. Build on your Twitter profile then link to your site using your “Bio Area.”
32. Tweet about your posts using Twitter, then request retweets from your followers.
33. Offer a “Tweet This Post” link on every post your write, this will make Tweeters easier to tweet about your article.

Direct Link Building

34. Contact your fellow bloggers with a personalized email — asking for an reciprocal link exchange. However, keep this to a minimal and be very selective in who you choose to trade with.
35. Post around on forums asking for reciprocal link exchanges, but yet again be warned on your selection.
36. If you are a part of organizations, clubs or schools — Ask them if they can link to you, because these types of websites are more often than not; authoritative.
37. DON’T ask Darren Rowse, ShoeMoney, Matt Cutts or Yahoo, MSN and Google for back-links. It’s just a waste of time, especially the last three “contacts”

Paid Link Building

38. Buy a Review — Most sites that offer reviews will naturally link to the reviewed product/site.
39. Many webmasters buy links on popular blogs for authority, even though it’s against the Google TOS (Use at your own risk)
40. Rent links from others website — Text-Link-Ads is most likely your best option.

Using Blogussion for Link Building

41 Leave a comment — All our comments are do-follow, so the link you chose as your URL will get link-love automatically.
42. Top Commentators — As you can see on the sidebar, we use this awesome plugin. Every month, our most contributing members will be rewarded with a link.
43. We use CommentLuv — Every comment you post, will carry a link to your latest blog posts.
44. Link to our posts — We utilize the uses of ‘trackbacks.’ Hence any links to our posts, will automatically be rewarded with a back-link to them! So, Why not share this post with your readers and followers?
45. Buy a Paid Review — We link to our reviewed sites/products.

31 Practical Website Interface Design Tutorials

2011-03-29T01:55:00.000-07:00

Designing a website has never been easier. If you asked a web designer who been long enough in the industry, they could tell you there’s actually not much resources, articles nor communication channels regarding web design/develop in the older days, let alone high quality free tutorials.
If you intend to create your own personal websites or perhaps redesign your blog theme, it’s not something too hard already. Thanks to generous designers and contributors, the net is full of great tutorials with step by step guides helping you building web interfaces and navigation. And with this blog post, we’ve probably just scratched the surface of what’s out there. We’ve previously showcased you 40 great Web Interface Design, and today we want to show you another 31 Practical Interface Design Photoshop tutorials. Full list after jump.

Headers and Navigation

Creating effective navigation for websites are essentially important as they determine how visitors surf and navigate your website. We’ve hand-picked some really sleek and simple navigation tutorials for the showcase. Making tweaks and changes will come pretty easy once you’ve mastered these tutorials.

Retro Dark Blue Header Design
How to create a dark blue header with a retro spin on it.
Wii Web Header
How to design the Wii header found at Nintendo.com.
Colorful Design Studio Header
How to create a colorful design studio header layout.
Metallic Header Design
Nature Theme Header
Professional Dark Header
How to create a simple, yet effective navigation for your website.
High-Detailed Plastic Navigation Bar
Navigation menus can vary from ordinary text links to the most complicated dropdown menus. This tutorial is describing detailed process of creation of “plastic” navigation bar.
Curled Corner
Learn how to create a sleek content box that features a curled corner to give it a more dimensional approach.
Green Navigation
How to make a stylish looking green navigation with a shine effect.
Blue on Black Navigation Bar
How to combine several layer styles to create a beautiful yet simple navigation bar.
Clean White Navigation Bar
Simplicity is the key to beautiful web layouts. Learn how to draw a beautiful navigation bar in Photoshop.
Modern Web Search Bar
How to create a modern web search bar with a drop down menu.
Dark Navigation Box
How to make a more advanced styled navigation box using some more effects and tools.
Clean Blue Navigation Box
How to use some tools and effects to make a navigation box for a web layout which you can apply the same techniques to make content boxes etc.
Create a Professional Gaming Header
How to create a professional gaming header design.
Volkswagen Inspired Navigation
This tutorial assumes that you know your way around Photoshop enough not to need too much hand-holding. You should know your way around the Layers palette and know how to add Layer Styles, use Custom Shapes and Clipping Masks without much explanation.
Design a Unique Bookmark Box
How to create a unique, and professional-styled bookmark/promote box for your personal Blog, or maybe even your website.

Full Layouts

For those who wish to create a website and with no idea at all, here are tutorials that guide you through designing the entire webpage layout, head to toe.

The Art Institute Photoshop Template
Easy steps to create a sleek template.
Talkmania Arhitecture layout
Creative Studio Web Page
Clean black and green webdesign
Unique Grungy Website Layout
How to design a cool grungy website layout.
Clean Business Layout Tutorial
Web 2.0 Blog Layout
Several new techniques are covered in this tutorial, such as interesting use of the drop shadow element. We’ll also cover creating a see-through navigation bar, as well as creating our own unique icons for this layout!
The Ultimate Grunge Design Tutorial
This tutorial will discuss how to create a fantastic grunge layout in Photoshop. It uses some techniques that are fairly common, and a couple that I’ve not seen discussed elsewhere before.
Real Estate Web Design
Create a clean and contemporary website design for a real estate related website.
Agency Layout
Vibrant Modern Blog Design in Photoshop
This tutorial will cover the process of designing a vibrant and colourful modern blog layout in Adobe Photoshop.
Photography portfolio
Awesome photography portfolio design with a lot of content boxes and an attractive look.
Konvicted Art
First photoshop tutorial and we thought it’s great.
Unique Desktop Layout
How to make a unique desktop style layer, using common work desk objects.

60 High Quality Free Web Templates and Layouts

2011-03-29T01:50:00.000-07:00

Full list after jump.

Greefies
This is a template that uses no tables, css and HTML only.
Demo | Download

Beauty co
Demo | Download

Beez design
Demo | Download

Compressed v2
A three-column, fixed-width template fit for 1024×768 screen resolutions.
Demo | Download

Jet 30 v2
Jet 30 is a free, tableless, W3C-compliant web design layout by Template World.
Demo | Download

Individual v2
Individual is a free, tableless, W3C-compliant web design layout by.
Demo | Download

Redish
Demo | Download

Facing
Demo | Download

Update
Demo | Download

Temper
Demo | Download

RS11
XHTML 1.0 Strict, CSS 2.0, No Javascript
Demo | Download

Imagination
Demo | Download

Stylish
Demo | Download

Simple Life 2.0
Demo | Download

Green House
The Green House is a free template from Free CSS Templates released under a Creative Commons Attribution 2.5 License.
Demo | Download

Snowglass 1.0
A free, fully standards-compliant CSS template designed by NodeThirtyThree for Free CSS Templates.
Demo | Download

Nightvision
Demo | Download

Glazed
Demo | Download

FrozenAge
Demo | Download

Earthling
Demo | Download

Keep It Simple
A grid-based, minimalist website template. Ideal for news websites and blogs with lots of contents.
Demo | Download

Vectorlover
A modern and stylish theme design which uses a combination of brown, green and gray colors. Has a fixed width and two-column layout. Ideal for personal and small websites.
Demo | Download

UrbanArtist
A light on dark template. Has a fixed width, two columns layout. The design is a combination of a dark background and bright colored text and headers.
Demo | Download

Techjunkie
Features a clean and modern design. Ideal for blogs and small websites. It has a 2 columns, fixed-width layout and uses a combination of blue, light green and muted colors.
Demo | Download

Unbound 1.0
A three-columns, fixed width CSS template suitable for blogs and news sites. It features a nice, clean design with an image header that can be easily replaced or modified.
Demo | Download

Colourise
Colourise 1.0 is a free, W3C-compliant, CSS-based website template by styleshout.com.
Demo | Download

Freshmedia
This website template features a simple and clean design. Has a two column layout and uses a combination of cool and muted colors
Demo | Download

EliteCircle
A fixed width, 2 column layout. This template features a simple, clean and classy design
Demo | Download

New Horizon
Fixed width, 2-column website template. A light on dark theme design with a nice colorful image header.
Demo | Download

Watch This
Demo | Download

Conceptnova
Demo | Download

Small Corporation
Demo | Download

Web Application
Demo | Download

Internet Studio
Demo | Download

Internet Corporation
Demo | Download

Internet Music
Demo | Download

Internet Market
Demo | Download

Organic Design
Demo | Download

New York Magazine
Demo | Download

Environmental Brand Design
Demo | Download

Eco Business
Demo | Download

The Autumn
Free web templates from kohout. See also Winter, Summer
Demo | Download

Green Web
Yet another free, tableless, W3C-compliant web design layout by Template World.
Demo | Download

Breaking On Top
Demo | Download

Apple Web
Demo | Download

Wallpaper Medialab
Demo | Download

The Watch Shop
Demo | Download

My Personal Page
Demo | Download

Squick Design
This is a web template, featuring 3 separate pages: Home, contact and portfolio.
Demo | Download

Surreal
Demo | Download

Colorus
Demo | Download

Clicker
Demo | Download

PG Photo Gallery
PG Photo Gallery also comes in black color.
Demo | Download

Organic Beauty
Demo | Download

News Portal
Demo | Download

Electronix
Demo | Download

BuBlue
Demo | Download

HarvestField 1.0
A fixed width, two column, W3C compliant layout. Has a nice-looking design that uses natural earthy colors.
Demo | Download

Brightsideoflife
Demo | Download

Coolwater
A simple and clean design. Uses a combination of light blue and green colors. Has a fixed width, two-columns Layout.
Demo | Download

40 (Really) Beautiful Web Page Templates in Photoshop PSD

2011-03-29T01:42:00.000-07:00

Thanks to all the help and references like Photoshop tutorials, icons, graphics and other design elements we can scoop from the Internet, designing websites has changed quite significantly over the pass few years. With the help of all these resources, designing a website can’t be too hard and the layout can’t go too wrong.

Today, we want to show you that now only your website can’t go too wrong, it can be eye-catching, even if you a novice Photoshop user. Here’s a list of 40 beautiful and professionally looking web layout in Photoshop PSD file. Hope this cuts your journey to your ideal websites, to a nearer distance.
Here are more Photoshop and template related post we’ve published:

Polo360 Download

Professional Business Download

6R Wooden Portfolio Download

Appswizards Download

Bizsolutions Download

ShopStar Download

Box & Cube Download

Business Time Download

Celeste Download

Corporatix Download

Crisp Presentation Download

Complexity Download

Business Company Download

Creative Studio Download

Design Tree Download

Education Website Download

One Page Portfolio Download

Herbal Treats Download

Insurance Company Download

IT Technologies Download

Minimalist Website Download

My Resort Download

Summer of love Download

Small Cellphone Download

Yogurt Shoppe Download

Web Source Download

Paper Clip Download

Smart Investors Download

Ecommerce Download

Creative portfolio Download

Excellent HTML Newsletter Templates

2011-03-29T01:41:00.000-07:00

1. 38 Free Elegant XHTML/CSS Website Templates

2. 60 High Quality Free Web Templates and Layouts

Campaign Monitor – 30 FREE HTML Newsletter Templates
Here is a neatly sorted collection of 30 well produced templates which have been tested against all major email clients and web mail, for example Outlook, Thunderbird and Gmail. One of the feature is that it already pre-sorts all the templates into those with left or right sidebars, or single column templates
Carbon Graffiti – 10 Free email marketing templates
Carbon Graffiti is a great design website, and one of the cool resources theyve made available are 10 free email marketing templates. Designs range from very simple basic ones to custom complex templates.
Aweber: – 5 Awesome Functional Newsletter Templates
Aweber has some of the best newsletter templates out there, and some of them go beyond a good design and are pretty darn functional as well. Here are 5 of the best from Aweber.
Download
This is a great email template to use when sending over a note asking someone to download a file. This template also comes in 3 flavors – one for PDFs, one for audio, and one for any other files, as well as 6 colors – so youre able to easily customize your readers download experience.

Welcome
This is a perfect email template to use send when youre welcoming new members to your service.

Blog Newsletter
If you write a blog, this is a great template to share your info and updates in a newsletter to build a stronger relationship with your readers.

Malibu
This email template was specially built to communicate promotional offers in a quick and efficient manner.

Outdoorsy
2-column (right-hand sidebar) email template with an organic feel and navigation links available to use in the header.
MailChimp – 4 basic flexible HTML email templates
Mailchip four basic, flexible templates that you can use to get started. They’ve been tested to render properly in all the major email programs, like Outlook 2007, Lotus Notes, Gmail, and more.
Cakemail – 17 Well Designed Newsletter Templates

More Free Newsletter Templates

Here are some other sites which also offer up free newsletter templates for download.

Interspire – 30 Free Newsletter templates
Stock Layouts – TechTimes theme
This is a beautifully designed theme, although it requires you to register (for free) on the site.
Octeth – 10 Free Email Templates
Hot Email Templates – 28 Free HTML Email Templates
Active Campaign – 11 Free Email Templates
Mach5 – 4 Free Email Templates
Omnistare Tools – 10 Free Email Newsletter Templates
A variety of free templates, but it requires (free) signup.
Benchmark – 3 Simple HTML Email Templates
Delivery Success – 10 Free Newsletter Templates
Templatesbox – 84 Free Newletter Templates

60 High Quality Photoshop PSD Files For Designers

2011-03-29T01:37:00.001-07:00

Having another designer’s PSD file is as good as owning a chef’s recipe book. The only difference is – we designers are willing share and sometimes we even distribute them ourselves so others can download and learn from our techniques.

Photoshop .PSD file reveals the techniques used on a specific design, it also tells us the style of the creator and most of the time there is something new we can learn from it. In today’s post, we want to bring to your attention some of the high quality and professionally designed Photoshop .PSD files that you can download. We suggest you consult the author before using them for commercial purposes. Full list after jump.

45 Fresh High Quality Photoshop PSD Files

2011-03-29T01:35:00.001-07:00

What’s great about .PSD files? For one, we can observe and learn how experts create awesome designs by exploring the different layers and techniques they use. Beginners can appreciate how different functions in Photoshop can affect their images, and hence gain an understanding of how to bring out their desired effects. What’s more, .PSD files allow us to experiment with several layers within the file itself, providing maximum customization for any curious user.

If you can recall, we had previously showcased 60 High Quality Photoshop PSD Files For Designers some time ago. Thankfully, designers are often willing to share their works to the public, so we now have yet another 45 Splendid High Quality PSD Files for downloads. We all hope designers will continue to showcase their creations to inspire others to pick up their exceptional knowledge and skills.
Full list after jump.

Android GUI

Blue Orb Wallpaper

Cars Logo

Chrome MkII

Curved Bill Baseball Template

Orb

Lunch

Radio

Retro Clock

Beer Can

Knob Mash

Miri’s grunge freebie

Nikon D90

Orange

PSD Book

Tree Leaves

Vector Glases and Jug

Art PSD

Camera Lens

Terra Nova

Uniq

25 Tools to Improve Your Website’s Usability

2011-03-29T01:25:00.001-07:00

Usability testing is test conducted to collect feedback and information from your website’s visitors or regular readers that can be very useful for future website revamp, enhancement or other adjustments. Designers and developers may have created websites according to specifications, but ultimately it is the users who will decide its creditability (how far it is usable), the highlights of the site and what does it lack of.

How to know whether a visitor likes your website? Usability tools provide an answer to this by tracking user’s actions. The tracked data gives you a precision of what a user like about your site, which area is the most prominent, most used and places which most users avoid. Do not underestimate the data collected because these figures can significantly boost up your site’s performance in terms of sales conversion rate, click-through and more.
There is no right or wrong time to improve your site. Usability test can be execute when you realize you need an improvement for your website or when you find that your site does not attract as much visitors anymore. Here are some of the best tools (web services) that tracks user’s actions in various methods and the output (end result) will deliver you the information you’ll need to improve your website’s usability. Some of them may not be free but there is always a price to pay for a good return. Have fun hunting for the right tool you need!

4Q Online Survey

Is the user really satisfied with the website? 4Q Online Survey, a free solution which gives you a complete detail about the visitors on your site such as why visitors visit your site, do they complete the tasks in a correct way and if not it will state out the reason what is stopping them. This survey can create a tremendous response among the customers.

Attention Wizard

Attention Wizard is a visual tool for landing pages which helps you increase your conversion rates and easily identify landing page problems. It operates on advanced artificial algorithm to stimulate human visual processing and attention. It also creates an attention heat map which predicts where a user will browse during the first few seconds of their visit. The results produced are 75% correlated with eye tracking and mouse tracking approaches. Comes in three versions of Lite, Pro and Pro Unwatermarked

ClickDensity

A full usability tool kit which adds more functionality than heat maps where the data from the real time visitors is use to improve information architecture, optimize link/advert placements, analyze/enhance stickiness and lastly, test/refine the content process. It tells you exactly where the users are clicking.
A small JavaScript code is provided when you sign up and when a visitor access the site, a small additional file is automatically downloaded which happens only once and which communicates all clicks that the user makes. Comes with a free trial version which can be later upgraded to any premium plan starting from ₤2.50 to ₤200.00.

ChalkMark

Chalkmark allows you to quickly create a project to take up a survey or test among the users on your UI prototype i.e. decide on what the user’s attempt, upload any image if necessary, view the results or the heat maps of each task and know how many users skipped the task. You can either sign up for free and access to three tolls or get access to unlimited tasks and tools on a monthly or annual basis.

ClickHeat

An open-source software under GPL license which is a heat map of hot and cold click zones on an HTML page with a keyword to define the page with JavaScript. It groups similar pages, tracks CSS layouts, and features a low logging activity

Clicktale

Clicktale allows you to visualize your visitors to watch the full browsing sessions of visitors, behavior analytics i.e. scroll to reach heatmaps, click heatmaps, mouse move heat maps and web analytics which greatly improves the site usability and boosts up the conversion rates. It also provides performance analytics, conversion analytics, link analytics, advanced filtering and market analytics like campaign tracking or realtime monitor.

Clixpy

Clixpy tracks almost everything from your visitors such as mouse movements, clicks, scrolls and form inputs. The actions can also be recorded which is useful as to find out the features which the users find easy or difficult, which feature attracts them the most and find out the reason why the users leave the site. This helps to optimize landing pages and helps you convert visitors to clients.

Concept Feedback

Concept Feedback gets quick website reviews, design, usability and marketing feedback from online professionals of the community. A Public Feedback is from the web professionals that belong to the community who give you an overall result. For Private Feedback, you can invite specific user to give u a feedback and also upload unlimited images then organize the results. An Expert Feedback is feedback from the experts in design, usability and marketing fields which can help you out in any circumstances.
Premium plans depend upon the number of concepts and users selected and a trial version included for free which can be used for 1 concept with 3 users.

CrazyEgg

CrazyEgg improves your sites usability by tracking pages i.e. what visitors do in your website, heat maps to track the clicks, Confetti to track the advanced things like Top 15 referrals, search terms, browser etc. Overlays, Lists, also let you block your system from data capturing, archive reports, Email notification and RSS notifications.

FeedbackArmy

A quick usability test where you could submit questions about your site and get 10 responses from Feedback Army’s reviewers for $15 and 50 responses at $55.

Feng GUI

Feng GUI stimulates human vision and creates heat maps predicting what a human will look for the first 5 seconds. Feng GUI Dashboard also offers a pre testing service for designers and developers to predict the performance by analyzing the levels of attention, brand effectiveness and replacement. It can identify the weak spots within an advertisement to improve and pulls out the key movements.

Five Second Test

Five Second Test helps you improve your landing pages and focusing on the key elements on your website through a set of questions which the users complete within five seconds and collect all the responses gathered. The set of questions are based on the screen-shot you updated. You can sign up for free to create your own test but might not get any responses. Other plans start from $20 for 100 responses and get a maximum of $200 for 1000 responses with unlimited public and private tests with faster results

Google Site Search

Google Site Search allows users to search your website through the Google Site Search. A hosted search solution which helps to display ads-free search results, increase the website conversion and sales, reduce support costs by enhancing self service, customizes the search box with flexible prices which is based on the number of queries and website addresses.

Kampyle

Kampyle gathers the insight and turns into action through Feedback and Form Analytic solutions. Gathers feedback from customers of what they think about your site, Feedback Dashboard & Reports to understand the real insights from user’s feedback and reply to Feedback through automatic or personalizes responses to strengthen your connection with users.

Loop 11

Loop 11 is a solution for consultants, designers and web managers to get the metrics and optimize a website’s potential. It has an easy process to create a professional usability test, collect responses and source them via a social media and finally analyze the data through the usability metrics then see the results instantly. Loop 11 supports over 40 languages and does not simplify reports.

OpenHallway

OpenHallway creates usability data by recording the users either remotely or locally then share the results with your clients. It creates a scenario with the instructions specified for the recording link where the user’s screen and voice are recorded and will be upload to your account.

Silverback

A software for usability testing for designers and developers which captures screen activity, records the tester’s face and voice. Has a Batch Export feature to save any selected sessions, tasks or projects and marks any noteworthy moments.

Site Tuners

SiteTuners are the creators of Attention Wizard. It guides you through the process in Conversion consulting as why there are problems in landing pages. They review your problems and answer your specific conversion related questions. After the review, they complete the process and present a text summary of the conversion issues. Through Land Page Testing they will decide the right optimization method, implement the changes and analyze the results and help you in getting the best conversion rate improvement quickly and easily.

TechSmith

Morae is a software created to understand your customer’s experiences and gather the insights clearly. Captures every move of the testing session through a web cam or digital camera and provides hard data and examples. One advantage in using Morae is, instead of analysis and reports, it automatically calculates and presents the effectiveness, efficiency and satisfaction.

Usabilla

Usabilla helps website owner to learn about their customers which focuses on not only the data but also on gaining insights. Collects a visual feedback on webpage, mockups, wire frames or any images. Provide an easy way to collect feedback through a toolbox. You can use this service to measure task success and detect usability issues. Sign-up for a free account to get started with Usabilla.

Userfly

Userfly records user’s visits by tracking their mouse movements, clicks and form interactions. The recorded videos can be watched later to increase the conversions and to improve the performance of your website. Sign-up for free Userfly to record 10 captures or go for any premium plans which start from $10 till $200 giving you a maximum of 10000 captures per month and which can be stored for 90 days.

User Testing

UserTesting observes users in their environment, watches their activities, listens to them, follows with them through a set of question and finally annotates. Results or the problems encountered are gathered with the help of a panel of 24 x 7 users. Starts with an introductory price of $29 with an 1 year money back guarantee

Webnographer

Webnographer functions as a remote usability tester which collects the data, tests any website or web application or prototype in its natural environment gathering their actionable metrics. Captures the user’s thoughts through questionnaires. Prioritizes the previous data gathered and improves wherever necessary.

Webtrends

Optimize focuses on realizing the potential of your market and delivering the right content to the right people. Their approach to site optimization is done in 4 steps staring with a General Testing which is against all traffic, second step is testing your optimal content against key aspects like time of day, geo targeting, return against new visitor. Third step is to determine the optimal by segments and trying to target the maximum and personalize the content optimized by using the insights by marketers.

Website Optimiser

Website Optimizer, a free website testing and optimization tests and optimizes site’s content and design. This increases the value of the website and increases your revenue by driving more conversions and identifies the most effective elements of your website through A / B Split and multivariable testing. Requires minimal IT support to save your time, and faster speed and the graphical reports tell you the important aspect which is impacting or affecting your website.

These are the tools which we found useful, if you have come across any other interesting tools, share with us :)

jQuery Image Galleries & Sliders – Best Of

2011-03-29T01:14:00.001-07:00

jQuery image galleries and sliders are very common on portfolio sites and are also useful for any other type of site for displaying images and photos. Also, provide a good user experience and make viewing images more pleasant and intuitive on your website. With the advent of powerful JavaScript frameworks like jQuery, Prototype, Mootools etc., the quality of JavaScript based image galleries and slideshows have improved dramatically.

Today we’ve prepared for you a good list of the best jQuery image sliders and galleries plugins that can provide you with the resources that you need to get a gallery or a slider on your site.

Supersized

Demo | Download
Supersized is a fullscreen slidehow jQuery plugin. It supports image preloading with image cycling with transitioning effect.

Galleria

Demo | Download
Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded.

CU3ER Image Slider

Demo | Download
an image slider initially conceived to create 3D transitions between slides, turned out to be a convenient and multifunction solution that can be applied in a range of website building areas, from content slider to feature slider and image & banner rotator.

jQuery lightBox

Demo | Download
jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery’s selector.

Gallerific

Demo | Download
Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos.

Easy Slider

Demo | Download
Easy Slider is a jQuery plugin, you can set up your own options and is easy to implement.

S3 Slider : jQuery Image Gallery

Demo | Download
S3 Slider is a jQuery plugin with nice effects and with self image changing.

Anything Slider

Demo | Download
AnythingSlider is a jQuery Plugin with a lot of features( Slides can be anything, Navigation tabs are built and added dynamically …).

Coin Slider

Demo | Download
Coin Slider is a jQuery image slider with unique effects.

Cycle

Demo | Download
The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects.

Featured Content Slider

Demo | Download

Horinaja Plugin

Demo | Download
Horinaja is a ready to use slide show implementation, you can also use the mouse wheel to navigate between the slides.

jqFancy Transitions

Demo | Download
jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.

jQueryGlobe – jQuery Plugin

Demo | Download

Looped Slider

Demo | Download

Nivo Slider

Demo | Download
Nivo Slider is a new jQuery plugin with great features : 9 unique transition effects, Keyboard Navigation and Simple and clean.

Piecemaker XML Gallery

Demo | Download
Piecemaker is an open source 3D Flash image rotator gallery.

Pretty Photo

Demo | Download
prettyPhoto is a jQuery based lightbox clone. Not only does it support images, it also add support for videos, flash, YouTube, iFrames.

Slide Deck

Demo | Download
Slide Deck is an easy to implement with a great design.

Thickbox

Demo | Download
ThickBox is written in JavaScript. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Simple Slide

Demo | Download
Simple Slide is a jQuery slideshow plugin. It’s easy to use, small and flexible.

Yoxview

Demo | Download
YoxView is a free image and video viewer for websites. It’s written in javascript using jQuery and is available as a jQuery plugin.

That’s it ! Hope you enjoyed this collection and got inspired for your next projects !

50+ Nice Clean CSS Tab-Based Navigation Scripts

2011-03-29T01:06:00.000-07:00

Tab navigation has been one of the most fundamental element in any modern web structure. In order to make sure visitors can properly navigate through the website. One of the biggest challenge web designers and developers faced is to integrate a simple and nice tab navigation that not only don’t confuse, but helps visitors easily understand where they should be clicking.

Whether you are running a website or blog, tab navigation is probably one of the element that helps drives traffic to internal pages. Here we’ve compiled a mass list of 50+ nice clean and sleek CSS Tab-Based navigation samples you can adapt on your site. Full list after jump.

If you are web designer / developer, you might be interested in these few articles we’ve previously done:

jQuery Coda-Slider

Nice sleek tabs that slides through each tab.
[demo]
Perspective Tabs

Simple mootools plug-in that allows for a large number of tabs to fit into a small space.
[demo]
jQuery idTabs

It makes adding tabs into a website super simple. But it can also open the door to endless possiblities.
[demo]
Tab Accordian

Tab navigation with sleek animation using Moo FX.
[demo]
DHTML Goodies Tab Panes

Tab navigation with a close [x] button on each tab.
[demo]
AJAX Tabs (Rails redux)

Using Ajax to load information that does not need to be retrieved every time the user pulls the record.
[demo]
Ajax Project – Tabbed Page Interface

There are quite a few Javascript implementations of tabbed interfaces out there on the web. How much better, though, to be able to change from pagetab to pagetab without a page refresh? Here’s an example of a tabbed interface using Ajax to load the new pages.
[demo]
JQuery Nested Tab Set

Nested tab set done with the ExtJS UI Library.
[demo]
Ajax Tab Reloaded

Taken the idea of the sliding door tabs and mixed them up with a little javascript and ajax to make them very dynamic on the client side.
[demo]
14 Free Vertical CSS Menus

Free nicely designed tabs from explodingboy.
[demo]
Control.Tabs

Control.Tabs attaches creates a tabbed interface from an unordered list of links/anchors that point to any elements on your page that have an id attribute.
[demo]
JavaScript tabs with jQuery

jQuery plugin that lets you create JavaScript tabs very easily. Examples of simple tabs, custom tabs, slide effects, fade effects and callbacks demos available.
[demo]
Yahoo TabView

Sample tabs based on Yahoo UI Library.
[demo]
DHTML Ajax Tabs Content Script

This is a versatile Ajax Tabs Content script that lets you display content pulled from external files inside a DIV and organized via CSS tabs. A fully unobtrusive, CSS and HTML based script, it supports practical features such as persistence of the active tab (ie: when page is reloaded), an "IFRAME" mode, a "slideshow" mode, ability to expand/contract arbitrary DIVs on the page at the same time, nested tabs, and much more.
[demo]
JavaScript Tabifier

Automatically create an HTML tab interface using plug-and-play JavaScript.
[demo]
Tabtastic
This library is a simple way to implement tabs on your page using CSS, a little JS, and semantic markup which degrades gracefully on browsers with CSS unavailable or disabled.
[demo]
KollerMedia Tabmenu

Tabs for images as icon, changes when mouseover.
[demo]
dhtmlxTabber

dhtmlxTabbar is a JavaScript tabbar control for creating dynamic tabbed-navigation interface. This Ajax-enabled UI component lets you add feature-rich and nice looking tabs to your site or web application.
[demo]
Centered Tabs with CSS

We’re constrained to either left- or right-hand navigation. But what if we need a bit more flexibility? What if we need to place our navigation in the center?
[demo]
CSS Tab Designer

[Windows only] CSS Tab Designer is a unique and easy to use software to help you design css-based lists and tabs visually and without any programming knowledge required!
[demo]
Light Weight Low Tech CSS Tabs

An example of light weight tabs by combining the Sliding Doors method with the Mountaintop corners idea.
[demo 1, 2]
Module Tabs – Carousel

Example of showing one page of content at at time in tabs. Each tab link scrolls to the page selected. Since all animation is turned off (animationSpeed = 0) then it just moves the desired content into view.
[demo]
Joshua Kaufman’s CSS Tab 2.0

Build CSS tabs without using any images or hacks and with as little CSS as possible.
[demo]
Tabbed Navigation using CSS
How to create low-bandwidth tab navigation on a web page using CSS.
[demo]
Duoh’s 2nd Level Tab Menu

[demo]
Nundroo CSS Navigation

[demo]
CSS Menu With Slider

This little example shows how to make really simple and yet very nice CSS Menu with slider.
[demo]
CSS drop down menu

Instead of the menu being triggered by placing your mouse of the menu label, it is trigger by moving your cursor over the down arrow on the right side of the menu label.
[demo]
Fancy Menu

Custom navigation bar with some cute Javascript effects that will certainly impress your friends.
[demo]
Creative Pony Sliding Tab

Sliding Tabs is a mootools 1.11 plugin which adds a pretty neat effect. It’s a clone of something seen on Panic Software’s Coda site.
[demo]
JQuery Tab Animation

A sample that show how you can add tab transition animations to your existing Tab Panel Controls.
[demo]
Fancy Sliding Tab Menu

Included an idle state listener to bring all the tabs back to their normal state after a desired amount of time without mouse movement on the window.
[demo]
Sliding Door of CSS

Now that CSS is widely supported, we can crank up the quality and appearance of the tabs on our sites.
[demo]
Aplus ADxMenu

4 most basic examples of tab submenus.
[demo 1, 2, 3, 4]
Bulletproof Slants

[demo]
Core Design Magic Tabs

Nice tab plugin for Joomla.
[demo]
Brainjar Tabs

Using CSS to build a tabbed display. One where the user can click on individual tabs to view different content within the same space.
[demo]
qrayg CSS Menu

4 level deep list in both horizontal and vertical layout modes while maintaining hover persistence.
[demo]
Kalsey CSS Menu

[demo]
Accessible Image-Tab Rollovers

[demo]
HTML Dog CSS Tab

A popular form of navigation is tabbed navigation-a group of links that give the impression of being protrusions attached to different areas of unseen content. With CSS you don’t need to be restricted to rigid images for every tab-you can maintain complete control over appearance and text at a fraction of the file size of image-only alternatives.
[demo]
CSS Tabs Menu with Dropdowns

Create dropdowns when the top level menu item is hovered over.
[demo]
DOMTab

DOMtab is a JavaScript that turns a list of links connected to content sections into a tab interface. The script removes any "back to top" links in the section and automatically hides all but the first one when the page is loaded.
[demo]
Animated horizontal tabs

These sliding doors based blue tinted tabs "jump up" when selected, such as when the mouse rolls over each one. This is accomplished using a combination of relative positioning and padding on each tab.
[demo]
Inverted Shift Down Menu

This clean CSS horizontal menu contains tabs with text that shift downwards slightly when the mouse rolls over it.
[demo]
Inverted Shift Down Menu II

[demo]
Vista Aero Buttons Menu

This menu consists of a row of independent, Vista aero looking CSS buttons, and departs from the typical list based menu structure. Each button appears initially faded out slightly via CSS opacity, then brought back to full opacity during the "hover" state.
[demo]
DD Tab Menus

DD Tab Menu is a standards compliant, 2 level tab menu. Move your mouse over a tab, and a 2nd level content appears beneath it. The script uses CSS to control all of its appearance, and plain HTML to implement the entire menu tabs and contents.
[demo]
EasyCFM DHTML Tab

[demo]
Flexible Tab Navigation

The navigation bar shown here is achieved via 3 images, a bit of CSS and some JavaScript.
[demo]
jQuery UI/Tabs

[demo]
jQuery Thickbox

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.
[demo]

20 Useful CSS Tips for Beginners

2011-03-29T00:03:00.000-07:00

In the old days, we depend a lot of on developers and programmers to help update the website, even when it’s just a minor one. Thanks to the CSS and it’s flexibility, styles can be extract independently away from the codes. Now, with some basic understanding of CSS, even a novice can easily change the style of a website.
Whether you are interested in picking up CSS to create your own website, or merely to tweak your blog’s look and feel a little – it’s always good to start with the fundamentals to gain a stronger foundation. Let’s take a look at some CSS Tips we thought might be useful for beginners. Full list after jump.

Use reset.css
When it comes to rendering CSS styles, browsers like Firefox and Internet Explorer have different ways of handling them. reset.css resets all fundamental styles, so you starts with a real blank new stylesheets.
Here are few commonly used reset.css frameworks – Yahoo Reset CSS, Eric Meyer’s CSS Reset, Tripoli
Use Shorthand CSS
Shorthand CSS gives you a shorter way of writing your CSS codes, and most important of all – it makes the code clearner and easier to understand.
Instead of creating CSS like this
1. .header {
2. background-color: #fff;
3. background-image: url(image.gif);
4. background-repeat: no-repeat;
5. background-position: top left;
6. }
It can be short-handed into the following:
1. .header {
2. background: #fff url(image.gif) no-repeat top left
3. }
More – Introduction to CSS Shorthand, Useful CSS shorthand properties

3. Understanding Class and ID

These two selectors often confuse beginners. In CSS, class is represented by a dot "." while id is a hash ‘#". In a nutshell id is used on style that is unique and don’t repeat itself, class on the other side, can be re-use.
More – Class vs. ID | When to use Class, ID | Applying Class and ID together

More – Taming Lists, Amazing LI

More – Tables are dead, Tables Vs. CSS, CSS vs tables

6. CSS Debugging Tools

It’s always good to get instant preview of the layout while tweaking the CSS, it helps understanding and debugging CSS styles better. Here are some free CSS debugging tools you can install on your browser: FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar, and Firebug.

7. Avoid Superfluous Selectors

Sometimes your CSS declaration can be simpler, meaning if you find yourself coding the following:

ul li { ... }
ul li { ... }
ol li { ... }
ol li { ... }
table tr td { ... }

They can be shorten down to just

li { ... }
li { ... }
td { ... }

Explanation: <li> will only exist within <ul> or <ol> and <td> will only be inside <tr> and <table> so there’s really not necessary to re-insert them.

8. Knowing `!important`

Any style marked with !important will be taken into use regardlessly if there’s a overwriting rule below it.

.page { background-color:blue !important; background-color:red;}

In the example above, background-color:blue will be adapted because it’s marked with !important, even when there’s a background-color:red; below it. !important is used in situation where you want to force a style without something overwriting it, however it may not work in Internet Explorer.

9. Replace Text with Image

This is commonly practice to replace <h1>title</h1> from a text based title to an image. Here’s how you do it.

h1 {

text-indent:-9999px;

background:url("title.jpg") no-repeat;

width:100px;

height:50px;

}

Explanation: text-indent:-9999px; throws your text title off screen, replaced by an image declared by background: {...} with a fixed width and height.

10. Understand CSS Positioning

The following article gives you a clear understanding in using CSS positioning – position: {...}
More – Learn CSS Positioning in Ten Steps

11. CSS @import vs <link>

There are 2 ways to call an external CSS file – respectively using @import and <link>. If you are uncertain which method to use, here’s few articles to help you decide.
More – Difference Between @import and link

12. Designing Forms in CSS

Web forms can be easily design and customize with CSS. These following articles show you how:
More – Table-less form, Form Garden, Styling even more form controls

13. Get Inspired

If you are looking around for nicely designed CSS-based website for inspiration, or just simply browsing to find some good UI, here are some CSS showcase site we recommend:

Need more? Here’s a round up of 74 CSS Gallerie

14. Rounded Corners in CSS

This following article gives you an idea how to create cross-browser compatible rounded borders with CSS.

15. Keep CSS Codes Clean

If your CSS codes are messy, you are going to end up coding in confusion and having a hard time refereing the previous code. For starters, you can create proper indentation, comment them properly.
More – 12 Principles For Keeping Your Code Clean, Format CSS Codes Online

16. Typography Measurement: px vs em

Having problem choosing when to use measurement unit px or em? These following articles might give you a better understanding on the typography units.
More – Units of Measurement in CSS, CSS Font size explained, Using Points, Pixels, Ems, or Percentages for CSS Fonts

17. CSS Browsers Compatibility Table

We all know each browser has different ways of rendering CSS styles. It’s good to have a reference, a chart or a list that shows the entire CSS compatibility for each browser.
CSS support table: #1, #2, #3, #4.

18. Design Multicolumns in CSS

Having problem getting the left, middle and right column to align properly? Here are some articles that might help:

19. Get a Free CSS Editors

Dedicated editors are always better than a notepad. Here are some we recommend:
More – Simple CSS, Notepad ++, A Style CSS Editor

20. Understanding Media Types

There are few media types when you declare CSS with <link>. print, projection and screen are few of the commonly used types. Understanding and using them in proper ways allow better user accessibility. The following article explains how to deal with CSS Media types.
More – CSS and Media Types, W3 Media Types, CSS Media Types, CSS2 Media Types

11 Top CSS Editors – Reviewed

2011-03-28T23:53:00.000-07:00

Back to the time when the look of a website must be defined inside the HTML, web designer experienced the nightmare like coding each <font> tag in every single web page. Thus, CSS (Cascading Style Sheets) comes to bring the salvation to lost web designer. It allows you to define your website’s appearance with just one single external file, which saves a pretty lot of your work and make your code management easier than never before.

But why do we need CSS Editor? Every glorious revolution has its dark side, as for CSS is every web browser like IE7 does not support the same effect defined by CSS, so often designer has to squeeze their mind to figure out a trick, hack or fix, that’s when CSS Editor comes in to help.
CSS Editor helps you to either understand how certain CSS value works by its WYSIWYG editor, or provide you an inspector to check out what’s exactly the cause for your CSS error, or probably guiding you to decide what CSS property you should use. And in this post, we’re going to review every useful CSS editor that you can get in the web.
Meanwhile, here are more CSS related post:

1. Stylizer

Compatibility: Windows
Notable Feature: Code Grid, Size Grips, Bullseye, Two-click Coloring

Stylizer is an absolutely unique CSS editor that focuses on real-time CSS editing. You can just enter a web address into its built-in browser that supports Firefox 3.5 and IE7′s style definition, and it would have all related CSS rules loaded for you to edit with its familiar point-and-click interface.
The editor comes with a Code Grid feature that makes your CSS editing more convenient as you can view the result immediately after you changed a value. Also with its diagnostic Bullseye feature, you can view associated elements at certain part of the site and edit it with points and clicks. Other features like Size Grips allows you to visually adjust the position of a CSS element, and with Two-click Coloring feature you’re granted a Photoshop-like color picker to choose any color for, let’s say, your site font. Oh, did I mention that all these edits are done in real-time, immediately viewable result?
With Stylizer it’s merely impossible to make a CSS mistake as it would restrict you to put any value that’s not compatible with the corresponding CSS property. However the software would fail to load certain CSS file sometimes, due to its unexplained critical error.
Stylizer comes with Basic and Ultimate version. While Basic version is totally free, the Ultimate version is available to you for 14 days after the installation, then it offers $85 for you to continue using its advanced features like Bullseye.

2. TopStyle

Compatibility: Windows
Notable Feature: Style Inspector, Style Sweeper, CSS Tidy

TopStyle CSS editor starts to amaze you by its first time configuration, when you can choose a style definition that shows only properties and values supported by either Firefox, Internet Explorer, Safari, or even iPhone OS 2.0, which is practically useful for cross-platform web designer.
Among all features I found Style Inspector is especially useful, as it works as a panel to let you include any CSS property with simple point-and-click interface. When you finished choosing all CSS properties you want, the source code would be automatically generated for you to save your time from repetitive and tiring coding.
One another good stuff about TopStyle is it shows browser compatibility underneath its style inspector, which you can see either the CSS property is fully supported by certain version of web browser like Internet Explorer 7, or it’s terribly buggy.
The editor comes as a trial version with limited feature, and you can unlock its full potential by $79.95.

3. Style Master

Compatibility: Windows, Mac OS X
Notable Feature: Stylesheet Template

Claimed itself as a master, Style Master did pretty well to create a CSS editing environment for any level of expertise. The software not only provides WYSIWYG editor that smoothens the workflow for CSS beginner, but also grant you the access to the very detailed information about every CSS property for expert to refer. You can browse and choose CSS properties by either category or alphabetical order.
Perhaps the most unique point is the editor itself contains almost 20 useful stylesheet templates for you to start with, and not surprising for a style master to have very clean, well-arranged and professional CSS rules defined in its built-in template.
You can enjoy the fully-featured software for 30 days, and pay either $59.99 or $29.99 for education license to open up its full potential again.

4. Xyle Scope

Compatibility: Mac
Notable Feature: Selection Mode, Smart Group, Text Editor Integration

Xyle Scope is a must-have free CSS editor for Mac, as it’s a truly professional CSS editor that allows you to surf website while fine-tune its CSS directly inside the editor.
Xyle’s browser comes with normal browser mode and selection mode which works pretty similar like Firefox plugin, Firebug that provides the CSS source viewing and editing, except that the editor allows you to save modified CSS values in their original location.
Using the ‘Smart Group‘ feature, you are able to filter out all rules influencing the way in which links are shown or those responsible for the layout, you can even narrow the result with its built-in search function, no more trial-and-error method!
Xyle Scope also offer integration with external text editors like BBEdit for more convenient and energy-saving coding work, just do a change and either the text editor or Xyle Scope would update all changes automatically for you.

5. Rapid CSS

Compatibility: Windows
Notable Feature: Syntax Highlighter, Code Completion, CSS Formatting

Rapid CSS is the way for more comfortable, convenient and complex CSS editing. It has its own fully customizable text editor with helpful features like syntax highlighting, code completion and built-in CSS reference for painless coding experience.
Caring about your CSS’ cleanliness, you can format your CSS stylesheet, like rearrange them by CSS type or create shorthand properties to make the stylesheet looks more comfortable and sweet. The built-in code validator also ensure your stylesheet’s not only clean but valid.
The editor comes with 30 days evaluation period with 30 uses, you can go for full version by $29.85.

6. Style Studio

Compatibility: Windows
Notable Feature: CSS Wizard, IntelliStyle

The main beauty of Style Studio lies within its CSS Wizard feature, which works to provide you immediate CSS effect with few points and clicks.
For example, you can select a font wizard, then choose a font family and set a font size for it, then font style, weight, variant…and boom! Rules are inserted into the stylesheet as a fully-validated CSS code.
Wizard feature also include color, border, text, positioning, classification and finally filter rules, just almost everything you can think of CSS. These wizards are pretty useful as you don’t need to type repeatedly to achieve certain complicated CSS effect. Another noble feature is IntelliStyle, which functions like code completion for you to choose certain CSS properties for your design purpose.
The downside of this editor would be its outdated browser’s style definition support, as it only support up to IE6 and, well, no Firefox.
You’re granted 30 days to enjoy the software and $49.99 to purchase it.

7. CSSEdit

Compatibility: Mac
Notable Feature: X-ray Inspector, Visual Editor, Selector Builder

Design beautiful, innovative and fast-loading web sites with a beautiful, innovative and fast app, that’s CSSEdit by MacRabbit. From features like Selector Builder until intelligent source environment, CSSEdit is designed for any level of expertise.
With the highly polished editor like this, you’re expected to see changes to your CSS stylesheet appeared in real-time, without tiring upload-refresh action. X-ray inspector is also created as a feature to diagnose CSS code from specific part of the site.
The innovative part of the CSSEdit is probably its Selector Builder that lets you describe your CSS style with plain English, not much interest for an expert but useful for absolute beginner.
Demo version restricts you to save file with fewer than 2500 characters, while you can pay $39.95 to wipe out all restriction.

8. EngInSite CSS Editor

Compatibility: Windows
Notable Feature: Measurement tool in Preview Mode

If you are a serious designer who cares about correct CSS specification, right CSS placement, or your CSS stylesheet must be fully-validated, then EngInSite CSS editor can be your favorite editor.
In this editor, you can add class, id, and element selector with the help of its built-in inspector, also you can convert the color to either Hex or RGB value, which is a very rare feature for a CSS editor. You can observe your result in the preview panel with measurement tools to ensure that your every design element is on the right position.
The editor also come with code completion but it’s little bit buggy, so I would say it’s semi code completion. Otherwise the entire editor is nice to use, except the very fact that the editor is quite outdated in term of browser’s style defnition support, as it only supports up to IE6′s style definition.

9. Stylesheet Maker

Compatibility: Windows
Notable Feature: CSS Tags

Stylesheet Maker is yet another standard CSS editor that offers a clean coding surface with file explorer panel, and some useful CSS tools to help setting font, color, margin, border, etc.
Compared to several CSS editors like Rapid CSS or Style Studio, Maker has less feature yet very clean interface, and this is good for certain beginner who don’t want to get things complicated, or CSS ninja who wants everything minimal and comfortable.
Although this editor is designed for intermediate user, its CSS Tags feature can help you to simply create a CSS rule with tags by clicks.
It costs $34 to own this editor, or you can buy it with other CoffeeCup software as a bundle purchase.

10. Arduo CSS

Compatibility: Windows
Notable Feature: Node, CSSTidy

Arduo CSS is a new born CSS editor which aims to please you with its intuitive and easy-to-use interface. With its clean interface and syntax highlighting, you are guaranteed to create and edit a CSS file without too much trouble and interruption. Also you can use its ‘Node’ feature to define CSS rules by points and clicks.
For those who feel your stylesheet is way too heavy, the CSSTidy tool from the editor can help you to optimize the stylesheet and wipe out all unnecessary code.
The editor is freely available on its official site.

11. Simple CSS

Compatibility: Windows, Mac OS X
Notable Feature: CSS file import, Point-and-click interface, Additional font database

Just as its name, Simple CSS has everything that a designer needs for simple CSS editing. You can import a CSS file into the editor and modify it with few clicks, check out the result in its preview panel, and take out the source code right away.
Although you can import almost every CSS file into the editor, you can only view 1 CSS rule at once with a click, and sometimes your import would cause error due to its limitation like no @rules support. Also the editor itself is not so flexible like you can only select ‘Auto’ or ‘Inherit’ for z-index property, but not directly give the property a value.
Nonetheless, it’s free and pretty handy for designer who needs a quick fix.

Bonus: More Editors and Tools

While they are not exactly CSS editors, these following tools are something you might want to have when it comes to editing CSS.

Firebug

The most popular and powerful web development tool which inspects HTML, modify CSS style and see the changes in real-time, available as a plugin for Firefox web browser.

CSS Usage

An extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site.

Web Developer

A Firefox extension for you to do a lot of cool things like view CSS sources or disable certain CSS stylesheet for design or development use.

Notepad++

A free source code editor and Notepad replacement that supports several languages including CSS. Contains features like Function Completion to help building your CSS design.

Coda

An advanced text editor with built-in CSS editor that provides you two CSS editing mode for more flexible designing experience, able to see the result instantly after changes made.

NetBeans IDE

An open-source and professional Integrated Development Environment with the most complete CSS reference in its code completion feature.

Aptana Studio

A complete web development environment that combines powerful authoring tools for HTML, CSS, and JavaScript, currently supports up to HTML5 and CSS3.

WebStorm

JetBrain’s IDE that implements relevant auto completion for everything including CSS, also you can get notified about CSS problems on the fly.

What You Think?

So you have scanned through all CSS editors reviewed by us, what’s your favorite CSS editor(s)? Or are you preferred more to use source code editor like Notepad++ or NetBeans IDE to code your CSS? We’re eager to hear from you!

Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation

2011-03-28T23:41:00.000-07:00

Drop-down menu (also known as pull-down menu) is an essential in most web design. It plays important role in the creation of an effective and user friendly website. It’s a good solution to trim down long menu that is overwhelming the screen space, getting them to display in a more organize category-sub category pattern.

In this article, we’d like to show you some of the best drop-down menu scripts we come to know. These drop-down menu varies from CSS only, CSS & Javascripts and menu that will work with your current Javascript library like jQuery, MooTools and Prototype. Full list after jump.

Here are some related articles we figured you might be interested in:

CSS (Only)

If you are worried about Javascript disabled on client’s browser, these css-only drop down menu will not fail you.
CSS Drop-Down Menu Framework
Title says it all. It’s a framework, released under GNU General Public License. Cross browser compatible, light and easy transformable to mimic a lot of existing drop down menus out there. For example Flickr, Adobe, and MTV.com [Demo | Download]

Ultimate CSS only drop-down menu
Also see this.

CSS Express Drop-Down Menus
Help you produce a quick (express) CSS drop-down menu without some of the limitations found in some other "pure" CSS menus.

Pure CSS Drop Down Menus

CSS + Javascripts

With the help of Javascript, drop down menu are more interactive or at least they get some subtle animation that enhance user experience. CSS on the other hand, make sure the look and feel is easily cuztomizable.
JavaScript Dropdown Menu with Multi Levels
This multi-level drop down menu script weighs in at only 1.2 KB. It features animation, active header persistence, easy implementation and multiple instance support. [Demo | Download]

All Levels Navigational Menu (v2.2)
CSS/ HTML list based menu with support for infinite levels of sub menus. It’s lightweight and easy to implement.

Professional dropdown

Drop Down Tabs (5 styles)
Drop Down Tabs is a horizontal CSS tabs menu that supports a second level drop down menu for each of its tabs. Comes in 5 different styles.

Chrome CSS Drop Down Menu
Chrome Menu is a CSS and JavaScript hybrid drop down menu. It’s easy to configure and search engine friendly. The main menu bar consist of a CSS list, while the drop down menus are simply regular DIV tags on page.

jQuerys

If you’ve implemented jQuery Javascript Library on your site, here are some really cool jQuery based drop down menus you should know.
Smooth Navigational Menu
Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair. Here’s another similar one – jQuery Multi Level CSS Menu.

Superfish
Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript). [Demo | Download]

Animated Drop Down Menu with jQuery
Dropdown with much slicker effect using jQuery and CSS.

Droppy
Quick and dirty nested drop-down menu in the jQuery style.

Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready
Menu system, which can be used to create a simple dropdown menu for a single list of options, a flyout menu for a smaller hierarchical list of options. [Demo | Download]

Mega Drop-Down Menu
A drop down menu that holds more than just new line of links. It also makes group links and make nagivation much easier! [Demo]

(mb)Menu
Powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way. [Demo | Download]

Simple Drop Down Menu

MooTools

JavaScript drop down menu using Mootools
Easy, unobtrusive way to create a drop down menu with Mootools 1.2. [Demo | Download]

UvumiTools Dropdown Menu
Simple multi-level menu built from an HTML unorderd list, using Mootools Javascript Framework.

Unobstrusive Mootool Drop Down Menu

MenuMatic
MenuMatic takes a sematic ordered or unordered list of links and uses MooTools 1.2 to turn it into a dynamic drop down menu system, with enhanced usability and flair. [Demo | Download]

Scriptaculous/Prototype

Dropdown Menu
Based on Knallgrau Unordered list. Here’s more similar drop down menu – Horizontal dropdown menu, e24TabMenu.

Mimics

Step by step tutorial on how some of the nicest drop down menus are created.
Designing the Digg Header
Step by step tutorial on how to build a drop down menu that really looks like Digg’s. [Demo | Download]

Simple CSS vertical menu Digg-like
Yet another good tutorial to implement a simple vertical menu digg-like using CSS and javascript to show/hide sub-menu. [Demo | Download]

Sliding Jquery Menu
How to create a sliding menu button using jquery that looks like Envato’s TUT+ navigation. [Demo | Download]

Vimeo-like top navigation
If you like Vimeo (see it here, top) this Vimeo-alike drop down script is perhaps 99% the same.[Demo | Download]

MISC

WordPress Multi-Level Drop Down menu using jQuery
A tutorial that helps you build a simple multi-level drop-down menu in your WordPress theme using jQuery’s JavaScript library to ensure cross-browser compatibility. Here’s another WordPress plugin that does the trick too.

izzyMenu
Create professional looking CSS menus for your website online, without writing a single line of code or just use some of the ready made ones.

PureCSS Menu
Free CSS Drop Down Menu generator

50 (Most) Beautiful Blogger Templates

2011-03-28T23:36:00.000-07:00

Blogy Decorativo
Demo | Download
GossipCity
Demo | Download
Minyx
Demo | Download
Glass
Demo | Download
Colibri
Demo | Download
Jeans
Demo | Download
Leia
Demo | Download
Integral
Demo | Download
Mr. Techie
Demo | Download
Your Blog 2.0
Demo | Download
Hemingway Black
Demo | Download
Hemingway White
Demo | Download
Bella
Demo | Download
Feminina III
Demo | Download
History Channel
Demo | Download
Black Minimalism
Demo | Download
Glued Ideas Subtle
Demo | Download
Ocean Mist
Demo | Download
The Late Show
Demo | Download
Fleur
Demo | Download
WP-Polaroid
Demo | Download
Ads Theme
Demo | Download
WP Premium
Demo | Download
Aspire
Demo | Download
Blogging Pro
Demo | Download
Dilectio
Demo | Download
iTheme
Demo | Download
Vinery
Demo | Download
sImpress
Demo | Download
Erudite
Demo | Download
Blue Marine
Demo | Download
Flower Template
Demo | Download
Red White Web 2.0
Demo | Download
iWork
Demo | Download
Softlight
Demo | Download
Pannasmontata
Demo | Download
Underground
Demo | Download
Florascent
Demo | Download
Art Imagination
Demo | Download
Dark World
Demo | Download
Forte
Demo | Download
Morning
Demo | Download
Colorful Day
Demo | Download
Smashing Template
Demo | Download
Grey Press
Demo | Download
Tierra
Demo | Download
Vertical
Demo | Download
Sweet Blog
Demo | Download
Mosaico
Demo | Download
Blogy Rosa
Demo | Download

6 Ways to Rule social Networking Website and Etiquette

2011-03-28T02:10:00.000-07:00

How many of you use social networking websites like MySpace, Facebook , orkut and ¦ List is endless. I’m sure you are an addicted user of at least one of them.
Question:

Why have you joined Social networking website?

Doesn’t matter why you have joined orkut, Facebook or MySpace but question is what’s your responsibility towards your social networking profile?

Social-Networking

Credit

What’s your social etiquette towards your social networking friend?

Your social networking profile is your portfolio. People will judge you with the quality of your profile. If you have not yet completed filling up all the details about yourself then go ahead and do it now. Every detail on your profile will help others to know you and thus you will find like minded people.
Doesn’t matter if website asks about your political opinion or do you like pets or not, fill it.

Are you using social networking site for your business or planning to do so?

This is for all those who have joined various social networking sites:

Personal details: Make sure you fill up almost every detail which a stranger deserves to read. Give him a picture of your life style. Tell him what you like and what you don’t.
Are you getting too personal: Though filling up personal details is good but make sure you don’t fill up everything like when you have broken up with your girlfriend, how much you earn. Save these details for your dearest friends. Filling up too personal details may help any intruder invade your privacy. This happened a lot in India because people get too personal while filling up their orkut/facebook profile. Bottom line is fill up only those details which you are comfortable sharing with bunch of strangers.
Promoting too much: People who join social networking sites are there to connect with others, have some fun and get along with their buddies. If you keep annoying them with useless shameless promotion, do you really think they will care about your updates ever? Share things which people love to read, people love to know about. Picture yourself getting same updates and you will get an idea how much you were irritating your social networking friends with those updates.
Selling stuff: Primarily I have joined Facebook, orkut to take a break from my hectic life. If someone will start selling things online from my friend list I don’t mind clicking on delete button instantly. I’m not saying that you can’t sell or promote stuff on such sites but then you need to be a real charmer and smart to do so. Make sure you connect with your friends and build trust. If you fail to do so never sell anything.
Who is hiding behind your friend list: As said you can’t judge a book by its cover same thing applies on social networking sites You can’t judge a person by the appealing and sexy looking pictures of guy/gal. So make sure you spend some time knowing the person after adding them. Don’t add them just to add a beautiful friend to your friend list.
How many friends? : Have you come across people who keep accepting all the friend request coming their way? What’s the point of adding such people who don’t even share a single interest with you. Every social networking site has communities where you can interact with like minded people. Communicate using the group features of the community to find the like minded people.

Bottom line is s*x, money and business are shadowing social networking websites with black clouds. Even if you are there with any of these purpose you can follow simple etiquette to avoid falling into the category of spam users.
What’s your purpose of joining social networking site?
If you find the article worth sharing, Stumble would be appreciated.

adsense tricks & templets

Recent Posts with Thumbnails Widget for Blogger

Explanation:

Releasing Mind Blowing Magazine style Blogger Template "Falkner Press"

Step by Step Installation Guide:

Extras

[Hack] How to Post Larger (HQ) Images in Blogger Posts

How to Use Blogger to Upload your Javascript (.js) files ?

Free SEO Tools for Blogger

Numbered Page Nagivation hack for Blogger

What is Numbered Page Navigation ?

Free $75 Google Adwords Coupon

Complete Working Godaddy Promo Codes and Coupons

Selecting Domain Name

ow to Submit Tax Information for Google Adsense Account

45 Link Building Tips To Help You Promote Your Blog

Get­ting Links for Writ­ing Content

Freebies/Giveaways for Link-Baiting

Con­nect­ing With Communities

Direc­to­ries, Social Book­mark­ing + Dis­cus­sion Groups.

Direct Link Build­ing

Paid Link Building

Using Blo­gus­sion for Link Building

31 Practical Website Interface Design Tutorials

Headers and Navigation

Full Layouts

60 High Quality Free Web Templates and Layouts

40 (Really) Beautiful Web Page Templates in Photoshop PSD

Excellent HTML Newsletter Templates

1. 38 Free Elegant XHTML/CSS Website Templates

2. 60 High Quality Free Web Templates and Layouts

More Free Newsletter Templates

60 High Quality Photoshop PSD Files For Designers

Computer and Gadgets

Phones

Food

General Stationaries

Icons and Symbols

Misc

45 Fresh High Quality Photoshop PSD Files

25 Tools to Improve Your Website’s Usability

jQuery Image Galleries & Sliders – Best Of

50+ Nice Clean CSS Tab-Based Navigation Scripts

jQuery Coda-Slider

Perspective Tabs

jQuery idTabs

Tab Accordian

DHTML Goodies Tab Panes

AJAX Tabs (Rails redux)

Ajax Project – Tabbed Page Interface

JQuery Nested Tab Set

Ajax Tab Reloaded

14 Free Vertical CSS Menus

Control.Tabs

JavaScript tabs with jQuery

Yahoo TabView

DHTML Ajax Tabs Content Script

Getting Links for Writing Content

Connecting With Communities

Directories, Social Bookmarking + Discussion Groups.

Direct Link Building

Using Blogussion for Link Building