Wednesday, September 29, 2010

SEO Tips, Meta Keywords, Meta Description

Currently, when you create a new blog, Blogger doesn't add meta keywords or meta descriptions.  The following code will show you how to update your template and create dynamic meta tags.

Step 1: Log Into the Blogger Dashboard
Step 2: Select the Design Tab --> Edit HTML
Step 3: Make sure to Check the Expand Widget Content check box
Step 4: Look for the following code
(*) You should always backup your work before making any template changes.   

<title><data:blog.pageTitle/></title>

Step 5: You are going to replace the above code with the code below.
(*) You will need to replace certain parts of the code below with your own keywords and descriptions


    <!-- ***************************************************** -->
    <!-- Determine if the the page you are on is the home page -->
    <!-- of the blog or an individual blog entry                          -->
    <!-- 'data:blog.pageType == &quot;item&quot;' is an            -->
    <!-- individual blog entry                                 -->
    <!-- ***************************************************** -->

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
   
        <!-- ** Title ** -->
        <title><data:blog.pageName/> | <data:blog.title/></title>

        <!-- ******************************* -->
        <!-- Setup Meta Tags -->
        <!-- ********************************-->

        <meta content='en' http-equiv='Content-Language'/>

        <!-- ******************************* -->
        <!-- Meta Keywords  -->
        <!-- ********************************-->

       <meta expr:content='data:blog.pageName+ &quot;, SEOBloggerBook.blogspot.com, SEO Blogger Book, Blogger Search Engine Optimization &quot;' name='keywords'/>

        <!-- ******************************* -->
        <!-- Meta Description  -->
        <!-- ********************************-->
   
        <meta expr:content='&quot;This blog post reviews the &quot;+data:blog.pageName+ &quot;.  Be sure to visit often for the latest SEO blog tricks&quot;' name='description'/>

    <b:else/>

        <!-- ** Title ** -->
        <title><data:blog.pageTitle/></title>

<meta content='text/html; charset=windows-1252' http-equiv='Content-Type'/>
<meta content='en' http-equiv='Content-Language'/>

        <!-- ******************************* -->
        <!-- Meta Keywords  -->
        <!-- ********************************-->

        <meta content='SEO Blogger Book, Blogger SEO Tips, Search Engine Optimization' name='keywords'/>

        <!-- ******************************* -->
        <!-- Meta Description  -->
        <!-- ********************************-->

        <meta content='The SEOBloggerBook.blogspot (SEO Blogger Book) is dedicated to to help bloggers optimize there Google Blogs for the best Search Engine optimization' name='description'/>

    </b:if>

Tuesday, September 28, 2010

SEO Tips, Sitemaps

Google's Blogger has a blogger feed with an extension of Atom.xml.  You can use the Atom.xml as a sitemap to submit to search engines.  The problem is the default Atom.xml file only displays roughly 25 of the most recent posts of your blog.  This is bad news if you want your whole blog indexed and you have more than 25 entries.

There is a solution, but it will require you to create multiple sitemaps with each sitemap containing roughly 500 entries.

In the following example 3 sitemaps are created and each sitemap will contain up to 500 blog entries.

http://name of blog.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500
http://name of blog.blogspot.com/atom.xml?redirect=false&start-index=501&max-results=500
http://name of blog.blogspot.com/atom.xml?redirect=false&start-index=1001&max-results=500

If more sitemaps are needed just add 500 the index count (1501, 2001, ...)

Friday, September 24, 2010

Blogger Tips, Scrolling Text Box

Ever had the need to for a scrolling region on your Blog? The following code example will allow you to create a scrolling text box.



<div style="background-color #000000;  border-width:2px solid black; width:200px; height:100px; overflow:auto;">
Place Content Here</div>



The <div style=" "> and </div> are the opening and closing HTML tags for the scroll box. 
  • background-color #000000; – This is the color of the inside of your box.  You can make the background whatever color you want.  Just remember that certain colors may make reading text an issue.
  • border-width:2px solid black; - This tells the browser how wide to make the boarder and what color it should be.
  • width:200px — This tells the browser to make the box 200 pixels wide. You can specify a different width based on your blog.
  • height:100px — This tells the browser to make the box 100 pixels tall. Again you can specify a different height based on your blog.
  • overflow:auto - sets the overflow value.

This is a scrollbox
As you can see the scrollbox will
allow you to put in as much text as you need.




Thursday, September 23, 2010

Blogger Tips, Dynamic Widgets

The following will show you how to make your blogger widgets dynamic.  This code will allow you to hide or show widgets based on certain conditions (Home Page, Not Home Page or Archive pages)

Step 1: Log Into the Blogger Dashboard
Step 2: Select the Design Tab --> Edit HTML
Step 3: Make sure to Check the Expand Widget Content check box
Step 4: Look for the following code
(*) You should always backup your work before making any template changes.  

<b:widget id='HTML1' locked='false' title=' Name of your widget' type='HTML'>

The No. in Red can differ from 1,2,3,4,5.  The title should be the same as the widget title.

An easy way to find the widget is to search for following code and scroll until you find the one you're looking for.  Look for the one that has the title="" what ever is the title for the widget.

<b:widget id='

After finding the appropriate widget, add the following Red Cod below.  Be sure to identify when you want the widget to appear (Home Page, Not On Home Page or on Archives).

1. To show widget only on Homepage
<b:widget id='HTML3' locked='false' title='Widget Title Name' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

2. To show Widget only in Posts and Not Homepage
<b:widget id='HTML3' locked='false' title='Widget Title Name' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

3. To show Widget only In Blog Archive and not in post and Homepage
<b:widget id='HTML3' locked='false' title='Widget Title Name' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Once your done adding the code above, be sure to save your changes.