Google SEO Starter Guide : Make Your Site Easier To Navigate

Navigation is very important for search engines :

The navigation of a website is important in helping visitors quickly find the content they want. It can also help search engines understand what content the webmaster thinks is important. Although Google's search results are provided at a page level, Google also likes to have a sense of what role a page plays in the bigger picture of the site.


Plan out your navigation based on your homepage :

All sites have a home or "root" page, which is usually the most frequented page on the site and the starting place of navigation for many visitors. Unless your site has only a handful of pages, you should think about how visitors will go from a general page (your root page) to a page containing more specific content. Do you have enough pages around a specific topic area that it would make sense to create a page describing these related pages (e.g. root page -> related topic listing -> specific topic or from labels on blogger)? Do you have hundreds of different products that need to be classified under multiple category and subcategory pages?


Ensure more convenience for users by using ‘breadcrumb lists’ :

A breadcrumb is a row of internal links at the top or bottom of the page that allows visitors to quickly navigate back to a previous section or the root page . Many breadcrumbs have the most general page (usually the root page) as the first, left-most link and list the more specific sections out to the right.

Breadcrumb links appearing on a deeper article page on our site.

Allow for the possibility of a part of the URL being removed :

Users may go to an upper directory by removing the last part of the URL.

Consider what happens when a user removes part of your URL - Some users might navigate your site in odd ways, and you should anticipate this. For example, instead of using the breadcrumb links on the page, a user might drop off a part of the URL in the hopes of finding more general content. He or she might be visiting http://www.brandonsbaseballcards.com/news/2010/upcoming-baseballcard-shows.htm, but then enter http://www.brandonsbaseballcards.com/news/2010/ into the browser's address bar, believing that this will show all news from 2010 . Is your site prepared to show content in this situation or will it give the user a 404 ("page not found" error)? What about moving up a directory level to http://www.brandonsbaseballcards.com/news/?


Prepare two sitemaps: one for users, one for search engines :

A site map (lower-case) is a simple page on your site that displays the structure of your website, and usually consists of a hierarchical listing of the pages on your site. Visitors may visit this page if they are having problems finding pages on your site. While search engines will also visit this page, getting good crawl coverage of the pages on your site, it's mainly aimed at human visitors.

Examples of an HTML site map and an XML Sitemap. An HTML site map can help users easily find content that they are looking for, and an XML Sitemap can help search engines find pages on your site.

An XML Sitemap (upper-case) file, which you can submit through Google's Webmaster Tools, makes it easier for Google to discover the pages on your site. Using a Sitemap file is also one way (though not guaranteed) to tell Google which version of a URL you'd prefer as the canonical one (e.g. http://brandonsbaseballcards.com/ or http://www.brandonsbaseballcards.com/; more on what's a preferred domain). Google helped create the open source Sitemap Generator Script to help you create a Sitemap file for your site. To learn more about Sitemaps, the Webmaster Help Center provides a useful guide to Sitemap files.

Create a naturally flowing hierarchy :
Make it as easy as possible for users to go from general content to the more specific content they want on your site. Add navigation pages when it makes sense and ffectively work these into your internal link structure.

Avoid :

• Creating complex webs of navigation links, e.g. linking every page on your site to every other page
• Going overboard with slicing and dicing your content (so that it takes twenty clicks)

Use mostly text for navigation :
Controlling most of the navigation from page to page on your site through text links makes it easier for search engines to crawl and understand your site. Many users also prefer this over other approaches, especially on some devices that might not handle Flash or JavaScript.

Avoid :

• Having a navigation based entirely on drop-down menus, images, or animations
  - many, but not all, search engines can discover such links on a site, but if a user can reach all pages on a site via normal text links, this will improve the accessibility of your site; more on how Google deals with non-text files

Put an HTML site map page on your site, and use an XML Sitemap file :
A simple site map page with links to all of the pages or the most important pages (if you have hundreds or thousands) on your site can be useful. Creating an XML Sitemap file for your site helps ensure that search engines discover the pages on your site.

Avoid :

• Letting your HTML site map page become out of date with broken links
• Creating an HTML site map that simply lists pages without organizing them, for example by subject

Have a useful 404 page :
Users will occasionally come to a page that doesn't exist on your site, either by following a broken link or typing in the wrong URL. Having a custom 404 page that kindly guides users back to a working page on your site can greatly improve a user's experience. Your 404 page should probably have a link back to your root page and could also provide links to popular or related content on your site. Google provides a 404 widget that you can embed in your 404 page to automatically populate it with many useful features. You can also use Google Webmaster Tools to find the sources of URLs causing "not found" errors.

Avoid :

• Allowing your 404 pages to be indexed in search engines (make sure that your webserver is configured to give a 404 HTTP status code when non-existent pages are requested)
• Providing only a vague message like "Not found", "404", or no 404 page at all
• Using a design for your 404 pages that isn't consistent with the rest of your site

Google SEO Starter Guide : Improve The Structure Of Your URLs

Simple-to-understand URLs will convey content information easily :

Creating descriptive categories and filenames for the documents on your website can not only help you keep your site better organized, but it could also lead to better crawling of your documents by search engines. Also, it can create easier, "friendlier" URLs for those that want to link to your content. Visitors may be intimidated by extremely long and cryptic URLs that contain few recognizable words.

A URL to a page on our baseball card site that a user might have a hard time with.

URLs like above can be confusing and unfriendly. Users would have a hard time reciting the URL from memory or creating a link to it. Also, users may believe that a portion of the URL is unnecessary, especially if the URL shows many unrecognizable parameters. They might leave off a part, breaking the link.

The highlighted words above could inform a user or search engine what the target page is about before following the link.

Some users might link to your page using the URL of that page as the anchor text. If your URL contains relevant words, this provides users and search engines with more information about the page than an ID or oddly named parameter would.

URLs are displayed in search results :

A user performs the query [baseball cards]. Our homepage appears as a result, with the URL listed under the title and snippet.

Lastly, remember that the URL to a document is displayed as part of a search result in Google, below the document's title and snippet. Like the title and snippet, words in the URL on the search result appear in bold if they appear in the user's query . To the right is another example showing a URL on our domain for a page containing an article about the rarest baseball cards. The words in the URL might appeal to a search user more than an ID number like "www.brandonsbaseballcards.com/article/102125/" would.

Google is good at crawling all types of URL structures, even if they're quite complex, but spending the time to make your URLs as simple as possible for both users and search engines can help. Some webmasters try to achieve this by rewriting their dynamic URLs to static ones; while Google is fine with this, we'd like to note that this is an advanced procedure and if done incorrectly, could cause crawling issues with your site. To learn even more about good URL structure, we recommend this Webmaster Help Center page on creating Google-friendly URLs.

Use words in URLs :
URLs with words that are relevant to your site's content and structure are friendlier for visitors navigating your site. Visitors remember them better and might be more willing to link to them.

Avoid :

• Using lengthy URLs with unnecessary parameters and session IDs
• Choosing generic page names like "page1.html"
• Using excessive keywords like"baseball-cards-baseball-cards-baseballcards.htm"

Create a simple directory structure :
Use a directory structure that organizes your content well and makes it easy for visitors to know where they're at on your site. Try using your directory structure to indicate the type of content found at that URL.

Avoid :

• Having deep nesting of subdirectories like ".../dir1/dir2/dir3/dir4/dir5/dir6/page.html"
• Using directory names that have no relation to the content in them

Provide one version of a URL to reach a document :
To prevent users from linking to one version of a URL and others linking to a different version (this could split the reputation of that content between the URLs), focus on using and referring to one URL in the structure and internal linking of your pages. If you do find that people are accessing the same content through multiple URLs, setting up a 301 redirect from non-preferred URLs to the dominant URL is a good solution for this. You may also use canonical URL or use the rel="canonical" link element if you cannot redirect.

Avoid :

• Having pages from subdomains and the root directory access the same content - e.g. "domain.com/page.htm" and "sub.domain.com/page.htm"
• Using odd capitalization of URLs - many users expect lower-case URLs and remember them better

Google SEO Starter Guide : Make Use Of The "Description" Meta Tag

Make use of the "description" meta tag :

<html>
<head>
<title>Brandon's Baseball Cards - Buy Cards, Baseball News, Card Prices</title>
<meta name="description=" content="Brandon's Baseball Cards provides a large selection of vintage and modern baseball cards for sale. We also offer daily baseball news and events in">
</head>
<body>

A page's description meta tag gives Google and other search engines a summary of what the page is about. Whereas a page's title may be a few words or a phrase, a page's description meta tag might be a sentence or two or a short paragraph. Google Webmaster Tools provides a handy content analysis section that'll tell you about any description meta tags that are either too short, long, or duplicated too many times (the same information is also shown for <title> tags). Like the <title> tag, the description meta tag is placed within the <head> tag of your HTML document.

What are the merits of description meta tags? :

Description meta tags are important because Google might use them as snippets for your pages. Note that we say "might" because Google may choose to use a relevant section of your page's visible text if it does a good job of matching up with a user's query. Alternatively, Google might use your site's description in the Open Directory Project if your site is listed there. Adding description meta tags to each of your pages is always a good practice in case Google cannot find a good selection of text to use in the snippet. The Webmaster Central Blog has an informative post on improving snippets with better description meta tags.

A user performs the query [baseball cards]. Our homepage appears as a result, with part of its description meta tag used as the snippet.

Words in the snippet are bolded when they appear in the user's query. This gives the user clues about whether the content on the page matches with what he or she is looking for.

A user performs the query [rarest baseball cards]. One of our deeper pages, with its unique description meta tag used as the snippet, appears as a result.

Above Image is another example, this time showing a snippet from a description meta tag on a deeper page (which ideally has its own unique description meta tag) containing an article.

Accurately summarize the page's content :
Write a description that would both inform and interest users if they saw your description meta tag as a snippet in a search result.

Avoid :

• Writing a description meta tag that has no relation to the content on the page
• Using generic descriptions like "This is a web page" or "Page about baseball cards"
• Filling the description with only keywords
• Copying and pasting the entire content of the document into the description meta tag

Use unique descriptions for each page :
Having a different description meta tag for each page helps both users and Google, especially in searches where users may bring up multiple pages on your domain (e.g. searches using the site: operator). If your site has thousands or even millions of pages, hand-crafting description meta tags probably isn't feasible. In this case, you could automatically generate description meta tags based on each page's content.

Avoid :

• Using a single description meta tag across all of your site's pages or a large group of pages

Google SEO Starter Guide : Create Unique, Accurate Page Titles

Indicate page titles by using title tags : 

<html>
<head>
<title>Brandon's Baseball Cards - Buy Cards, Baseball News, Card Prices</title>
<meta name="description=" content="Brandon's Baseball Cards provides a large selection of vintage and modern baseball cards for sale. We also offer daily baseball news and events in">
</head>
<body>

A title tag tells both users and search engines what the topic of a particular page is. The <title> tag should be placed within the <head> tag of the HTML document . Ideally, you should create a unique title for each page on your site.

Page title contents are displayed in search results :

A user performs the query [baseball cards]. Our homepage shows up as a result, with the title listed on the first line (notice that the query terms the user searched for appear in bold).

If your document appears in a search results page, the contents of the title tag will usually appear in the first line of the results (if you're unfamiliar with the different parts of a Google search result, you might want to check out the anatomy of a search resultvideo by Google engineer Matt Cutts, and this helpful diagram of a Googlediagram of a Google search results page). Words in the title are bolded if they appear in the user's search query. This can help users recognize if the page is likely to be relevant to their search.

If the user clicks the result and visits the page, the page's title will appear at the top of the browser.

The title for your homepage can list the name of your website/business and could include other bits of important information like the physical location of the business or maybe a few of its main focuses or offerings .

A user performs the query [rarest baseball cards]. A relevant, deeper page (its title is unique to the content of the page) on our site appears as a result.

Accurately describe the page's content :
Choose a title that effectively communicates the topic of the page's content.

Avoid :

• Choosing a title that has no relation to the content on the page 
• Using default or vague titles like "Untitled" or "New Page 1"

Create unique title tags for each page :
Each of your pages should ideally have a unique title tag, which helps Google know how the page is distinct from the others on your site.

Avoid :

• Using a single title tag across all of your site's pages or a large group of pages

Use brief, but descriptive titles :
Titles can be both short and informative. If the title is too long, Google will show only a portion of it in the search result.

Avoid :

• Using extremely lengthy titles that are unhelpful to users
• Stuffing unneeded keywords in your title tags

Google SEO Starter Guide

SEO Starter Guide : In this series we'll teach all blogger and webmaster about some SEO tactics provided by Google.

What Is SEO : Search engine optimization (SEO) is the process of improving the visibility of a website or a web page in a search engine's "natural," or un-paid ("organic" or "algorithmic"), search results. In general, the earlier (or higher ranked on the search results page), and more frequently a site appears in the search results list, the more visitors it will receive from the search engine's users.

Table Of Content :

• SEO Basics :

1. Create unique, accurate page titles
2. Make use of the "description" meta tag

• Improving Site Structure :

1. Improve the structure of your URLs
2. Make your site easier to navigate

• Optimizing Content :

1. Offer quality content and services
2. Write better anchor text
3. Optimize your use of images
4. Use heading tags appropriately

• Dealing with Crawlers :

1. Make effective use of robots.txt
2. Be aware of rel="nofollow" for links

• SEO for Mobile Phones :

1. Notify Google of mobile sites
2. Guide mobile users accurately

• Promotions and Analysis

1. Promote your website in the right ways

An example may help our explanations, so we've created a fictitious website to follow throughout the guide. For each topic, we've fleshed out enough information about the site to illustrate the point being covered. Here's some background information about the site we'll use:

  Website/business name: "Brandon's Baseball Cards"
  Domain name: brandonsbaseballcards.com
  Focus: Online-only baseball card sales, price guides, articles, and news content
  Size: Small, ~250 pages

Search engine optimization affects only organic search results, not paid or "sponsored" results such as Google AdWords.

FancyZoom Lightbox For Blogger

Don't know about you guys but i think Lightbox are the best widget ever made.....i really like Light Boxes and today i'am sharing one of it with you.....

Installing :

• Go To Blogger > Template > Edit HTML
• Just above </head> paste the script given below

<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.js"></script>
<script type="text/javascript" src="http://widcraft.googlecode.com/svn/FancyZoom.js"></script>

And you're done.....

How To Use :

$('#id').fancyZoom() where id is the id of the <a> tag you would like to zoom. The <a> tag should have an href that anchors to the id of the box that contains the contents that should be zoomed. For example:

<a href="#small_box" id="small">Small Box!</a>
<div id="small_box">
  <p>Here is the contents that will appear in the zoom.</p>
</div>
<script type="text/javascript">
$('#small').fancyZoom();
</script>

Other Examples

// other examples
<script type="text/javascript">
  $(document).ready(function() {
    $('a.fancy').each(function() { $(this).fancyZoom({width:500, height:300});});
    $('#small').fancyZoom({scaleImg: true}); // Scales images inside while zooming
    $('#medium').fancyZoom({closeOnClick: true}); // Close the zoom by clicking on the contents
    // width and height are optional. defaults to css specifications of width and height.
    // if width and height are passed in, they override whatever may be in css.
    $('#large').fancyZoom({width:600, height:400});
  });
</script>

You can use this lightbox in Images , HTML , Text , Flash and Embed-able stuff.....Having problem or want a pet Unicorn then comment.....

Cool CSS3 Buttons For Blogger

First of all you can also use these buttons on your html documents ..... just wanted to let you know :).....so all blogger right now i'am gonna tell you how to use these button on your blog.....

• Go To Blogger > Template > Edit HTML

• Find ]]></b:skin> in your template

• Post the following CSS Code just above  ]]></b:skin>  :

.button, .button:visited {
 background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiewoAg3lsQg5SmchY9vK8pBm4LQJre7b0CLQT4cdh72tqOAVFwBifdsYjQEBcoMTuodgCtVxCyd_wZQrqm3vjkDjcjs0SzWK-qcEcspJJuPYunC77n09cVx4hFsijQknzmEixKfmLUDuI/s1600/overlay.png) repeat-x;
 display: inline-block;
 padding: 5px 10px 6px;
 color: #fff;
 text-decoration: none;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 border-bottom: 1px solid rgba(0,0,0,0.25);
 position: relative;
 cursor: pointer;
 font-family: calibri;
}
.button:hover {
 background-color: #111;
 color: #fff;
}
.button:active {
 top: 1px;
}
.small.button, .small.button:visited {
 font-size: 11px
}
.button, .button:visited,
.medium.button, .medium.button:visited {
 font-size: 13px;
 font-weight: bold;
 line-height: 1;
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
.medium.button, .medium.button:visited {
 font-size: 14px;
 padding: 8px 14px 9px;
}
.large.button, .large.button:visited {
 font-size: 34px;
 padding: 8px 14px 9px;
}
.pink.button, .magenta.button:visited {
 background-color: #e22092;
}
.pink.button:hover {
 background-color: #c81e82;
}
.green.button, .green.button:visited {
 background-color: #91bd09;
}
.green.button:hover {
 background-color: #749a02;
}
.red.button, .red.button:visited {
 background-color: #e62727;
}
.red.button:hover {
 background-color: #cf2525;
}
.orange.button, .orange.button:visited {
 background-color: #ff5c00;
}
.orange.button:hover {
 background-color: #d45500;
}
.blue.button, .blue.button:visited {
 background-color: #2981e4;
}
.blue.button:hover {
 background-color: #2575cf;
}
.yellow.button, .yellow.button:visited {
 background-color: #ffb515;
}
.yellow.button:hover {
 background-color: #fc9200;
}

• Save Your Template : )

How To Use These Button :

• While editing post click on Edit HTML tab

• Choose your button code below and paste it

• Replace links and link names with yours,

1. HTML Code Large Buttons :

<center><a href="LINK HERE" class="large button pink" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="large button blue" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="large button green" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="large button orange" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="large button red" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="large button yellow" >LINK TEXT HERE</a></center>

2. HTML Code Medium Buttons :

<center><a href="LINK HERE" class="medium button pink" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="medium button blue" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="medium button green" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="medium button orange" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="medium button red" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="medium button yellow" >LINK TEXT HERE</a></center>

• Replace LINK HERE with link URL

• Replace LINK TEXT HERE with the text which you want to appear on the button. 

That's IT!

Meta Tag Generator

Search engine friendly Head tag generator Use to create a search engine friendly Head Tag for your website. Enter your own information and simply copy and paste into your html page.
Enter Title For Your Site
Enter The Description For Your Site
Enter Keywords Seperated By Commas.(You can put up to 20 keywords)
Title And Meta Tag

Changing Mouse Cursor In Blogger

Changing mouse cursor are hell cool.....your visitors will be like "Howwwwww???" i got a answer below :

• Go To Blogger > Layout > Add A Widget > HTML/JavaScript 

• Paste the script given below:

<style type="text/css">body, a:hover {cursor: url(CURSUR URL), progress;}</style>

• Now replace CURSOR URL with your Cursor URL(in .CUR format)

• You can find lots of cursor around the internet.....

Short URL Widget Below Posts In Blogger

So in this tutorial we'll learn adding short url widget below posts.....it's totally awesome and gives your visitors short links of your blogger posts.....

• First get Bit.ly's API you need to sign in there to get your api.

• After getting AIP Go To Blogger > Template > Edit HTML

• In Edit HTML press Ctrl+F and find </head>. 

• Post following script just above  </head>.

<script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&amp;login=YOURUSERNAME&amp;apiKey=YOURAPIKEY"></script>
<script type="text/javascript" charset="utf-8">
BitlyClient.addPageLoadEvent(function(){
BitlyCB.myShortenCallback = function(data) {
// this is how to get a result of shortening a single url
var result;
for (var r in data.results) {
result = data.results[r];
result['longUrl'] = r;
break;
}
document.getElementById("shorturl").innerHTML = "Share this link: &lt;input type='text' value='" + result['shortUrl'] + "' name='bitlyurl'/&gt;";
}
BitlyClient.shorten(document.location, 'BitlyCB.myShortenCallback');
});
</script>

• Replace  YOURUSERNAME And YOURAPIKEY with your bit.ly Username and API(Follow First Step)

• Now Find ]]></b:skin>  and just above it post following script

form#shorturl {
color:#666;
font-size:11px
}#shorturl input {
color:#999;
border:1px inset #CDCDCD;
padding:1px 5px;
}

• Save Template

• Now again click on Edit HTML and mark Expand the Template.

• Find :

<div class='post-footer-line post-footer-line-3'>
</div>

• And post following script just between above code

<b:if cond='data:blog.pageType == "item"'>
<form id='shorturl'/>
</b:if>

• Click on Save Template and just visit your posts to see this script in action.

Comment for any type of help..... :)

Using Custom Blogger Post URL

So blogger introduced custom permalink option for posts which is one of the best SEO tool.....using this method is extremely easy :

Update : Blogger has launched this feature publicly so now you can use this feature in blogger.com

• Go To draft.blogger.com 

• Create a post

• There is a Permalink option in Post Setting section , like this:

• Fill your Custom URL and click on done

• Publish and we're done :)

Popular Posts Slider For Blogger

All cool templates got a featured content slider but you have to edit those crappy slider manually but i found this slider for your popular posts so check this tutorial out :

• Go To Blogger > Layout > Add A Gadget > Popular Posts 

• Now  add this widget given below .....just above/below your 'Popular Posts' widget :

All done just save your template and leave a comment :)

3 Amazing CSS3 Image Transitions

So guys in this post i'am gonna teach you 3 amazing CSS image transitions as you can read on post title and image above.....they all will work when you'll hover one image will transform to another so here we go + some examples :

Effect #1 :

Example :

HTML :

<div id="cst" class="hover">
 <img class="bottom" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXvuZ3J1PM7K0LLUojXi2BAILUKfr66tzZE-lvm7AJJ7A8nzPSE6yaXBhiqVrweNKCgqxJrlr1uaAK4RQmmvnuQYiY3cC62mxgYZYWXYqSvt4u1NXJ573wTRMMkveOvRfRtj8M1HYVwRE/s1600/Sites+Like+Google+Adsense.jpg">
 <img class="top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxar6lVDuAu23qIScn7VVmKxao4WTVJN06z5rTtOPmXrT5DFuDpef5C2qaFNch3AgBPuBIgBAR2NNBQk_MeU9pLWSjvxT-TyOiNHdpZv-Ooy5YNXCf6LhQkBMPextlpAbHNQnCtk25osk/s1600/3+Amazing+CSS3+Transitions.jpg">
</div>

CSS :

#cst {
 position:relative;
 height:281px;
 width:450px;
}
#cst img {
 position:absolute;
 left:0;
 -webkit-transition: opacity 1s ease-in-out;
 -moz-transition: opacity 1s ease-in-out;
 -o-transition: opacity 1s ease-in-out;
 transition: opacity 1s ease-in-out;
}
#cst img.top:hover {
 opacity:0;
}

Effect #2 :

Example :

HTML :

<div id="cst2" class="hover">
 <img class="bottom shadow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXvuZ3J1PM7K0LLUojXi2BAILUKfr66tzZE-lvm7AJJ7A8nzPSE6yaXBhiqVrweNKCgqxJrlr1uaAK4RQmmvnuQYiY3cC62mxgYZYWXYqSvt4u1NXJ573wTRMMkveOvRfRtj8M1HYVwRE/s1600/Sites+Like+Google+Adsense.jpg">
 <img class="top shadow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxar6lVDuAu23qIScn7VVmKxao4WTVJN06z5rTtOPmXrT5DFuDpef5C2qaFNch3AgBPuBIgBAR2NNBQk_MeU9pLWSjvxT-TyOiNHdpZv-Ooy5YNXCf6LhQkBMPextlpAbHNQnCtk25osk/s1600/3+Amazing+CSS3+Transitions.jpg">
</div>

CSS :

#cst2 {
  position:relative;
  height:281px;
  width:450px;
 }
 #cst2 img {
  position:absolute;
  left:0;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
 }
 #cst2 img.top {
  -webkit-transform:scale(1,0);
  -moz-transform:scale(1,0);
  -o-transform:scale(1,0);
  transform:scale(1,0);
  filter: alpha(opacity=0);
  opacity:0;
 }
 #cst2:hover img.top, #cst2.hover_effect img.top {
  opacity:1;
  -webkit-transform:scale(1,1);
  -moz-transform:scale(1,1);
  -o-transform:scale(1,1);
  transform:scale(1,1);
 }
 #cst2:hover img.bottom, #cst2.hover_effect img.bottom {
  filter: alpha(opacity=0);
  -webkit-transform:rotate(360deg) scale(0,0);
  -moz-transform:rotate(360deg) scale(0,0);
  -o-transform:rotate(360deg) scale(0,0);
  transform:rotate(360deg) scale(0,0);
 }

Effect #3 :

Example :

HTML :

<div id="cst3" class="hover">
 <img class="bottom shadow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXvuZ3J1PM7K0LLUojXi2BAILUKfr66tzZE-lvm7AJJ7A8nzPSE6yaXBhiqVrweNKCgqxJrlr1uaAK4RQmmvnuQYiY3cC62mxgYZYWXYqSvt4u1NXJ573wTRMMkveOvRfRtj8M1HYVwRE/s1600/Sites+Like+Google+Adsense.jpg">
 <img class="top shadow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxar6lVDuAu23qIScn7VVmKxao4WTVJN06z5rTtOPmXrT5DFuDpef5C2qaFNch3AgBPuBIgBAR2NNBQk_MeU9pLWSjvxT-TyOiNHdpZv-Ooy5YNXCf6LhQkBMPextlpAbHNQnCtk25osk/s1600/3+Amazing+CSS3+Transitions.jpg">
</div>

CSS :

#cst3 {
  position:relative;
  height:281px;
  width:450px;
 
 }
 #cst3 img {
  position:absolute;
  left:0;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
 }
 #cst3 img.top {
  -webkit-transform:scale(0,0);
  -moz-transform:scale(0,0);
  -o-transform:scale(0,0);
  transform:scale(0,0);
  opacity:0;
 }
 #cst3:hover img.top, #cst3.hover_effect img.top {
  opacity:1;
  -webkit-transform:scale(1,1);
  -webkit-transform-origin: top right;
  -moz-transform:scale(1,1);
  -moz-transform-origin: top right;
  -o-transform:scale(1,1);
  -o-transform-origin: top right;
  transform:scale(1,1);
  transform-origin: top right;
 }
 #cst3:hover img.bottom, #cst3.hover_effect img.bottom {
  -webkit-transform:scale(0,0);
  -webkit-transform-origin: bottom left;
  -moz-transform:scale(0,0);
  -moz-transform-origin: bottom left;
  -o-transform:scale(0,0);
  -o-transform-origin: bottom left;
  transform:scale(0,0);
  transform-origin: bottom left;
 }

5 Best Advertising Networks For Bloggers

Every blogger wants to earn some revenue from their blogs. You can earn some money from your blogs by becoming an ad publisher, first we need to find a perfect publisher website for you. Below are top 5 advertising/publisher networks:

Google Adsense: Google Adsense is best publishing network, which is recommended by every blogger. Many bloggers are earning millions of dollars with Adsense. Adsense pays you more than any other publisher website. You receive 68% of revenue with Adsense. Getting accepted for Adsense is like a nightmare for a new blogger but it's the best advertising website. If your Adsense account is banned then this article may help you.

Infolinks: Infolinks provides intext ads and they also provide related tags, tag clouds which can gives you maximum advantage from Infolinks, Infolinks share 70% of revenue with their publishers,you will get approved easily but first read their Requirements then apply.

BuySellAds: BuySellAds is different from others, in buy sell ads you can sell advertising space on your website and you can set pricing as per your choice, its different from Adsense and you can use this with Adsense, but you can use buy sell ads if you have really good traffic and your account will approve if you have good traffic, if you are new then think about other options.

Contextweb: Contextweb is a CPM ad network with a good reputation that serves as a great source of revenue for low to high traffic websites and does not require clicks to earn revenue.

Bidvertiser: Bidvertiser is also a good alternative to Adsense. BidVertiser online advertising network offers Bid Per Click ad sales model, that gives publishers the ability to sell their ads space to highest bidding.

Label Widget Style For Blogger

Here we go :

• First add a Label widget on your blog.

• Change setting to cloud style.

• Add this widget on your blog :

Advance CSS Tabs

It's cool and also you can do lots of crappy this with it :

CSS :

<style >
#site { background: #FFF; }
#tabs {
border: 1px solid #DEDEDE;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
min-height: 200px;
position: relative;
overflow: hidden;
margin: 25px;
}
.tabs-content {
padding: 25px;
height: 120px;
overflow: hidden;
position: absolute;
bottom: 0;
left: 0;
display: none;
}
.tabs {
overflow: hidden;
background: #e1e1e1;
background: -moz-linear-gradient(center top , #f2f2f2, #e1e1e1);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(100%,#e1e1e1));
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
-webkit-box-shadow: 0 1px 0 #FFF inset;
-moz-box-shadow: 0 1px 0 #FFF inset;
box-shadow: 0 1px 0 #FFF inset;
}
.tabs a {
display: block;
float: left;
font: 15px/35px Arial, Helvetica, Sans-serif;
padding: 0 20px 0 40px;
color: #999;
text-shadow: 0 1px 0 #FFF;
border-left: solid 1px rgba(0,0,0,0.05);
border-right: solid 1px rgba(255,255,255,0.7);
position: relative;
overflow: hidden;
}
.tabs a:first-child {
border-left-width: 0;
}
.tabs a:last-child {
border-right-width: 0;
}
.tabs a:after {
content: '✔';
position: absolute;
top: 0;
left: 10px;
line-height: 21px;
font-size: 10px;
width: 21px;
text-align: center;
margin: 7px 10px 5px 0;
background: #000;
font-size: 12px;
-moz-border-radius: 21px;
-webkit-border-radius: 21px;
border-radius: 21px;
background: #bdbdbd;
background: -moz-linear-gradient(center top , #d4d4d4, #bdbdbd);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d4d4d4), color-stop(100%,#bdbdbd));
-webkit-box-shadow: 0 1px 0 0 #FFF, 0 1px 0 0 rgba(0,0,0,0.25) inset;
-moz-box-shadow: 0 1px 0 0 #FFF, 0 1px 0 0 rgba(0,0,0,0.25) inset;
box-shadow: 0 1px 0 0 #FFF, 0 1px 0 0 rgba(0,0,0,0.25) inset;
text-shadow: 0 1px 0 #999;
color: #ffffff;
}
#tab1:after { content: '1'; }
#tab2:after { content: '2'; }
#tab3:after { content: '3'; }
#tab3 { border-right-width: 0; }
.tabs a:target {
background: #FFF;
border-left-color: #CCC;
}
.tabs a:target:after {
background: #038bd5;
background: -moz-linear-gradient(center top , #2dc3fc, #038bd5);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2dc3fc), color-stop(100%,#038bd5));
text-shadow: 0 1px 0 #096c9e;
-webkit-box-shadow: 0 1px 0 0 rgba(255,255,255,0.45), 0 1px 0 0 rgba(0, 0, 0, 0.25) inset, 0 0 5px 0 rgba(0,148,255,0.85);
-moz-box-shadow: 0 1px 0 0 rgba(255,255,255,0.45), 0 1px 0 0 rgba(0, 0, 0, 0.25) inset, 0 0 5px 0 rgba(0,148,255,0.85);
box-shadow: 0 1px 0 0 rgba(255,255,255,0.45), 0 1px 0 0 rgba(0, 0, 0, 0.25) inset, 0 0 5px 0 rgba(0,148,255,0.85)
}
.tabs a:target + section.tabs-content {
display: block;
}
</style>

HTML :

<div id="tabs">
<nav class="tabs">
<a id="tab1" href="#tab1">Widget Craft</a>
<section class="tabs-content">
You can learn creating this CSS tabs at Widcraft.blogspot.com.
</section>
<a id="tab2" href="#tab2">Author</a>
<section class="tabs-content">
This blog is created by Hardeep Asrani from India he is a commerce student but doing this is his passion.....i mean my passion :p .
</section>
<a id="tab3" href="#tab3">WWE</a>
<section class="tabs-content">
I'am a huge WWE Fan and owner of India's number one WWE News Website.
</section>
</div>

That's It