bloogger ~ Description Your Blog

How to Optimize Blogger Images for Better Search Engine Rankings

Whenever a user searches for a topic related to your blog, you'd want Google to show pages from your blog on top of the search results. To do this, we need to help search engines by optimizing blog content in the right way. Simple, right? I've already given some simple tips to optimize Blogger blogs for search engines but this post is exclusively about images. A lot of bloggers post several images in a single post and these images can bring tons of traffic from search engines like images section of Google. This is really easy once you know what to do. Here are some tips to optimize your blog images for good rankings in search engine results.

Blogger Images Optimization Tip #1: Reduce Image Size to Make Page Load Faster

Our first step is to keep image size as small as possible. No one appreciates a slow loading website. Even Google takes the page loading speed in account while ranking a webpage. Luckily, free online tools are available to do all the heavy lifting. Here are my favorite ones.

1- Yahoo! Smush.it [Open in a New Window]

This is an awesome little tool to dramatically reduces image size. Just upload your image from your computer or paste the URL if image is already online and click the Smush button. It will return optimized version of your image in a couple of seconds. Here is the result of a sample image:

Also note that the original size of this screen shot was 48 KB and I've uploaded the optimized version of 30 KB.

2- Kraken.io [Open in a New Window]

Kraken.io offers a desktop software but they also offer an online service for free and their result is quite impressive. Just open their Web Interface and upload your image from computer or paste a URL. One extra option is to chose between LOSSLESS and LOSSY optimization techniques. LOSSLESS will only reduce size and doesn't affect quality while LOSSY will remarkably reduce image size and have minimal impact on the image quality. If your site is not based on crystal clear images then chose LOSSY here. Anyway, I've uploaded the above screen shot [size: 48 KB] in Kraken and optimized with LOSSLESS and LOSSY. Check the size reduction.

Blogger Images Optimization Tip #3: Use Descriptive Names for Images in Plain English

Always name your images in a descriptive manner. This will help search engines to identify what they are about. For example, I've just downloaded this image from a site and its name was file7561245026222.jpg.

Now think about this. Can make any sense out of image's original name file7561245026222? I've renamed this image to African Giraffe in Jungle before uploading. This is common sense and tells search engines about image content.

Blogger Images Optimization Tip #4: Use Alt Tags

Alt tags are simply alternative text. When a browser can not open an image, it displays the text inside alt tag. By default, Blogger does not add any alt tag when an image is uploaded. You need to do it yourself. To do this, open the HTML tab of post editor and upload an image. You'll see only code and no image. For example, this is the code of above giraffe image:

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Mp-nGUHhBg4TDphV_yWs2PfveMO4OUCE11tArcm-q4fpr0IZX8cAqaRz82eW7_rFCpvwYyAdCdkdm4zsL-RKeD-tccbERRxv3kqqlbP2R0KCaJSppBMME63XYZzQ5M67y_rxfIo6Z7Y/s1600/African-Giraffe-in-Jungle.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Mp-nGUHhBg4TDphV_yWs2PfveMO4OUCE11tArcm-q4fpr0IZX8cAqaRz82eW7_rFCpvwYyAdCdkdm4zsL-RKeD-tccbERRxv3kqqlbP2R0KCaJSppBMME63XYZzQ5M67y_rxfIo6Z7Y/s400/African-Giraffe-in-Jungle.jpg" /></a></div>

You can see there is no alt tag present. Now, I'll add alt tag in the highlighted part of above code and here is my code with alt tag:

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Mp-nGUHhBg4TDphV_yWs2PfveMO4OUCE11tArcm-q4fpr0IZX8cAqaRz82eW7_rFCpvwYyAdCdkdm4zsL-RKeD-tccbERRxv3kqqlbP2R0KCaJSppBMME63XYZzQ5M67y_rxfIo6Z7Y/s1600/African-Giraffe-in-Jungle.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" alt="Picture of An African Giraffe in Jungle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Mp-nGUHhBg4TDphV_yWs2PfveMO4OUCE11tArcm-q4fpr0IZX8cAqaRz82eW7_rFCpvwYyAdCdkdm4zsL-RKeD-tccbERRxv3kqqlbP2R0KCaJSppBMME63XYZzQ5M67y_rxfIo6Z7Y/s400/African-Giraffe-in-Jungle.jpg" /></a></div>

Blogger Images Optimization Tip #5: Chose Blogger Image Upload Options Sensibly

When you finish uploading an image in a Blogger post, the editor prompts you for the size and position of image before placing it in the post. These are critical options and should be chosen wisely. If you are uploading a high resolution digital image then DO NOT select Original size as option because Blogger will actually load full image every time the post loads. HDR images have significant size and your page can take too much time to load.

I use the Large option to specify image size. However, the size option does not mean that your image's actual dimensions or quality is compromised. Let us look at the above giraffe image code again to see what happens to the original image.

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Mp-nGUHhBg4TDphV_yWs2PfveMO4OUCE11tArcm-q4fpr0IZX8cAqaRz82eW7_rFCpvwYyAdCdkdm4zsL-RKeD-tccbERRxv3kqqlbP2R0KCaJSppBMME63XYZzQ5M67y_rxfIo6Z7Y/s1600/African-Giraffe-in-Jungle.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Mp-nGUHhBg4TDphV_yWs2PfveMO4OUCE11tArcm-q4fpr0IZX8cAqaRz82eW7_rFCpvwYyAdCdkdm4zsL-RKeD-tccbERRxv3kqqlbP2R0KCaJSppBMME63XYZzQ5M67y_rxfIo6Z7Y/s400/African-Giraffe-in-Jungle.jpg" /></a></div>

In the above code, there are actually 2 images. One image is source which is actually displayed when post loads and the URL of source image is:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Mp-nGUHhBg4TDphV_yWs2PfveMO4OUCE11tArcm-q4fpr0IZX8cAqaRz82eW7_rFCpvwYyAdCdkdm4zsL-RKeD-tccbERRxv3kqqlbP2R0KCaJSppBMME63XYZzQ5M67y_rxfIo6Z7Y/s400/African-Giraffe-in-Jungle.jpg

The other image is destination or linked image. This is the original uploaded image and can opened by clicking on the source image. This is the URL of original image.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Mp-nGUHhBg4TDphV_yWs2PfveMO4OUCE11tArcm-q4fpr0IZX8cAqaRz82eW7_rFCpvwYyAdCdkdm4zsL-RKeD-tccbERRxv3kqqlbP2R0KCaJSppBMME63XYZzQ5M67y_rxfIo6Z7Y/s1600/African-Giraffe-in-Jungle.jpg

You might wonder that the code of both images look same but this is not the case. Source image has s400 [size: 56 KB] and original image contains s1600 [size: 108 KB]. These 2 differentiate the size.

Blog visitors can always click the the smaller source image to see the full high resolution image.

Blogger Images Optimization Tip #6: Create Images in Compressed Formats

If you create images yourself then make sure to save them in a good compressed format before uploading. For large high resolution photos, I usually prefer JPEG [.jpg] format. However, PNG [.png] is also a good format for small images like icons. Most softwares like Adobe Photoshop provide option to directly export/save an image in these formats. Remember to avoid GIF [.gif] images as they have large size and does not provide great quality.

Blogger Images Optimization Tip #7: Do Not SPAM & Avoid Getting Banned/Demoted from Google

Google has some very powerful and intelligent algorithms to detect spamming and unnatural stuff on a webpage. For example, if you are posting a celebrity pic on a blog which has nothing to do with celebrities or fashion, search engines would understand that. Similarly, do not over-stuff alt tags text like for above giraffe image:

alt="giraffe in Africa, Giraffe Eating Grass, Male Giraffe, Female Giraffe, Africa, Jungle, Safari"

DO NOT do this. These actions can get you banned from Google results for an indefinite amount of time. Try to be as natural as possible. Always write quality original articles and post high quality images.

I hope these tips would be helpful to you. If you have any questions, let me know. Oh here is a fun fact: I've saved 453 KB in this post by compressing my images. In other words, a user with 1 Mbps DSL connection can see my post 5 seconds faster.

No Comment

How to Check Your Blogger Template Name

Ever wondered which template you are using? Well, it is pretty simple to know. In this tutorial, I'll tell you how to check the Blogger template of your blog. By default, Blogger offers 6 awesome templates including Simple, Awesome Inc., Picture Window, Ethereal, Watermark & Travel. Follow the steps to check your template.

Open the Template section.

Click the Edit HTML button.

A new window will open. Click the Proceed button.
Now, you'll see a lot of code. Just scroll down a bit and you'll see some code like this:

-----------------------------------------------
Blogger Template Style
Name:     Simple
Designer: Josh Peterson
URL:      www.noaesthetic.com
-----------------------------------------------

From this code, you can easily see the name of the template. In the example, the template is "Simple". After that you can easily do editing or follow some tutorial. Click the following image for details:

No Comment

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

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.

Caution:

Backup your current template

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.

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.

No Comment

How to Change Post Title Background Color in Blogger-Blogspot Templates

In this tutorial I'll tell you how to change the post title background color in Blogspot blogs. This option is not present by default in Blogger Template Designer. We can add background color to the post title and also change the color of title itself. As usual, we'll do some editing in the template 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: This tutorial has been updated on 06/18/2016.

Steps to Change Post Title Background Color

Open the Template section.

Click the Edit HTML button.

You'll see a lot of code on next page. Don't worry. Just expand the <b:skin>...</b:skin> tag by clicking on the arrow on left side.

Now find the following code:

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

/* 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"/>
   </Group>

Now find following line of code:

]]></b:skin>

h3.post-title { background:$(post.title.bg.color); padding:10px;}
]]></b:skin>

That's it. Coding is finished. Save your template. Now, changing the background color is super easy. See below.

How to Customize the Post Title Background Color from Blogger Template Designer?

Open the Template Designer by clicking on Customize button.

Chose Advanced from left side and then click the first option Post Title Background Color.

Now, simply make changes and make sure to click the Apply to Blog on top right to save your changes. You can also preview the changes live.

I hope this tutorial was helpful to you. There is another tutorial to center the post title. Do check that out as well. Kindly add a link back to this blog. Link code is available at the bottom of this page. Add it anywhere in your blog. For further customization, contact me and get your work done for as low as $11.

No Comment

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.

Note: Tutorial has been updated on 06/18/2016.

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.background.color" description="Background Color" type="color" default="transparent" value="transparent"/>
     <Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#999999" value="#999999"/>
   </Group>

After that, find the following code:

div.widget h2.title {
  margin: 0 0 1em 0;

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

REPLACE the above code with the following code:

div.widget h2.title {
  margin: 0 0 1em 0;
  font: $(widget.title.font);
  color: $(widget.title.text.color);
  background-color: $(widget.title.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.

No Comment

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.

Expand the b:skin tag by clicking the arrow on left side. This will open styling code of your template.

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: Click anywhere in the coding box and press 'Ctrl + f' keys find this 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);
}

Now save your template.

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. Please note that hover color will appear when cursor is brought upon the post title.
If this post was helpful, kindly link back to this blog and express your love in comments!

No Comment

How to Change Sidebar Background Color in Blogger Templates

By default, Blogger does not offer an option to add background color in sidebar [or multiple sidebars]. So, 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 all default Blogger templates. Templates with multiple sidebars can also have different colors for each sidebar.

Lets Do Some Coding First!

Open the Template section.

Click the Edit HTML button.

On next page, you'll see a lot of code. Just expand <b:skin>...</b:skin> tag by clicking on the arrow on left side. See following image for help.

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

Coding Done! Time to Add Some Colors in Sidebar :)

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.

I hope this tutorial would be helpful for you. Kindly link back to this blog. You can use the link code available at the bottom of this page. This code can be used in sidebar or footer.

What to Do if Tutorial Does Not Work for Your Blog?

I write tutorials by testing on all Blogger default templates like Simple, Ethereal & Watermark. Such tutorials might not work on custom or highly customized templates because of incompatible codes. In such case, you can hire me. I'll charge $16 for this tutorial. You'd be able to customize the color by simply going to Blogger Template Designer. You can contact me via email [levisinside0@gmail.com].