Sunday 29 July 2012

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.



Saturday 28 July 2012

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.....

Friday 27 July 2012

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!

Thursday 19 July 2012

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




Tuesday 17 July 2012

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.....

Saturday 14 July 2012

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..... :)

Thursday 12 July 2012

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
  • 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 :)

Tuesday 10 July 2012

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;
 }

Popular Posts

 
Powered by Blogger.