How to Generate Blogger Sitemap and Submit to Google Webmaster

Google sitemap is necessary for each blogger blog which would help search engines to index contents on the blog easily and effectively.Submitting Sitemap to Google Webmaster, will help you to optimize blog for SEO in Google Search. So, waste no time and get started..

• Connect to http://ctrlq.org/blogger/
• Enter your blog URL as shown in image below and click Generate Sitemap.

• Login to Google Webmaster.
• Select your blog. Goto Optimization -> Sitemaps.
• Click on ADD/TEST SITEMAP highlighted in red at top right corner.
• Now select a part of sitemap code generated as shown in image and paste the code.

Click Submit Sitemap


Alternate Method:

• You can submit sitemap in blogger blog also.
• Go to your Blogger dashboard and under Settings – > Search Preferences
• Enable Custom robots.txt option (available in the Crawling and Indexing section). 
• Paste the entire sitemap code generated here and save your changes.

Continue Reading→

Show Blogger/Blogspot Posts with Thumbnail and Read More in Homepage

Show summary of Posts with a thumbnail and ReadMore in Blogger homepage in three simple steps.


Step 1:
Take Backup:Very important part of any customization. Never forget to take backup before making any changes. If you forget/don't want to take backup thinking that you can rollback the changes by altering code, trust me it'll be like working entire new blog from scratch (it from my experience).

Now, goto Template>select Backup/Restore>save the .xml file

Step 2:

• Go to Template>Edit HTML

• Check the Expand widget templates 

• Copy and Paste following code before

</header>

<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 90;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
function PostSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
    if(img.length>=1) {   
        imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
        summ = summary_img;
    }
    }
    var summary = imgtag ;
    div.innerHTML = summary;
}
//]]>
</script>

Step 3:
Search for first occurrence of code

<data:post.body/>

Now, replace this line with the following code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> PostSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<data:post.snippet/>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>

Continue Reading→

Create your own Popular Posts and Recent Posts Widget

        As you already know, Blogger Popular Posts and Blogger Recent Posts Widgets will show Posts based on options selected in widget. Further you do not have any control as to what Posts will be shown.

       Here I'll explain you how to create your own custom Popular Posts/Recent Posts widget using CSS and decide which Posts in which order it should be shown.

1) Log into www.blogger.com
2) Select your blog from dashboard.
3) Goto Layout -> click Add a Gadget.
4) Select HTML/JavaScript from add a Gadget options.
5) Leave Title part empty.
6) Copy and Paste following code in Content part and Save:

<style>

#recent_posts

{float:left;

width:200px;

border:4px double #4169E1;

background:#fff;

box-shadow: 5px 5px 5px #888888;

}

.post_title

{float:left;

width:200px;

height:20px;

padding-top:4px;

line-height:normal;

background:#4169E1;

}

.post_title a

{font:bold 12px Verdana;

color:#fff}

.recent_posts_topic

{float:left;

width:190px;

height:60px;

background:#F0F8FF;

border:2px double #FFFFFF;

margin:0px 0px 0px 2px;

}

.recent_posts_topic a

{font:12px Verdana;

color:#000;

text-decoration:none;}

.recent_posts_topic a:hover

{font:12px Verdana;

color:#1E90FF;

text-decoration:none;}

.recent_posts_topic img

{ border:0px solid #F0F0F0;

width:80px;

height:50px;

float:left;

margin:5px 0px 0px 2px;

}

</style>

<div id="recent_posts"> 

<div class="post_title"> 

<a>Popular Posts</a>

</div>

<div class="recent_posts_topic"> 

<img src="Your_Post_Image"/>

<a href="Your_Post_URL">Your Post Title</a>

</div>

</div>

If you want to add Post then copy and paste code highlighted in red after </div>.

Continue Reading→

How to Check Blog Posts are Indexed in Google

Now you can check is your all blogger posts indexed in Google Search.

• Goto www.google.com
• Type site:your blog name like one shown below:

• All indexed Blog Posts appear in search result.

Continue Reading→

Blogger Tools for Blogs

• How to Check Blog Posts are Indexed in Google
• Submit Blog to Bing
• Get Listed your Blog in Bing using Bing Webmaster 
• Get Listed your Blog in Google using Google Webmaster  
• Get Blogger Sitemap and submit to Google Webmaster  

Continue Reading→

How to Create/Remove Shadow Behind Images in Blogger Posts

Change the background of images in your Posts like shadow behind images, remove borders of images as in shown in this image in simple steps.

Step 1:
Take Backup:Very important part of any customization. Never forget to take backup before making any changes. If you forget/don't want to take backup thinking that you can rollback the changes by altering code, trust me it'll be like working entire new blog from scratch (it from my experience).

Now, goto Template>select Backup/Restore>save the .xml file.



 Step 2:

• Go to Template>Edit HTML

• Copy and Paste following code before

</b:skin>

.post-body img {
padding: 1px;
background: transparent !important;
border: 1px solid transparent !important;

-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
}

Continue Reading→

Blogger Tips and Tricks

• Create your own Popular Posts and Recent Posts Widget

• Show Blogger/Blogspot Posts with Thumbnail and Read More in Homepage

• How to Create/Remove Shadow Behind Images in Blogger Posts

Continue Reading→