Blogger Templates: Smash My Typo

Smash My Typo Blogger Template

Smash My Typo is a popular Blogger template with a focus on typography and simplicity. It has 2/3 columns layout and minimal design.

Features: white, minimal, blue, two columns, fixed width, Twitter, RSS feed, top menu, 3 columns footer.

Blogger Widget: Show Total Posts & Comments

How to Restore Pencil to Edit Posts

You might have noticed that some Blogger blogs have widget installed in the sidebar which displays total posts and comments of that blog. Well, you can also install such a widget in your blog as well. A simple script allows us to show off total posts and comments on our blog.

Blogger Widget: Show Upto 25 Recent Comments with Summaries

A simple recent comments widget allows us to display 5 latest comments in sidebar. Now you can display up to 25 comments with summaries of the comments.

Steps to Install the Widget

  1. Go to Design then Page Elements.
  2. Click on Add a Gadget link in your sidebar
  3. A new window will open with a list of widgets, chose HTML/JavaScript widget from there.
  4. Once that widget is opened, paste the following code in the Content area of the widget:
    <ul style="font-style: italic;"><script style="text/javascript">
    function showrecentcomments(json) {
    for (var i = 0; i < 20; i++) {
    var entry = json.feed.entry[i];
    var ctlink;

    if (i == json.feed.entry.length) break;
    for (var k = 0; k <; k++) {
    if ([k].rel == 'alternate') {
    ctlink =[k].href;
    ctlink = ctlink.replace("#", "#comment-");
    var ptlink = ctlink.split("#");
    ptlink = ptlink[0];
    var txtlink = ptlink.split("/");
    txtlink = txtlink[5];
    txtlink = txtlink.split(".html");
    txtlink = txtlink[0];
    var pttitle = txtlink.replace(/-/g," ");
    pttitle =;
    if ("content" in entry) {
    var comment = entry.content.$t;}
    if ("summary" in entry) {
    var comment = entry.summary.$t;}
    else var comment = "";
    var re = /<\S[^>]*>/g;
    comment = comment.replace(re, "");

    document.write('<li style="text-align:left">');
    document.write('<a href="' + ctlink + '">' +[0].name.$t + '</a>');
    document.write(' on ' + pttitle);
    if (comment.length < 150) {
    document.write(comment + '...<a href="' + ctlink + '"> (more)</a><br><br>');
    comment = comment.substring(0, 150);
    var quoteEnd = comment.lastIndexOf(" ");
    comment = comment.substring(0, quoteEnd);
    document.write(comment + '...<a href="' + ctlink + '"> (more)</a><br><br>');
    <script src="">
  5. Save the widget and see your blog for changes.

Widget Customization

You need to replace with your own blog address. You can further make customization by changing the value 20 to some higher or lower value. This value is for the number of comments and you can't have more than 25 comments. Last thing you can modify is font-style: italic; which you can change to font-style: bold; or font-style: normal; to change the font styling.

Blogspot How to: Add Social Bookmarking Icons in Blog Posts Footer


Social bookmarking services such as StumbleUpon, Digg & Reddit (->My love) are really popular these days & if a blog post makes it's way to the front page of these services then it's your lucky day. The concept is simple; people browsing web share their favorite bookmarks with others through these services. You can install these icons in your post footer so that your visitors can easily share a post.

Blogger Templates: Paper Wall

Paper Wall Blogger Template

Paper Wall is a beautiful Blogger template with 2 columns layout. It has a grungy look and awesome background design.

Features: grungy, premium, two columns, fixed width, search box, top menu, social networking icons, colorful.

How to Change Post Body Font Size, Color & Style

You can customize post body font in any expect like color, size, style or family. First, you should know what is the default CSS code for post body and then we'll customize it according to our own taste.

Blogspot News: Track Blog Visitors With Live Traffic Stats

Keeping track of blog visitors is a must for every blogger. The most used tracking service is Google Analytics which is free. Some people also use Site Meter which is also free. Anyways, I've written tutorials to install both Google Analytics or Site Meter on a blog and track website visitors. Now, you don't need to install any external code to monitor traffic because Blogger-Blogspot has introduced built-in traffic stats for all blogs.

Blogspot SEO: Submit Your Blog to Google, Yahoo and Bing Search Engines

Search engines might take some time to discover and index your blog so, you can manually submit your blog to 3 major search engines Google, Yahoo and Bing. Don't submit links to multiple pages, just submit the URL/address of your blog homepage.

Install Google Analytics to Track Blog Visitors

Google Analytics is a free product that tracks your website and gives detailed statistics about visitors to your website. For example, Analytics can show you how people found your site, how they explored it, and how you can enhance their visitor experience. With this information, you can improve your website return on investment, increase conversions, and make more money on the web. To install Google Analytics on Blogger, you need to follow these steps:

How to Add Image as Blog Background

We can easily add a background image in a Blogger/Blogspot blog. To add an image as your blog background, first of all you need to do 3 things:

1- Select an image.
2- Upload it.
3- Add it to your blog HTML.

How to Post Large High Quality Images


By default, Blogger decreases the size and quality of an image in the post. We can make some modifications in the uploaded image code to retain the quality.

Blogspot How to: Host Images on Blogger


Why Should I Upload Images on Blogger???

Image hosting sites like Photobucket & TinyPic have a bandwidth limit. Which means if your uploaded image is viewed too many times then a ridiculous notification will appear instead of your images. So, avoid using such services. Blogger provides 1Gb of free space to every user for images and that's more than enough.

How to Submit Your Blog to Google

Just a while ago, I wrote an article to get your site indexed by Google by using Google Webmaster Tools. If you quickly want to add your URL to Google then you'll need to follow these simple steps.

Blogspot How to: Submit Blog Sitemap to Google via Google Webmaster Tools

Google controls 85% of the global search and any blog is heavily dependent on traffic from search result. We must make sure that all the posts or pages of our blog are indexed by Google. We can submit a blog sitemap to Google through Google Webmaster Tools. Google can then use this sitemap to quickly index all the entries of a blog.

How to Backup or Download a Blogger Blogspot Template

It is very important that you regularly backup your template layout. You can easily download your exiting layout and restore it if anything goes wrong during experiment or when applying a tutorial.

Blogspot Hack: Leave Title Field Blank in Blogger Gadgets

Since the introduction of new Blogger Template Designer, many people have complained about a problem. Blogger no longer allows you to leave the Title field of blank. This is true for any widget/gadget. So, here is a very simple way to trick Blogger and leave the Title field blank.

Blogspot Tutorial: Add a Stylish Blog Search Engine


You can add a colorful search engine to your blog with ease. Many people prefer to have a simple search engine but you can customize it to suit your taste or your blog outlook. Lets have a look at a simple search engine and then we will customize it.

A simple blog search engine

The code for this search engine is:

<form id="searchThis" action="/search" style="display: inline;" method="get"><input id="searchBox" style="width: 200px;" value="Enter something here..." name="q" onclick="this.value=''" type="text"/><input id="searchButton" value="Search!" type="submit"/></form>

You can change two things in this simple search engine. One is value="Search!" where you can replace Search! with some other word like Go!. You can also replace value="Enter something here..." with some other line which will appear in the search box.

Customize this simple search engine to make it stylish and cool

Now, we have seen a simple search engine lets customize it by changing its width, height, colors & font size.

I've used two colors (black & white) to customize the outlook of our simple search engine and it's looking cool, lets have a look at its code and then we'll further customize it.

<form id="searchThis" action="/search" style="display: inline;" method="get"><input id="searchBox" style="width: 150px; height: 15px; color: #FFFFFF; font-size: 14px; background-color: #000000;" value="Enter text to search..." name="q" onclick="this.value=''" type="text"/><input id="searchButton" style="border-color: #000000; background-color: #FFFFFF; color: #000000;" value="Submit!" type="submit"/></form>

Now, I'll explain styling used in this search engine.


width: 150px; is defining width of this search engine, you can change it to a higher value for more width. Like if I change it width: 150px; to width: 200px; this is the result...


height: 15px; is defining height, you can change also change it to another number like when I changed height: 15px; to height: 20px; this happened...


color: #FFFFFF; is for white color. You can certainly have another color by entering it's hex code and if you don't know about hex codes then simple download ColorPic which is a free color capturing utility.

I changed the color: #FFFFFF; to color: #FFD900; which is kinda orange color and this is the result...

Font Size

font-size: 14px; is for font size in px. I changed it to a lower value 10px just to show you the effect...

Background Color of Search Box

background-color: #000000; is for background color of the search box (not of button). Lets change it to background-color: #FF0000; which is for red color and see what happens.

Border Color

Next things is the styling of our search button. border-color: #000000; is the border color of our search button, change it to border-color: #FF0000; and see the result...

Background Color of Search Button

background-color: #FFFFFF; is the background color of the search button, change it to #FFFF00 (yellow) and see what happens...

Search Button Text Color

Last thing is color: #000000; which is the color of search button text, lets change it to #0000FF (blue) and the result is...

Installing this search engine in your blog

You can install this engine after all the customization in your sidebar by going to Layout | Page Elements and on your sidebar click Add a Gadget link. From the new opened window chose HTML/JavaSrcipt gadget and in the Title field write a title as you wish and in the Content area, add the code of your search engine. Click Save and enjoy.

Blogspot Tutorial: How to Write a Post in Blogger Compose Mode


When you're logged in to Blogger and you already have created a blog, you'll see a NEW POST icon under every blog, click on that icon and you'll be taken to an other page where you can create a post. This area is your Post Editor. and it has two modes i.e. Edit HTML and Compose. Our topic is all about Compose mode.

This is an overall look of the Blogger post editor (Compose mode).

A Dummies Guide to Compose Mode

What to do if you can't see a Compose mode option in the post editor!

If you're unable to see a Compose mode option in the post editor then you need to see a setting. Go to your Blogger Dashboard | Settings | Basic and scroll down to second last option which is Show Compose Mode for all your blogs?. Make sure this option is seleted Yes and then click on SAVE SETTINGS at the bottom of the page.

The Title field in Compose mode!

When you're creating a post, the first thing you'll work with is your post title. Please be careful and enter a relevant title in this field because this is a critical component to search engines. I'm writing this tutorial on Compose mode, so, my title is "A Dummies Guide to Compose Mode" which is pretty relevant.

A Dummies Guide to Compose Mode

The toolbar with a lot of icons!

Toolbar is really our biggest help in Blogger Compose mode. It contains a lot of tools that will make our life easier. Move your cursor on any of these icons to see what they do. Let's start discussing these tools one by one...

A Dummies Guide to Compose Mode

1- Font

Blogger offers 8 different fonts which can be added to beautify our post. You just need to select the text which font you want to change and then select the font from the drop down menu. This fonts are:

1- Arial
2- Courier
3- Georgia
4- Lucida Grande
5- Times
6- Trebuchet
7- Verdana
8- Webdings

2- Font size

Second tool in our toolbar is about font size. We can select a text to and select it's size from this tool.

1- Smallest
2- Small
3- Normal
4- Large
5- Largest

3- Bold & Italic

These tool will simply make your selected text bold or italic.

4- Text Color

You can change your text to any color through this tool, it's really amazing and easy. Make sure you don't do any stupid things with this tool like your post background color is black and you're making your post text dark.

5- Link

This is maybe the most important tool and is used extensively. You might want to link to someone else' blog or some other site in your post then you can simple type in the name of that blog or site and click this tool, it will prompt you to enter a URL and you need to enter the URL (address) of that blog or site which you want to link.

For example, I want to link "Blogger" to "", so I'll type Blogger and press the Link tool and enter the URL ( and this is the result, click to see: Blogger

I would recommend you to read "Creating and Using Links in Blogger" for further information.

6- Align Left, Align Center, Align Right & Justify Full

When writing poems, these tools are really helpful to align your text like I'm writing some lines of a poem here with different alignments.

Be glad your nose is on your face,
not pasted on some other place,
for if it were where it is not,
you might dislike your nose a lot.
(Align Left)

Be glad your nose is on your face,
not pasted on some other place,
for if it were where it is not,
you might dislike your nose a lot.
(Align Center)

Be glad your nose is on your face,
not pasted on some other place,
for if it were where it is not,
you might dislike your nose a lot.
(Align Right)

Be glad your nose is on your face,
not pasted on some other place,
for if it were where it is not,
you might dislike your nose a lot.
(Justify Full)

7- Numbered List, Bulleted List & Blockquote

These tools are helpful to create lists. Numbered List will, of course, create lists with numbers like 1, 2, 3, 4 and so on. Bulleted List will not create numbers and it will only use some bullets to create lists.

Blockquote is a very rarely used tool. Select some text and click on Blockquote tool, your text alignment will change and it will be more distinguishable (easily recognizable) than the remaining text. This tool inserts a space before and after the selected text and also creates margin between selected and unselected text.

8- Check Spelling

It will check spelling mistakes in your post.

9- Add Image

This tool will help you to add images in your post from your computer or from the internet. Clicking this tool will cause a pop-up window to appear like this..

A Dummies Guide to Compose Mode

You can click Browse button to upload an image from your computer or you can directly enter an image URL ( from the internet to include images in post. You can also select alignment of your image (None, Left, Center, Right) and upload size (Small, Medium, Large). If you check the Use this layout every time? option then you don't need to adjust the size and alignment of your images again and again.

I would recommend you to always chose Large as your image upload size and don't use image URLs from the internet to upload instead you can always upload image from your own computer. Blogger gives every one 1 GB free space for images, use it. See these articles on images:

How to Use Blogger for Uploading or Hosting Images


How to Post Large Images

10- Add Video

This tool will upload a video from your computer with maximum upload size of 100 MB.

A Dummies Guide to Compose Mode

11- Remove Formatting from selection

This is an awesome tool, it's like Undo tool we found in many many applications. Imagine you've selected a text and changed it's color but after some time you want to remove that color then simply selected the color text and click Remove Formatting from selection tool and see what happens.

Preview link

This link will show you a preview of your post i.e. how it will look like when you'll publish it online.

Post body

Post body is the central part of our discussion. Whatever we do, appears here, in a big white box under our toolbar. In the picture, the post body is highlighted in orange color.

A Dummies Guide to Compose Mode

Post Options Link

You need to click this link at the bottom to see what it contains. You can manage Reader Comments, Backlinks and Post date and time of every post through this link.

A Dummies Guide to Compose Mode

Labels for this post: & Show all link

You can also set categories for each post, in terms of Blogger categories are labels. For example I'm writing about this article about Blogger basics, so, my labels could be "Blogger Basics", "Basics", "Blogger Compose Mode" and so on.


The PUBLISH POST button will simple publish your post to the world of internet and SAVE NOW can save your post progress specially when you're writing long posts. However, Blogger automatically saves the post after regular intervals.

How to Create a Blogger Blog

No comments:

Considering you're a Blogger beginner, I'll tell you how to create your first blog on Blogger.


1- Go to this link and click on CREATE A BLOG button.

How to Create Your First Blogger Blog

2- As Blogger is owned by Google, so, you need to create a Google Account. Type in all the fields but make sure that you already have an email address of any web service like Yahoo, Hotmail or Gmail. This Email will be your username in the future. After filling all the fields in this page, click CONTINUE button at the bottom of the page.

How to Create Your First Blogger Blog

3- Your Google Account has now been created so you can create a blog on this page. Enter a Blog title (can be changed later) and a Blog address (can be changed later but not recommended). Please chose your Blog address wisely, it will be something like After that click CONTINUE button to move on.

How to Create Your First Blogger Blog

4- Now, you've also created your first Blogger blog. Chose a template from this page (can be changed later) and click CONTINUE.

How to Create Your First Blogger Blog

5- Hurray, your blog is alive now online. You can share the address of your blog with friends, family or colleagues. Make sure to see other tutorials on this blog.

Important Tips

See backup related articles here.

10 Reasons to Chose Blogger For Blogging


Blogger was founded by a small company Pyra Labs and later bought by Google in 2003. Since then it has grown into a huge platform for blogging. You can easily start your online life just by going to the Blogger homepage and starting a blog. Here are some of my favorite reasons to chose Blogger for blogging.

1- Ownership

Blogger is owned by one of the biggest companies on web "Google". With billions of dollars in the pocket, Google can really keep the things going happy.

2- Free

Like most of the Google services, Blogger is also free for everyone. You can start and host a blog on Blogger absolutely free. You're also given a free domain.

3- Resources

Currently, hundreds of templates, tutorials and hacks are available to get you going with Blogger. Some people have also started to offer premium templates and services exclusively for Blogger.

4- Community

A lot of coders and experts are getting involved in helping fellow Blogger users. People (like me) provide free help, consultation and tutorials on Blogger.

5- SEO

Blogger blogs are automatically indexed by Google after some time of their creation. However, it is always better to submit your site manually (?) or submit the site map of site through Google Webmaster Tools (?).

6- Personalization

Once you create a blog, it will never be deleted or the name will never be given to anyone, it will always remain yours. By default, you get a free domain like but you can purchase and use a custom domain anytime. Of course, users of old domain would be automatically redirected to the new custom domain.

7- Advertisements

Blogger allows any kind of advertisements on Blogger powered blogs. Like many other free hosts, it doesn't add any kind of banner on your blog.

8- Customization

You can totally customize the look and feel of your blog. There's absolutely no restriction on doing that and by the way, Blogger has just introduced a custom template designer through which you can create your very own designs.

9- Security

Blogger is very secure and I've not heard anyone losing his/her account through hacking. Of course, if you'll give your password to someone then... what can I say.

10- Simple

Blogger is really simple and easy to get started. It is designed to target the people who aren't familiar with HTML or CSS stuff. You just have to follow the simple instructions to do something.

Final Words

Well, I've already said a lot in favor of Blogger but of course, there are also some very popular blogging platforms like Wordpress but if you're new to the blogging or you've not yet tried Blogger, try it because you won't regret it.

I'm Unable to Upload Pictures on Blogger

I'm Unable to Upload Pictures on Blogger

How to fix "Can't Create New Post Error"

A lot of people are reporting in official Blogger forums about this problem. Most of them, when try to create a new post, receive notorious bx errors (bX-xovb7t). Thanks to the rapid feedback, a Blogger employee Gatsby has finally given the solution in the forums but you can see it here.

Create a Sticky Post Which Remains Always at Top


Many people want a particular post to stay always at the top position on your homepage. Actually, Blogger arranges the posts order according to their date & time. So, you can also change your post time to keep it at the top as long as you wish. There are two scenarios explained below.

If you're writing a post and haven't published yet

Just click the Post Options link at the bottom of the post editor and change the date of the post to some future date like 2020. The format of the date is Month/Day/Year like when I'm writing this post, the date is 7/15/09, so I can change 09 to some future year.

If you've already written and published the post

Then go to Edit Posts and then find that post. Once found, click Edit link and post will again open in the Post Editor where you can change it's date.

It's a pretty simple tutorial, stay in touch for more tips and tricks, see ya!

Recover a Deleted Blogger/Blogspot Blog Within 90 Days

Blogger never deletes your blog and there's always a chance to recover it. However, if you've deleted your account, then you can't recover your blog back.

I always do experiments on test blogs so, I created a lot of mess with these test blogs and one day I decided to delete them and I did that. After some days, I noticed that there's a link on my Dashboard like this:

Install Site Meter on Blogger to Track Visitors

Install Site Meter on Blogger to Track Visitors

Site Meter is a free service which can track your visitors. You'll have a clear picture of who is visiting your site, how they found you, where they came from, what interests them and much more.