Note: all these short tutorials are for "new blogger" also called "layouts" and may not work for "classic templates" also called "original blogger." If you want to upgrade (recommended!) follow Google's instructions here.
Want to encourage others to start blogging? The last tip is a 90-second video to creating your first blog!
Here are some of the tips in this article:
- Find great free custom templates for your blog.
- How to view your layout HTML to make changes.
- What to do if you get errors.
- Get more traffic from search engines by making the title tag of your web page the same as the title of your post.
- When several posts are showing on the home page, have each offer a "Read more" link.
- Changing or hiding the Google navbar at the top of the page.
- Easier post editing.
- Fixing the "Tag is not closed" error
- What are backlinks and how do I use them?
- What does the Link field do?
- How can I develop my own custom blogger designs?
- 70 Great designs from around the web
- Some very nice free designs by Blogger Tricks.com
- Classic designs from Free Blogger Templates
- Most favorited designs at BlogSkins.com
- Designs by one of Google's chosen designers
- Simple templates from eBlog templates
To make these changes, you'll need to be in the Layout / Edit HTML tab in the blogger editor, which looks something like this:
Be sure to click the "Download Full Template" link and save the file before continuing. This is a backup of your site layout that you can use to go back to before you made changes, in case you make a mistake.
To get started, from the Edit HTML page, click the small checkbox to expand Widget Templates, which looks something like this:
Once that's done, you should be able to see and edit all the code necessary for these tips to work. Here's a brief introduction to what a lot of the code on your page is there for:
The <body> area of your template is mostly (1) sections and (2) widgets.
- Sections mark out page areas like the sidebar, footer, etc.
- Widgets are an single page elements like a picture, blogroll, or anything else you can add from the Page Elements tab. You can include any HTML you like around the sections in your template.
<b:section id='header' class='header' maxwidgets="1" showaddelement="no"> </b:section>
3. What to do if you get errors
Errors are not uncommon, but can often be worked around, or will clear themselves up.
General tips:
- Close the page that is giving you a problem and try again in a few minutes.
- Log out and log back in again.
- Check the unfixed issues page.
- Rebooting your computer is one option, but usually the issue can be made to go away without that.
Getting an error message page?
- Trying going back one page (leave the error message page) and refreshing the page, then trying what you did again. You can click the refresh button, or press the single F5 key at the top of your keyboard. (You can also hold down the Ctrl key on a Windows computer while pressing the F5 key.)
- Switch to a different browser before trying again. Try switching between Internet Explorer (or Maxthon) and Firefox (or Flock).
- Clear cache (delete temporary Internet files) and cookies in Tools-Internet Options.
- Add a question mark to the end of your blog's internet address in the address box and check again.
- If you're in classic Blogger, try republishing
This helps search engines show searchers the topic of each post you've written. Otherwise they may just show the name of your blog for every post. After this change, search engines should show searchers the actual title of the blog post on the search engine results page. Here's a before and after example:
Here's what you do. First, search for this text:
<title><data:blog.pagetitle/></title>
And replace it with this text:
<b:if cond='data:blog.pageType == "item"'> <title><data:blog.pageName/> | <data:blog.title/></title> <b:else/> <title><data:blog.pageTitle/></title> </b:if>
Now the title of your post will also be the title of each web page, followed by the name of your blog. If you want to eliminate the name of your blog from the title of your web pages entirely, use this as a replacement instead:
<b:if cond='data:blog.pageType == "item"'> <title><data:blog.pageName/> | <data:blog.title/></title> <b:else/> <title><data:blog.pageTitle/></title> </b:if>
5. When several posts are showing on the home page, have each offer a "Read more" link.
This is a more advanced technique. Note that this won't affect a page that is just a single post. Read Google's tutorial if you're having trouble. Here's the abbreviated version of what to do:
Step 1 of 3: Add the below to your style sheet. If you know what you're doing, you won't need the <style> and </style> tags, but if it isn't working, try it with these:
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>Step 2 of 3: Add the following code to your template, somewhere after the <data:post.body> tag:
<b:if cond="data:blog.pageType != "item""> <a expr:href="data:post.url" href="">Read more!</a> </b:if>
Step 3 of 3: Then add span tags to each post, so they look something like this when viewed on the "Edit HTML" tab of the blogger editor:
Here is the beginning of my post. <span class="fullpost">And here is the rest of it.</span>
Tip: You have to be working in the "Edit HTML" tab of the blogger editor, and you should make adding the fullpost span code the last thing you do: DO NOT switch to the "Compose" tab once the span tag has been added. The editor may remove the fullpost span code if you do. Google will probably eventually fix this, but for now, you have to make your final changes from the "Edit HTML" tab and then click "PUBLISH POST" when done.
Here's Google's tutorial on this effect, which they call creating expandable post summaries.
6. Hide the Google bar at the top of the page
Note that Google discourages this, but specifies that it is NOT against their terms of service. Also realize you can change the color from Layout / Page Elements, and clicking on the "Edit" link for the Navbar page element. You have your choice of Blue, Tan, Black, or Silver.
- Blocking the "next blog" link. Google's method for blocking it on a LAN.
- Completely hiding the Navbar: one method.
Make the box you type and edit in larger:
Pressing down with the mouse and dragging on the tiny gripping lines showing on the lower-right box corner (shown below)
Easier image dragging:
Making the editing box bigger helped, but also try pressing the enter key on your keyboard to add more lines of space where you want the image to go. Delete the extra lines of space when you're done.
Use keyboard shortcuts:
To use these, hold down the "Ctrl" key on your keyboard while pressing:
- shift + a = Link
- l = Blockquote, when in HTML-mode only (this is the lower-case letter "L")
- shift + p = Preview
- d = Save as Draft
- p = Publish Post
- s = Autosave and keep editing
- b = Bold
- i = Italic
- z = Undo
- y = Redo
Here's what the beginning of a typical error message of this type looks like:
If you switch back and forth between Edit HTML and Compose modes, in some situations blogger will remove some closing tags. They are easy to type back in.
When you see the error, just scroll down until you see the text that blogger has highlighted for you as being in error.
If the tag not closed starts with an embed (I've shown this below highlighted in green) near the end of the text blogger highlighted as in error, you'll need to add a closing embed tag (highlighted in yellow below). If there is a div tag at the very end, type your just in front of it, as shown. Click the picture below for an enlarged version.
So that you can encourage other to blog, here's a 90-second video on how to create your first blog on blogger:
Read more!
