Amazing Cats Collection: February 2011

I'm Rehana and this is Tin-Tin Cat, my beloved Burmese. Welcome to my site!

All the information and images are free for you to enjoy and be inspired.

I work on this site from home and it earns me money.

Click here and read how I learned to create a website that receives thousands of visitors a month, and earns me money.

How to Customize 'Older Posts' & 'Newer Posts' Links

In this tutorial, I'll explain how you can customize or change "Older Posts" and "Newer Posts" links which are present at the bottom of your blog posts. By default, these links are just simple text and most of the users won't even notice that these are actually navigation links. However, we can simply add some spicy CSS (?) or replace these links with beautiful icons.

Important things first!

Before moving on, let me tell you that I'll be using Minima template during this tutorial. If you don't have Minima installed, you can simply install it by going to Layout tab then Pick New Template tab and chose Minima from there.

As we'll be making changes in the template HTML, so it would be better to backup your current layout just in case (?).

Find & Change the Default Styling Code for "Older Posts" & "Newer Posts"

We need to find & change the default code which is responsible for the appearance of blog navigation links. First of all, find the following code from the Layout -> Edit HTML tab:

#blog-pager-newer-link {

float: $startSide;

}



#blog-pager-older-link {

float: $endSide;

}



#blog-pager { 

text-align: center;

}

This CSS code is responsible for the style and look of navigation links so just replace the above code with the following:

#blog-pager-newer-link {

float: $startSide;

}



#blog-pager-older-link {

float: $endSide;

}



#blog-pager { 

text-align: center;

font: $navfont;

}



#blog-pager a, #blog-pager a:visited {

color: $navcolor;

background: $navbgcolor;

padding: 5px;

}



#blog-pager a:hover { 

color: $navhovercolor;

background: $navhoverbgcolor;

padding: 5px;

}

Make Navigation Links Customizable Through Fonts & Colors Tab

To edit the links through Fonts and Colors tab, we need to do some more coding work. Don't worry, for you, it will be only copy-paste stuff. Now, in Edit HTML tab, scroll down a little and you'll see some code like this:

/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#5588aa">

Please note that I'm not displaying the full code, this is just to give you an idea. Alright, now you have to put the following code in the above mentioned code [View Screen Shot]:

   <Variable name="navcolor" description="Links Text Color"

type="color" default="#fff" value="#ffffff">

<Variable name="navhovercolor" description="Links Text Hover Color"

type="color" default="#000" value="#000000">

<Variable name="navbgcolor" description="Links Background Color"

type="color" default="#FE6602" value="#FE6602">

<Variable name="navhoverbgcolor" description="Links Background Hover Color"

type="color" default="#FFD25F" value="#FFD25F">

<Variable name="navfont" description="Links Font"

type="font"

default="normal normal 15px 'Trebuchet  MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 15px  'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">

Save your template and resulting code in Edit HTML tab would look something like this [View Screen Shot]!

So, now coding time is over and you can simply go to the Fonts and Colors tab and start editing the "Older Posts" & "Newer Posts" links. You'll find them at the top of the list there.

Links Text Color

It will only change the color of all the navigation links and you'll be able to see the preview instantly.

Links Text Hover Color

This setting represents the color of the links when mouse comes over the link otherwise known as hover effect. You won't see the preview of this setting. To see the result, you'd have to save changes and then see the blog in real time.

Links Background Color

This is the background color of the links in normal state and it can be seen instantly in preview mode.

Links Background Hover Color

Again, this is the background color only when mouse comes over the link and you'd have to save and then see the template to see the result.

Links Font

It will allow you to modify the font of navigation links.

Change the "Older Posts" & "Newer Posts" Text

You can also change the text and replace it with something else like Next & Previous. Before moving on make sure you check Expand Widget Templates.

Change "Older Posts"

Find <data:olderPageTitle/> and replace it with something else like Previous or Previous Page. This text is actually "Older Posts".

Change "Newer Posts"

Find <data:newerPageTitle/> and replace it with some other text like Next or Next Page. This text actually prints "Newer Posts".

Final Words

I've tried my best to explain everything I know in the easiest possible way. This tutorial is free and helpful so please help promoting it by sharing it with friends, commenting here, linking to this tutorial page or main page. If you need any kind of help regarding Blogger, feel free to ask.

How to Post Links in Comments

Let's get started

Ever wondered how to post links in Blogger comments??? Let me tell you a very simple way to do that. A basic HTML link is like this:

<a href="URL">Title</a>

You need to post the above code in the comment box and then all you need to do is to replace "URL" with the URL of the site you want to link to and "Title" with the title of your link.

A Simple Example!

I want to link to "http://www.blogger.com/" with title "Blogger". The code which I'll put in the comment box, will be:

<a href="http://www.blogger.com/">Blogger</a>

Final Words!

Well, it was a simple tutorial regarding Blogger. There are a lot of things for you to discover in Blogger. I encourage to see other sections of this blog for more useful info.

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

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.

Creating a Picture Link in Blogger Posts

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8iaCYh3LjodZ2xTV1nmVXx_f1mvzm3oijWM6FudHrlpM0DD_m0qGVshdZwEsrK8Bb_QnR0lIWgImwrsQbcSBIIvkndRy7LLed4S0N3p__AV4lyn1_8CSkWZ7AtcRg_hyG69avzDmRYenk/s1600/1330057_flower.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="225" width="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8iaCYh3LjodZ2xTV1nmVXx_f1mvzm3oijWM6FudHrlpM0DD_m0qGVshdZwEsrK8Bb_QnR0lIWgImwrsQbcSBIIvkndRy7LLed4S0N3p__AV4lyn1_8CSkWZ7AtcRg_hyG69avzDmRYenk/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.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8iaCYh3LjodZ2xTV1nmVXx_f1mvzm3oijWM6FudHrlpM0DD_m0qGVshdZwEsrK8Bb_QnR0lIWgImwrsQbcSBIIvkndRy7LLed4S0N3p__AV4lyn1_8CSkWZ7AtcRg_hyG69avzDmRYenk/s1600/1330057_flower.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8iaCYh3LjodZ2xTV1nmVXx_f1mvzm3oijWM6FudHrlpM0DD_m0qGVshdZwEsrK8Bb_QnR0lIWgImwrsQbcSBIIvkndRy7LLed4S0N3p__AV4lyn1_8CSkWZ7AtcRg_hyG69avzDmRYenk/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8iaCYh3LjodZ2xTV1nmVXx_f1mvzm3oijWM6FudHrlpM0DD_m0qGVshdZwEsrK8Bb_QnR0lIWgImwrsQbcSBIIvkndRy7LLed4S0N3p__AV4lyn1_8CSkWZ7AtcRg_hyG69avzDmRYenk/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8iaCYh3LjodZ2xTV1nmVXx_f1mvzm3oijWM6FudHrlpM0DD_m0qGVshdZwEsrK8Bb_QnR0lIWgImwrsQbcSBIIvkndRy7LLed4S0N3p__AV4lyn1_8CSkWZ7AtcRg_hyG69avzDmRYenk/s400/1330057_flower.jpg" /></a></div>

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

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.

How to Create a Gadget with Blank Title Field!

Blogger widget titles use h2 heading tags so, whenever you create a new gadget, simply put the following code in the Title field:

<h2></h2>

You will not receive any error and the Title will remain blank. That's it!

How to Change Sidebar Title Font, Size & Color

Blogger sidebar title fonts are very easily customizable like any other section. You just need to find the default CSS definitions of these titles and then we can easily implement our own styles in it.

Let's first check the default style definitions for these titles:

To find this code, go to Layout | Edit HTML and search.

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

1- Change family i.e. Arial, Times New Roman etc.

Currently, sidebar title font is defined by font:$headerfont;. It means that your header font and sidebar title font is same but we can have them according to our wish by adding a font-family property.

h2 {
margin:1.5em 0 .75em;
font-family:"Times New Roman",Georgia,Serif;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

Info: As you can see that I've added 3 fonts (Times New Roman, Georgia, Serif) because a visitor might not have the 'Times New Roman' font installed on his/her computer, so the browser can chose the other two fonts of first-come first-serve basis.

2- Change size.

Simply add font-size property in the default code.

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
font-size:40px;
}

Note: I've added font-size:40px; in which 40px is the size. You can change it according to your wish because 40px is fairly large number.

3- Change color i.e. red, green etc.

Currently, color:$sidebarcolor; property is defining the color. It means that title color is dependent on the sidebar color i.e. sidebar color and title color is same. We can add our own color in it by removing color:$sidebarcolor; and adding color property.

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:#0000FF;
}

Remember: #0000FF is the hex code of blue color.

Tip: You can capture any color on screen and get it's hex code to use it any where, download ColorPic which is a free utility to do that.

How to Add Image as Sidebar Heading Background

To add an image as background of your sidebar heading, follow the simple steps.

1- Go to "Layout" and then "Edit HTML" section.

Remember: In "Edit HTML" section, always click "Download Full Template" before making any changes to your template, this is your backup.

2- Find the following code...

/* Headings
----------------------------------------------- */

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

3- Add the following code in the above code...

background-image:url('URL OF YOUR IMAGE HERE'); /*Enter Image URL here */
background-repeat: no-repeat; /* image repeat horizotally (repeat-x), vertically (repeat-y) or no-repeat */
background-attachment: scroll; /* image should scroll or fixed */
background-position: right top;} /* position of image, first horizontal then vertical */

4- New code should look like this...

/* Headings
----------------------------------------------- */

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
background-image:url('URL OF YOUR IMAGE HERE'); /*Enter Image URL here */
background-repeat: no-repeat; /* image repeat horizotally (repeat-x), vertically (repeat-y) or no-repeat */
background-attachment: scroll; /* image should scroll or fixed */
background-position: right top;} /* position of image, first horizontal then vertical */
}

Tip: Don't change background-position: right top; because most people want to have their image horizontally on the right side and vertically on the top.

Tip: Also avoid repeating the image and keep background-repeat: no-repeat; as it is.

Tip: Also keep your image on scroll because your heading will also scroll, you can't fix it.

5- Now I'll add a small Blogger icon in the background of my heading to demonstrate the coding we've done above.

6- All I've to change in the step 4 code is to enter the image URL of my own image which is currently a Blogger icon, the code would be...

background-image:url('http://dt.yogtec.com/assets/mainpage/blogger.gif'); /*Enter Image URL here */

The green colored line is my image URL.

7- Now I'll see the preview to see the result, it is something like this...

8- As you can see, the Blogger icon is cropped and not fully visible. So. now I'll increase the line-height: 1.4em; factor in the code of step 4. Lets increase it to 5em and see the preview again, now the result is looking good...

and the final code for my image is something like this:

/* Headings
----------------------------------------------- */

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 5em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
background-image:url('http://dt.yogtec.com/assets/mainpage/blogger.gif'); /*Enter Image URL here */
background-repeat: no-repeat; /* image repeat horizotally (repeat-x), vertically (repeat-y) or no-repeat */
background-attachment: scroll; /* image should scroll or fixed */
background-position: right top;} /* position of image, first horizontal then vertical */
}

9- I hope the above demonstration was helpful and if you still have any problems you can leave me a comment, I'll try to answer as soon as possible.

10- Keep visiting "Blogger FAQs" and "Happy Blogging".

How to Add Background Color to Sidebar Widget Titles

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 Sidebar Background Color in Blogger Templates

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.

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. Go to Layout | Edit HTML and find this code:

The default code of posts!

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

Understand the default code!

1- margin:.5em 0 1.5em; is defining spacing between post and other elements in the blog like sidebar and header.

2- border-bottom:1px dotted $bordercolor; it very descriptive. It creates a dotted border at the bottom of the post with width 1px.

3- padding-bottom:1.5em; causes some space between posts and other elements at the bottom. The other elements could be labels, comments or date.

Make changes in the default code!

Now, I've given you some idea about the post body style definitions. By default, the font properties are not defined specifically for posts but we can easily do this by applying some simple CSS techniques.

1- How to change font size in post body!

You need to add font-size:15px; property in the default CSS code:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
font-size:15px;
}

Tip: Try increasing or decreasing 15px to increase or decrease font size.

2- How to change font color in post body!

You need to add color:#FFFFFF; in the default definitions:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
color:#FFFFFF;
}

Tip: #FFFFFF is the hex code for white color, you can capture any color you see on your computer or on web and get the hex code of that color through a free utility ColorPic.

Remember: This property will not effect hyperlinks (?) in the post body, I'll tell you about hyperlinks customization later in this article.

3- How to change the font family in post body!

Font family means that you can control which font will be used to display post body. You can have Arial, Times New Roman, Georgia, Serif and many many more. So, you'll need to apply font-family:"Times New Roman",Georgia,Serif; property for this purpose.

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
font-family:"Times New Roman",Georgia,Serif;
}

Tip: I've added 3 fonts in font-family:"Times New Roman",Georgia,Serif; property, why? Because my user might not have Times New Roman installed on his/her computer then the second font Georgia will be used and similarly Serif can also be used.

Tip: See following article about CSS font family properties for information.

http://www.w3schools.com/css/pr_font_font-family.asp

4- How to change the style of post body font!

Remember: You might not need this property but this is useful for better understanding of your fonts.

By style, I mean you can make your font italic through font-style:italic; property.

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
font-style:italic;
}

Remember: If you'll not add this property in default definitions then your post body font will be displayed normal.

Tip: Blogger post editor provides an easy way to make specific part of text italic. When creating a post, select your text and click the i icon which is the second icon on toolbar.

How to apply these properties on hyperlinks in the post body!

Some of the above described properties will not effect hyperlinks (?) in the post body and there are no definitions in default Blogger CSS for hyperlinks (?) so lets add our own definitions.

This is the deafault code:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

Add some more juice in it:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post a {
color:#FF0000;
text-decoration:underline;
text-transform:uppercase;
}

Now, I'll explain all 3 properties added in .post a {} tag.

1- color:#FF0000; is the hex code for red color, you can hex code of some other color to change it.

2- text-decoration:underline; will make your post hyperlinks (?) underlined, you can change this to text-decoration:none; if you don't want to apply it.

3- text-transform:uppercase; will change your hyperlinks (?) to transform to uppercase. You can change it to text-transform:lowercase; if you want your hyperlinks to display in lowercase or you can change it to text-transform:none; to nullify this effect.

How to customize the hyperlinks for mouse over event (hover effect)!

You can also further customize the font appearance when mouse comes over your hyperlinks. For example you might want to change the color of your hyperlinks on mouse over or make it underlined or maybe change the font size.

This is our default CSS + hyperlinks CSS we added in the previous steps:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post a {
color:#FF0000;
text-decoration:underline;
text-transform:uppercase;
}

Add even more juice in it:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post a {
color:#FF0000;
text-decoration:underline;
text-transform:uppercase;
}
.post a:hover {
color:#0000FF;
text-decoration:none;
text-transform:lowercase;
}

Now, I'll explain some changes I've made.

Note: All the properties in .post a:hover {} will be visible only when you'll move mouse over the link.

1- The color will change to blue (#0000FF).

2- There will be no decoration of text. Previously, we applied text-decoration:underline; property to make our hyperlinks underlined but when mouse will come over, it will not be underlined.

3- On mouse over, our hyperlinks will become lowercase.

Tip: "On mouse over" is called "hover effect" in CSS references.

Before you leave!

I've tried my best to share my knowledge with you, if this article has really helped you then you can comment or tell other people about it through social networking. Any question, comment or suggestion will be greatly appreciated, thanks.

Creating a Picture Link in Blogger Posts

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.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8iaCYh3LjodZ2xTV1nmVXx_f1mvzm3oijWM6FudHrlpM0DD_m0qGVshdZwEsrK8Bb_QnR0lIWgImwrsQbcSBIIvkndRy7LLed4S0N3p__AV4lyn1_8CSkWZ7AtcRg_hyG69avzDmRYenk/s1600/1330057_flower.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="225" width="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8iaCYh3LjodZ2xTV1nmVXx_f1mvzm3oijWM6FudHrlpM0DD_m0qGVshdZwEsrK8Bb_QnR0lIWgImwrsQbcSBIIvkndRy7LLed4S0N3p__AV4lyn1_8CSkWZ7AtcRg_hyG69avzDmRYenk/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.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8iaCYh3LjodZ2xTV1nmVXx_f1mvzm3oijWM6FudHrlpM0DD_m0qGVshdZwEsrK8Bb_QnR0lIWgImwrsQbcSBIIvkndRy7LLed4S0N3p__AV4lyn1_8CSkWZ7AtcRg_hyG69avzDmRYenk/s1600/1330057_flower.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8iaCYh3LjodZ2xTV1nmVXx_f1mvzm3oijWM6FudHrlpM0DD_m0qGVshdZwEsrK8Bb_QnR0lIWgImwrsQbcSBIIvkndRy7LLed4S0N3p__AV4lyn1_8CSkWZ7AtcRg_hyG69avzDmRYenk/s400/1330057_flower.jpg

<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8iaCYh3LjodZ2xTV1nmVXx_f1mvzm3oijWM6FudHrlpM0DD_m0qGVshdZwEsrK8Bb_QnR0lIWgImwrsQbcSBIIvkndRy7LLed4S0N3p__AV4lyn1_8CSkWZ7AtcRg_hyG69avzDmRYenk/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

<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8iaCYh3LjodZ2xTV1nmVXx_f1mvzm3oijWM6FudHrlpM0DD_m0qGVshdZwEsrK8Bb_QnR0lIWgImwrsQbcSBIIvkndRy7LLed4S0N3p__AV4lyn1_8CSkWZ7AtcRg_hyG69avzDmRYenk/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 Change Jump Break (Read More) Font, Color & Background Color in Blogger 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 Change Post Title Color in Picture Window Blogspot Template

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-Blogspot 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 Enable Threaded Comments in Customized Blogger-Blogspot Templates

Blogger-Blogspot 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-Blogspot template. After doing some coding, I found it quite easy to integrate the threaded comments in the Simple Blogger-Blogspot 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-Blogspot

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'>

Once you've found the above line, you'll see this piece of code:

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

Now, we need to add some code just

BEFORE

the above code. The code to add is:

<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>

After adding the new code, overall code should look like this:

<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.

Blogger-Blogspot Save Template Close Buttons

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

Important things first!

Find & Change the Default Styling Code for "Older Posts" & "Newer Posts"

Make Navigation Links Customizable Through Fonts & Colors Tab

Links Text Color

Links Text Hover Color

Links Background Color

Links Background Hover Color

Links Font

Change the "Older Posts" & "Newer Posts" Text

Change "Older Posts"

Change "Newer Posts"

Final Words

What is Jump Break or Read More Link?

Steps

Creating an Image Link in New Post Editor

Make Image Link Open in a New Window or Tab

How to Create a Gadget with Blank Title Field!

Let's first check the default style definitions for these titles:

1- Change family i.e. Arial, Times New Roman etc.

2- Change size.

3- Change color i.e. red, green etc.

Can I Apply This Tutorial on Any Template?

Steps!

Change Widget Title Background Color in Blogger Template Designer

Steps!

How to Change the Background Color in Template Designer?

The default code of posts!

Understand the default code!

Make changes in the default code!

How to apply these properties on hyperlinks in the post body!

How to customize the hyperlinks for mouse over event (hover effect)!

Before you leave!

Creating an Image Link in New Post Editor

Make Image Link Open in a New Window or Tab

What is Jump Break or Read More Link?

Steps

Steps to Change Post Title Color in Picture Window Template

Steps to Enable Threaded Comments in Blogger-Blogspot

Welcome!

Take a Break

Visitors around the world

Blog Archive

My Blog Followers

Total Pageviews

Feedjit

Recent Posts

Recent Comments