Submit XML Sitemap for Blogspot

Google finally released an XML sitemap for blogspot. Usually to indexed quickly, you are prompted to put atom.xml or RSS Feed to Google Webmaster Tools. With the release of XML sitemap for blogger, now you can work more easily. But is valid only for Blogspot, not for Custom Domain.

Blogger has been providing a wide range of new features, including a New look of Blogger HTML editor. The new look aims to make it easier for blogspot users to edit HTML. And unbeknownst to the public, Google has released an XML Sitemap for blogspot, and it is very beneficial for us. Because the XML sitemap will inform all existinghttp://beautifulbeta.blogspot.com/ blog URLs to search engines. And information structure created by this sitemap, will give employees full information to the search engine crawlers, so this is our advantage over a blog article that quickly indexed by Google.

After Blogger XML Sitemap released, of course we had to put it to Google Webmaster Tools, as we usually do to speed up the search engine Google indexed all blog articles. So how do I make a sitemap? Blogger will create anXML sitemap for Blogspot. To access the sitemap, you only need to type your blog url and ends with sitemap.xml, for example:

http://beautifulbeta.blogspot.com/sitemap.xml

How to put XML Sitemap into Google Webmaster Tools?

How to submit Blogspot sitemap using sitemap.xml Sitemap, go to http://google.com/webmaster/tools >> choose Sitemap menu >> add sitemap.xml

Finally glad to Release Blogger XML Sitemap, so you do not have to bother using the feed url and atom.xml again, simply submit your blogspot sitemap.xml, and it already represents all the information available in the blogspot url companions. Hope it helps and useful.

New Look on Blogger HTML Editor

Blogger HTML Editor now changed since April 9, 2013. With the presence of a new look, Blogger automatically adds the latest features to pamper the users.

The following is the new look of Blogger HTML editor.

 

Some of the changes, including:

1. Expand Widget Templates removal, because all the tags are generated or is not hidden as before

2. Adding "Jump to widget" button, this is making easier to edit the widget.

3. Preview Template Editor is now integrated with it, like Macromedia Dreamweaver

4. Adding "Revert Changes" button, to restore the code that we edit

5. Using "SyntaxHighligter" (colors code), to facilitate the editing code.

6. Adding the "Format template", to compile and tag code added.

7. Using Collapse system to display the hidden code, characterized by "►"

8. Adding Ctrl + Shift + F and Ctrl + Shift + R functions

I think the new look of Blogger HTML Editor is increasingly easier to understand the structure of a Blogger template.

How to find Expand Template function, if this function has been removed?

Refer back to points 1 and 7 above. You just need to expand the code by clicking on the mark "►". For example, you want to look for CSS, CSS is actually there, just click  ► on <b:skin> ... </ b: skin>

It takes time to learn new look of Blogger HTML editor. Keep learning!!

Post Summary And Read More

My old friends here are very well aware of the Peek-A-Boo-Posts hack that Ramani and I came up with several years ago. It required quite some template hacking and javascript too.

In this tutorial you will learn how to tweak your blog without any javascript to get a similar effect. On our homepage, all posts will show a short summary, followed by a "Read More" link. Clicking the "Read More"-link will bring up the post page with the full post text.

Step 1: Back up your template
Open the Layout|Edit HTML-tab on your Dashboard, and download the template as an XML-file to your harddisk. If anything goes wrong, upload it again and there will be no problem at all.

Step 2: Modify the template code
Scroll down and look for the following piece of code:

<div class='post-body entry-content'>
  <data:post.body/>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

This is the piece of template code that displays the post-body on the screen. We have to add a few lines of code here:

<div class='post-body entry-content'>
  <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <style type='text/css'>.restofpost {display:none;}</style>
  </b:if>
  <data:post.body/>
  <b:if cond='data:post.link'>
    <a expr:href='data:post.link'>Read more...</a>
  <b:else/>
    <b:if cond='data:post.url'>
      <a expr:href='data:post.url'>Read more...</a>
    </b:if>
  </b:if>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Now save your template.

Step 3: Modify your post template
In your Blog Settings you can modify the post template. Change it to:

<div class="summary">Type summary here</div>
<div class="restofpost">Type rest of post here</div>

And save your settings.
This will take care of all new posts. Type the summary text in between the summary-div-tags. Type the rest of the post between the other div-tags, and publish!

Step 4: Modify old posts
If you want older posts to have summaries as well, change every post and add a summary-div and restofpost-div.

And furthermore...
The summary-div is not really necessary, as the code only hides the restofpost-div if we are on the homepage. If you want some other styling for the summary, add CSS-tags to the skin-part of your blog.

Removing the Blogger Navbar

It is an oldie, but worth mentioning.
You can remove the blue Blogger navigation bar that is at the top of each page by adding a single line of CSS to the skin of your blog.
From your dashboard go to the Layout | Edit HTML screen and scroll down to the skin part of the blog.
Feel free to save your current template first by downloading it, but it is not really necessary as this is not a very risky modification.

<b:skin><![CDATA[/*
 ...
 ...
#navbar {display:none;}
 ...
 ...
]]></b:skin>

Save and display, and finally you will be rid of the navigation bar.