Blogger Templates & How To Tutorials

How to Enable Threaded Comments in Customized Blogger Templates

2012-01-22T10:48:00.000-08:00

Blogger has recently introduced much-awaited feature of threaded commenting. Now, users can reply to a comment and the comment owner will get an email notification. Naturally, I was also excited about it so, I enabled this feature on my heavily customized template. But it didn't work. I was lucky enough to have an old backup file of Simple Blogger template. After doing some coding, I found it quite easy to integrate the threaded comments in the Simple Blogger template. Please note that this is not a properly tested tutorial. Your template might have different codes. So, follow the steps carefully.

Steps to Enable Threaded Comments in Blogger

First of all make sure that your blog feed is set to Full. You can confirm that by going to Settings > Other and then selecting Full from the Allow Blog Feed dropdown.

You must also have embedded comment form enabled. Check that by going to Settings > Posts and Comments and check the Comment Location dropdown.

After that, open the Template section.

Warning: Backup your current template before moving on.
Click the Edit HTML button.

A new window will open. You'd have to click the Proceed button to start editing.

Check Expand Widget Templates option.

Find the following line of code:
<b:includable id='postQuickEdit' var='post'>

</div>
    </div>
  </div>
</b:includable>
<b:includable id='postQuickEdit' var='post'>

BEFORE

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
      </div>
    </div>
  </div>
</b:includable>
<b:includable id='postQuickEdit' var='post'>

Now, we need to find the following piece of code:

<div class='post-outer'>
        <b:include data='post' name='post'/>
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comments'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comments'/>
        </b:if>
        </div>

and REPLACE the above code with the following one:

<div class='post-outer'>
        <b:include data='post' name='post'/>
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        </div>

Click Save template and then Close button.

Check your blog. If you can see the option of Reply under each comment then threaded commenting is enabled. Otherwise, upload your backup template.

How to Change Post Title Background Color in Blogger Templates

2011-12-17T03:35:00.000-08:00

A reader emailed me and asked about changing the post title background color, so here it is. In this tutorial I'll tell you how to change the post title background color in Blogspot templates. As usual, we'll do some editing in the template's HTML code and after that, you'll be able to change the post background color from Blogger Template Designer. So, here are the simple steps to follow:

Note: These instructions are according to the updated Blogger interface.

Steps to Change Post Title Background Color

Open the Template section.

Click the Edit HTML button.

A new window will open. You'd have to click the Proceed button to start editing.

Find the following code:

/* Variable definitions
   ====================

Replace the above code with the following one:

/* Variable definitions
   ====================

   <Group description="Post Title Background Color" selector="h3.post-title">
     <Variable name="post.title.bg.color" description="Title Background Color" type="color" default="#222222" value="#eeeeee"/>
     <Variable name="post.title.bg.hover.color" description="Title Hover Background Color" type="color" default="#222222" value="#000000"/>
   </Group>

Save your template and move on the next step.

Now this step is a little different for each Blogger template. So, please follow the instruction according to the template you're using.

For Simple Blogger template, find the following code:

h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
}

and replace it with the following one:

h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
}

h3.post-title a, h3.post-title a:visited { background:$(post.title.bg.color); }
h3.post-title a:hover { background:$(post.title.bg.hover.color); }

For Picture Window Blogger template, find the following code:

h3.post-title {
  margin: 0;
  font: $(post.title.font);
}

and replace it with the following one:

h3.post-title {
  margin: 0;
  font: $(post.title.font);
}

h3.post-title a, h3.post-title a:visited { background:$(post.title.bg.color); }
h3.post-title a:hover { background:$(post.title.bg.hover.color); }

For Awesome Inc & Ethereal Blogger templates, find the following code:

h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color);
}

and replace it with the following one:

h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color);
}

h3.post-title a, h3.post-title a:visited { background:$(post.title.bg.color); }
h3.post-title a:hover { background:$(post.title.bg.hover.color); }

For Watermark Blogger template, find the following code:

h3.post-title {
  font: $(post.title.font);
  margin: 0;
}

and replace it with the following one:

h3.post-title {
  font: $(post.title.font);
  margin: 0;
}

h3.post-title a, h3.post-title a:visited { background:$(post.title.bg.color); }
h3.post-title a:hover { background:$(post.title.bg.hover.color); }

For Travel Blogger template, find the following code:

h3.post-title {
  margin-top: 20px;
}

and replace it with the following one:

h3.post-title {
  margin-top: 20px;
}

h3.post-title a, h3.post-title a:visited { background:$(post.title.bg.color); }
h3.post-title a:hover { background:$(post.title.bg.hover.color); }

Coding is finished. Save your template.

Lets Change the Post Title Background Color in Template Designer

We've done the coding work. Now, you can simply open the Blogger Template Designer and customize the post title background color.

To open Template Designer, click Customize button. In Template Designer, select Advanced from the left menu. You'll see the Post Title Background Color option at the top. Here, you can preview your changes live. Please note that the change in Title Hover Background Color will not appear in Preview window. You can simply apply these changes to your blog and enjoy :)

How to Add Background Color to Sidebar Widget Titles

2011-10-05T03:20:00.000-07:00

A reader has requested this tutorial to add background color to sidebar titles. By default, Blogger only allows to change the font & color of sidebar widget titles. So, I'll try to make it as simple as possible & you'll be able to change the background color from the Template Designer.

Can I Apply This Tutorial on Any Template?

Currently, you can apply this tutorial only on 'Simple' Blogger template. If you're using any other Blogger template or custom template, please be careful.

Steps!

Open the Template section.

Click the Edit HTML button.

A new window will open. You'd have to click the Proceed button to start editing.

Find the following code:

   <Group description="Gadgets" selector="h2">
     <Variable name="widget.title.font" description="Title Font" type="font"
        default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="widget.title.text.color" description="Title Color" type="color" default="#000000" value="#000000"/>
     <Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#999999" value="#999999"/>
   </Group>

REPLACE the above code with the following one:

   <Group description="Gadgets" selector="h2">
     <Variable name="widget.title.font" description="Title Font" type="font"
        default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="widget.title.text.color" description="Title Color" type="color" default="#000000" value="#000000"/>
     <Variable name="widget.title.bg.color" description="Title Background Color" type="color" default="#999999" value="#999999"/>
   </Group>

After that, find the following code:

h2 {
  margin: 0 0 1em 0;

  font: $(widget.title.font);
  color: $(widget.title.text.color);
  text-transform: uppercase;
}

REPLACE the above code with the following code:

h2 {
  margin: 0 0 1em 0;
  background: $(widget.title.bg.color);
  font: $(widget.title.font);
  color: $(widget.title.text.color);
  text-transform: uppercase;
}

In this step, find this code:

.widget .zippy {
  color: $(widget.alternate.text.color);
  text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);
}

REPLACE the above code with the following one:

.widget .zippy {
  text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);
}

The background color of sidebar widget titles is also applied to the date above posts. So, we need to do a little more coding. Find the following code:

.date-header span {
  background-color: $(date.header.background.color);
  color: $(date.header.color);
  padding: $(date.header.padding);
  letter-spacing: $(date.header.letterspacing);
  margin: $(date.header.margin);
}

REPLACE the above code with the following one:

.date-header span {
  color: $(date.header.color);
  padding: $(date.header.padding);
  letter-spacing: $(date.header.letterspacing);
  margin: $(date.header.margin);
}

h2.date-header {background:$(date.header.background.color);}

Click Save template and then Close button.

Change Widget Title Background Color in Blogger Template Designer

After finishing the tutorial, you can easily change the background from Blogger Template Designer. Open 'Template Designer' & select 'Advanced' from the left. Then select 'Gadgets' and you'll see the option to change background of the sidebar widget titles.

How To Change Post Title Color in Picture Window Template

2011-08-06T01:03:00.000-07:00

By default, there is no option to change post title color in Blogger Designer Templates. I've already written a tutorial to do that but users of Picture Window template are having problems. Here is a tutorial to change post title color in Picture Window template.

Note: If you're using other templates then see this tutorial:
Blogspot How To: Change Post Title Color in Blogger Template Designer Templates

Steps to Change Post Title Color in Picture Window Template

Open the Template section.

Click the Edit HTML button.

A new window will open. You'd have to click the Proceed button to start editing.

Find the following code:

   <Group description="Post Title" selector="h3.post-title, .comments h4">
     <Variable name="post.title.font" description="Title Font" type="font"
         default="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
   </Group>

Tip: You can press 'Ctrl + f' keys or simply scroll down the HTML a bit to find the code.

Replace the previous code with the following code:

   <Group description="Post Title" selector="h3.post-title, .comments h4">
     <Variable name="post.title.font" description="Title Font" type="font"
         default="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="post.title.color" description="Color" type="color" default="#FE6602" value="#FE6602"/>
<Variable name="post.title.hover.color" description="Hover Color" type="color" default="#FFD25F" value="#FFD25F"/>
   </Group>

Now find this code:

h3.post-title {
  margin: 0;
  font: $(post.title.font);
}

Replace the above code with this code:

h3.post-title {
  margin: 0;
  font: $(post.title.font);
  color: $(post.title.color);
}

h3.post-title a {
  color: $(post.title.color);
}

h3.post-title a:hover {
  color: $(post.title.hover.color);
}

Click Save template and then Close button.

Now go to Template Designer then Advanced and edit the Post Title option.
You can simply edit the post color and post hover color from here.
Enjoy!

How to Change Sidebar Background Color in Blogger Templates

2011-04-07T09:32:00.000-07:00

Hi guys, writing a tutorial after a long time. Anyway, here is a simple tutorial to change the sidebar background color in new Blogger Template Designer templates. After this tutorial, you can easily change the sidebar background color from Template Designer.

Update: I've updated this tutorial. Now you can change the sidebar background color in every Blogger template. Templates with multiple sidebars can also have different colors for each sidebar.

Steps!

Open the Template section.

Click the Edit HTML button.

A new window will open. You'd have to click the Proceed button to start editing.

Find the following code:

/* Variable definitions
====================

REPLACE the above code with the following one:

/* Variable definitions
====================

<Group description="Right Sidebar Background" selector="body">
<Variable name="sidebar.right.top.color" description="Right Top Sidebar Background" type="color" default="#00f" value="#0000ff"/>
<Variable name="sidebar.right.left.color" description="Right Left Sidebar Background" type="color" default="#ff0" value="#ffff00"/>
<Variable name="sidebar.right.right.color" description="Right Right Sidebar Background" type="color" default="#f0f" value="#ff00ff"/>
</Group>

<Group description="Left Sidebar Background" selector="body">
<Variable name="sidebar.left.top.color" description="Left Top Sidebar Background" type="color" default="#00f" value="#0000ff"/>
<Variable name="sidebar.left.left.color" description="Left Left Sidebar Background" type="color" default="#ff0" value="#ffff00"/>
<Variable name="sidebar.left.right.color" description="Left Right Sidebar Background" type="color" default="#f0f" value="#ff00ff"/>
</Group>

<Group description="Sidebar Column Background" selector="body">
<Variable name="sidebar.bgr.color" description="Right Sidebar BG Color" type="color" default="#f00" value="#ff0000"/>
<Variable name="sidebar.bgl.color" description="Left Sidebar BG Color" type="color" default="#f00" value="#ff0000"/>
</Group>

After that, find ]]></b:skin> and REPLACE it with the following code:

#sidebar-right-1 { background: $(sidebar.right.top.color); }
#sidebar-right-2-1 { background: $(sidebar.right.left.color); }
#sidebar-right-2-2 { background: $(sidebar.right.right.color); }
.column-right-inner, column-right-outer { background: $(sidebar.bgr.color); }
.column-left-inner, column-left-outer { background: $(sidebar.bgl.color); }
#sidebar-left-1 { background: $(sidebar.left.top.color); }
#sidebar-left-2-1 { background: $(sidebar.left.left.color); }
#sidebar-left-2-2 { background: $(sidebar.left.right.color); }
]]></b:skin>

Click Save template and then Close button.

How to Change the Background Color in Template Designer?

We've finished the coding stuff, now simply click the Customize button to open Blogger Template Designer.

Then click the Advanced tab. You'll see 3 new options there. First one is Right Sidebar Background. It has 3 further options.

Right Top Sidebar Background: This will change the background color of the top section in the right column.
Right Left Sidebar Background: This will change the background color of the left sidebar in the right column.
Right Right Sidebar Background: This will change the background color of the right sidebar in the right column.

Next option is Left Sidebar Background. It also has 3 further options.

Left Top Sidebar Background: This will change the background color of the top section in the left column.
Left Left Sidebar Background: This will change the background color of the left sidebar in the left column.
Left Right Sidebar Background: This will change the background color of the right sidebar in the left column.

Last option will be Sidebar Column Background. This is the most interesting one because it affects the whole column rather than a single sidebar section. It has 2 further options.

Right Sidebar BG Color: The color in this option will change the background of whole column on the right side.
Left Sidebar BG Color: This option will change the background of left side column.

Awesome Blogger Features Coming in 2011

2011-03-15T03:35:00.000-07:00

Blogger is been around for a lot of time now with massive user database. In 2010, a lot of new features have been introduced including the all new Template Designer. So, what is coming in 2011? Have a look at both the current & some awesome upcoming features in this video.

I'm specially thrilled with the all new Dashboard design, what are you expecting in 2011? Leave me a comment.

Blogspot How to: Setup Blogger Custom Domain

2011-03-05T03:51:00.000-08:00

By default, your blog address is in this format; http://YOURBLOG.blogspot.com/. As you can see, all blogs hosted on Blogger have blogspot.com included in their address. Such an address is difficult to remember and it is not suitable for a professional blog. Traditionally, switching to a personalized domain required research, a web hosting comparison and the purchase of relatively expensive hosting. Fortunately, Blogger has made arrangements for those who are looking for free or cheap hosting while also upgrading to a more personalized domain name. Now, you can simply buy a custom domain directly through Blogger and forget about setting it up. In this tutorial, I'll explain this whole process of searching, buying and setting up a custom domain.

What is a Custom Domain?

The domain of my blog is a custom domain; http://www.betatemplates.com/. It is a .com domain. However, when someone creates a blog on Blogger, the address of that blog is in this format; http://example.blogspot.com/. Blogger adds .blogspot to all of its blogs.

Why Should I Use a Custom Domain?

The Blogger addresses are very difficult to remember because they contain .blogspot. Switching to a custom domain makes it really easy to create an easy-to-remember address. It also gives a good impression to have a custom domain specially for professional blogs.

What is the Cost of a Custom Domain?

Typically, a custom domain costs you around 10$ per year. You have to renew it annually to keep using it. Please note that Blogger provides us free hosting so no need to buy hosting.

I'm Ready, Lets Buy & Setup a Custom Domain!

Follow these steps:

Log in to your Blogger account.
Go to 'Settings' then 'Publishing' tab.
Click 'Switch to: Custom Domain' option.
Enter the desired domain name and check its availability.
If you're looking for a .com domain then it might be difficult to find a great domain because a lot of people chose .com domain names so good luck for that. You can also chose .net, .biz, .info or .org domains but they're not as popular as .com domains.
If that domain is available, Blogger will take you to Google Apps and you'd have to complete 3 steps there. These steps are well explained in the following video:

How Long Will it Take to Shift to a Custom Domain?

After setting up a custom domain, it might take up to 3 days to move to the custom domain. So, don't worry about that. Blogger also takes care of the settings behind the scenes.

What Happens to Existing Address, Visitors & PageRank?

Here comes the awesome features of Blogger. Your existing visitors will be automatically redirected to the custom domain. The PageRank is also kept intact so don't worry about that as well.

Creating a Picture Link in Blogger Posts

2011-02-08T02:57:00.000-08:00

You can also create picture link so that when a user clicks an image in your post, a new blog or a website will open. By default, when you upload a picture, it is linked to itself. For example, I've uploaded the following image, click it to see what happens:

So by default this image is linked to itself. If you've clicked it, you would have seen that same image is opened in the same tab. So, we'll change this image link.

Creating an Image Link in New Post Editor

To change the image link, please switch to the 'Edit HTML' tab of your post editor.

You'll see that there is no image there. Instead, there will be only code. Actually, this code is the HTML of our image. 'Compose' mode shows us the compiled HTML and 'Edit HTML' mode shows the raw HTML code. Anyways, now we'll do a little bit of editing.

This is the code for the above uploaded image.

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/_YhSpqnDS1pY/TVGcRgAEpQI/AAAAAAAAAA4/RPiDITFllIc/s1600/1330057_flower.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="225" width="300" src="http://2.bp.blogspot.com/_YhSpqnDS1pY/TVGcRgAEpQI/AAAAAAAAAA4/RPiDITFllIc/s400/1330057_flower.jpg" /></a></div>

Please note that there will be 2 addresses or URLs in the uploaded image. For my image, these are the URLs.

http://2.bp.blogspot.com/_YhSpqnDS1pY/TVGcRgAEpQI/AAAAAAAAAA4/RPiDITFllIc/s1600/1330057_flower.jpg

http://2.bp.blogspot.com/_YhSpqnDS1pY/TVGcRgAEpQI/AAAAAAAAAA4/RPiDITFllIc/s400/1330057_flower.jpg

There is only 1 difference in the image URLs which is s1600 and s400. First URL with s1600 is actually the link URL. It is responsible for making this image a link. Second URL with s400 is the source URL. It displays the image.

As I've already told you that, by default, the image is linked to itself. So we need to change the first URL in our image code. For example, if I want to link the above uploaded image to my blog's homepage which is http://www.betatemplates.com/. I'll only replace my blog homepage URL with the first URL in the image code. After that, the image code will look something like this:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.betatemplates.com/" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="225" width="300" src="http://2.bp.blogspot.com/_YhSpqnDS1pY/TVGcRgAEpQI/AAAAAAAAAA4/RPiDITFllIc/s400/1330057_flower.jpg" /></a></div>

As you can see that I've only changed the first URL. Second URL is still an image. Now, if you'll click the following image, it will take you to my homepage.

Make Image Link Open in a New Window or Tab

If you're linking your image to some other blog or website then it is pretty desirable to make it open in a new window or tab. By doing this, visitors will stay on your blog.

To do this, I'll just add target="_blank" in the image code just after the link address. The code will look like this:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.betatemplates.com/" target="_blank" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="225" width="300" src="http://2.bp.blogspot.com/_YhSpqnDS1pY/TVGcRgAEpQI/AAAAAAAAAA4/RPiDITFllIc/s400/1330057_flower.jpg" /></a></div>

And the image will look same. However, now it will open in a new window or tab.

How to Backup & Restore Blog Posts Using Blogger Import/Export Feature

2011-02-06T12:53:00.000-08:00

Blogger has an awesome feature to download and save blog posts on your computer. Of course, you can later restore the posts as well. Additionally, you can also move your posts to some other blogging platform using the export feature or to some other Blogger blog. I'd highly recommend to regularly backup your posts. Check out the instructions to see how to do it.

1- Export or Backup Blog Posts to Your Computer

Chose Settings from the list of options. You can press the drop down arrow button to see more options.
In the Settings section, click Other from the left menu.
You'll see 3 options in Blog Tools. Click Export blog. A window will open where you'd have to click the Download Blog button.
An .XML file will be downloaded to your computer. Make sure to give it a proper name and keep it safe. This file will be used to restore your posts later.

2- Import or Restore Blog Posts From Your Computer

Chose Settings from the list of options. You can press the drop down arrow button to see more options.
In the Settings section, click Other from the left menu.
You'll see 3 options in Blog Tools. Click Import blog. A window will open where you'd have to browse the file on your computer & click the Import Blog button.
If you're importing posts from some other blog then make sure that Automatically publish all imported posts is not checked.
Now your posts have been imported or restored.

How to Change Jump Break (Read More) Font, Color & Background Color in Blogger Template Designer

2011-02-06T00:02:00.000-08:00

Blogger officially supports 'after the jump' summaries. You can insert a jump break anywhere in a post to make it short on the blog homepage. The part after the jump break will be visible only when user will click on the Jump Break or Read More link. In this tutorial, we'll add some coding in the template HTML. After that, you'd be able to change the font, color or even the background color of the Jump Break or Read More from the Template Designer.

Please don't use this tutorial on your blog if you're not using 'Simple' Blogger template, otherwise you might get an error!

This tutorial is also available in video form at my YouTube channel:
http://www.youtube.com/user/BloggerEngineer

What is Jump Break or Read More Link?

If you don't know anything about Jump Break or Read More links, please read the following article in the official Blogger help.

Creating 'After the jump' summaries

Steps

Follow these simple steps to complete this Blogspot tutorial.

Log in to your Blogger account.
Open 'Design' tab then 'Edit HTML' tab.
Scroll down a bit and you'll see this code:
```
/* Variable definitions
====================
```
Tip: Windows users can press 'Ctrl + f' to fing the code.

Replace the above code with the following code:

/* Variable definitions
====================

<Group description="Read More" selector=".jump-link">
<Variable name="rm.font" description="Font" type="font"
default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px 'Trebuchet MS',Trebuchet,Verdana,sans-serif"/>
<Variable name="rm.color" description="Color" type="color"
default="#f9f9f9" value="#eeeeee"/>
<Variable name="rm.h.color" description="Hover Color" type="color" default="#eeeeee" value="#eeeeee"/>
</Group>

<Group description="Read More Background" selector=".jump-link">
<Variable name="rm.bg.color" description="Color [www.betatemplates.com]" type="color"
default="#000000" value="#000000"/>
</Group>

After that, find ]]></b:skin> and replace it with the following code:

.jump-link { float: right; font: $(rm.font); background: $(rm.bg.color); }
.jump-link a, .jump-link a:visited { color: $(rm.color); }
.jump-link a:hover { color: $(rm.h.color); }
]]></b:skin>

Now, save your template.
After saving template, open the 'Template Designer'.
In 'Template Designer', expand the Advanced tab and you'll see 'Read More' and 'Read More Background' tabs at the top.
You can change the font, color and background color and instantly see the preview. However, change in 'Hover Color' can't be previewed instantly. You'd have to open the blog and bring your mouse over the Jump Break or Read More link to see the 'Hover Color' effect.
After customizing the Jump Break or Read More link, click 'APPLY TO BLOG' link to save your changes.

How to Add Unique Meta Tags For Each Post in Blogger

2011-02-05T05:20:00.000-08:00

Meta description tags are vital for search engine optimization but adding unique meta tags for each post in Blogger is a tricky thing. I've tried my best to make this process as simple as possible.

Feel free to watch this video and many more videos on my YouTube channel. Make sure you also subscribe to get latest updates as well.

http://www.youtube.com/user/BloggerEngineer

Blogspot How To: Change Post Title Color in Blogger Template Designer Templates

2011-02-04T10:07:00.000-08:00

I have received a lot of comments on a previous post. Readers are asking how to change the post title color in the new Blogger Template Designer templates. Well, here is a very simple step by step tutorial for you.We'll make some changes in the template CSS and then you'll be able to customize post title without any coding stuff.

Warning: Before making any changes, you must backup your existing layout:

Blogspot How to: Backup Your Blogger/Blogspot Template

Note: If you're using 'Picture Window' template, then see this tutorial:

How To Change Post Title Color in Picture Window Template

Steps to Make Post Title Font Customizable in the Blogger Template Designer Templates.

Open the Template section.

Click the Edit HTML button.

A new window will open. You'd have to click the Proceed button to start editing.

Find the following code:

   <Group description="Post Title" selector=".post">
<Variable name="post.title.font" description="Font" type="font"
default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
</Group>

Replace the above code with the following code:

   <Group description="Post Title" selector=".post">
<Variable name="post.title.font" description="Font" type="font"
default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="post.title.color" description="Color" type="color" default="#FE6602" value="#FE6602"/>
<Variable name="post.title.hover.color" description="Hover Color" type="color" default="#FFD25F" value="#FFD25F"/>
</Group>

Now find this code:
```
.post {
margin: 0 0 25px 0;
}
```
If you've found the code, then skip the remaining part of this step and move on to the next step.

Note: If you're unable to find the above code then most probably you're using another variant of Simple template. So, instead of the above code, you can find the following one:
```
h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
}
```
and replace it with:
```
h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
}

.post h3 a, .post h3 a:visited { color: $(post.title.color); }
.post h3 a:hover { color: $(post.title.hover.color); }
```
After replacing the code, skip the next step and save your template.

Replace the previous code with the following code:

.post {
margin: 0 0 25px 0;
}

.post h3 a, .post h3 a:visited { color: $(post.title.color); }
.post h3 a:hover { color: $(post.title.hover.color); }

The coding work is finished, save your template and move on to the next step.

Hurray, Coding Done! Go & Customize the Post Title in Template Designer!

Simply open the Template Designer tab and select Advanced from the left options. Find Post Title and you'll see this (click to see full size):

You'll see Color and Hover Color there. By changing the Color, you'll be changing the color of the post title in normal state and it will also be available in Preview mode. However, Hover Color will change the post title color when mouse comes over it. You can't see the change in Hover Color in Preview mode. You have to save your template, open it and bring your cursor over the post title to see hover color effect.

Having Problems?

Please follow the tutorial carefully, I've updated it several times. But if you still have a problem, leave me a comment with your blog address.

Video Tutorial: How to Add Facebook Share or Recommend Button in a Blogger Blog

2011-02-01T22:39:00.000-08:00

You can easily add a Facebook share/recommend button in sidebar or below posts. This button lets users share your blog content with their friends on Facebook.

You can watch more Blogger help videos by going to my YouTube channel:

http://www.youtube.com/user/BloggerEngineer

Please subscribe and give your feedback.

Blogspot How to: Add Adsense Below Post Titles

2011-01-29T11:14:00.000-08:00

Google Adsense is the most popular ad network on the planet. A lot of Blogger users also use it. It's an endless discussion where to place these ads on your blog for maximum exposure. The best ad places are around the header or above the posts or below the post titles. You can easily add adsense in your sidebar as a gadget. But Blogger doesn't allows us to directly place the ads below post titles. The ads below post titles have proven to be one of the most successful money making positions. So, what are you waiting for? Follow this tutorial to add your Adsense ads below post titles.

Please Note: I'm assuming that you're using the new Adsense interface.

Steps!

Log in to your Google Adsense account by going to https://www.google.com/adsense/
Go to My ads tab and open Ad units from the left side by expanding Content link.[View Screenshot for Help]
Click new ad unit to create a new ad.[View Screenshot for Help]
Select the size, type and color of your ad. For best results chose either 300x250 medium or 336x250 large rectangle.[View Screenshot for Help]
Give your ad a remember-able name and ad a custom channel to track the ad performance. If you don't know anything about channels then leave that option.
After filling required information, click save and get code button at the bottom of the page.[View Screenshot for Help]
A pop-up window will appear with the ad code. Copy that code.[View Screenshot for Help]
Before pasting the ad code in Blogger, we must make it compatible with Blogger format. So go to http://www.hacktrix.com/adsense-code-converter/ paste the ad code and convert it. You'll find the converted ad code in the bottom box there. Copy the converted ad code.
Open your Blogger account and go to Design then Edit HTML tab and check Expand Widget Templates option.
Press Ctrl + f & find <data:post.body/> you'll see some code like this:

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

Paste the converted ad code just before the above code. The result would look something like this:

<script type="text/javascript"><!--
google_ad_client = "ca-pub-xxxxxxxxxxxxxxx";
/* my ads */
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Click the PREVIEW button to see the result. Thought you might not see ads below post titles instantly because sometimes Adsense ads take some time to display.
After that save your template by clicking the SAVE TEMPLATE button.

Tip: Make Ads Appear Only on Post Pages

Usually, users don't like to see too many ads on a single page. So, we can hide the ads under post titles on main page. These ads will appear only when users will click the post title and go to the post page. To do that follow the steps above but after step 8 you have the converted ad code. Ad some more code in that converted code so that it should look like this:

<b:if cond='data:blog.pageType == &quot;item&quot;'><script type="text/javascript"><!--
google_ad_client = "ca-pub-xxxxxxxxxxxxxxx";
/* my ads */
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></b:if>

What I did here is that I've added an if condition to make the ads appear only on post pages. After that, follow the steps above to complete the tutorial.

Blogspot Video Tutorial: How to Create a Post in Blogger

2011-01-22T08:24:00.000-08:00

Hi guys, this is the 2nd part of my video tutorials series "Blogging for Beginners". In this part, I've explained how you can create a post on Blogger. Please watch this video and share it with your friends.

You can subscribe to my YouTube channel for further video updates:

http://www.youtube.com/user/BloggerEngineer

Blogspot Video Tutorial: How to Create a Blog With Blogger

2011-01-20T01:10:00.000-08:00

Hi guys! I've started a series of video tutorials for beginners. This is the 1st part in which I've explained how you can create your first blog on Blogger. Please watch it and feel free to visit my YouTube channel. You can subscribe to my YouTube channel and post your comments there.

Please post your comments on video page (right click on video and chose "Watch on YouTube"). Also subscribe to my YouTube channel because I'll be posting more tutorials for beginners. Your feedback will be appreciated, thanks :-)

Blogger Templates: Versatility Lite

2010-11-06T05:16:00.000-07:00

Versatility Lite is a 2 column Blogger template with a "Featured Post" section, CSS navigation menus & premium quality layout. [How to Setup]

Features: 2 columns, grunge theme, white layout, top menu, 3 columns, search box, minimal.

Live Demo

Download »

Blogspot How To: Center Post Title in New Blogger Templates

2010-11-05T10:19:00.000-07:00

In this tutorial, I'll tell you how you can change the alignment (position) of the post title. You can align it to center or right. Currently, Blogger offers 6 different templates in the Template Designer so I'll explain this tutorial according to each of the templates.

1- Change Post Title Alignment in 'Simple' Blogger Template

If you're using the Simple Blogger Template then you need to go to Design -> Edit HTML.

Then find (Ctrl + f) the following code:

h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
}