latest articles

Tuesday, 7 August 2012

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.

  1. Open the Template section.
  2. Blogger Updated Dashboard
  3. Click the Edit HTML button.
  4. Blogger Edit HTML Button
  5. A new window will open. Click the Proceed button.
  6. Now, you'll see a lot of code. Just scroll down a bit and you'll see some code like this:
  7. -----------------------------------------------
    Blogger Template Style
    Name:     Simple
    Designer: Josh Peterson
    URL:      www.noaesthetic.com
    -----------------------------------------------
  8. 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:
Read more

Awesome Blogger Features Coming in 2011

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

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!


  1. Open the Template section.
  2. Blogger Updated Dashboard
  3. Click the Edit HTML button.
  4. Blogger Edit HTML Button
  5. A new window will open. You'd have to click the Proceed button to start editing.
  6. Blogger Proceed Button
  7. Find the following code:
    /* Variable definitions
    ====================
  8. 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>
  9. 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>
  10. Click Save template and then Close button.
  11. Blogger Save Template Close Buttons

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.
Blogger Customize Button
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.
Read more

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.



Steps to Change Post Title Color in Picture Window Template


  1. Open the Template section.
  2. Blogger Updated Dashboard
  3. Click the Edit HTML button.
  4. Blogger Edit HTML Button
  5. A new window will open. You'd have to click the Proceed button to start editing.
  6. Blogger Proceed Button
  7. 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.

  8. 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>
  9. Now find this code:
    h3.post-title {
      margin: 0;
      font: $(post.title.font);
    }
  10. 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);
    }
  11. Click Save template and then Close button.
  12. Blogger Save Template Close Buttons
  13. Now go to Template Designer then Advanced and edit the Post Title option.


  14. You can simply edit the post color and post hover color from here.
  15. Enjoy!
Read more

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!


  1. Open the Template section.
  2. Blogger Updated Dashboard
  3. Click the Edit HTML button.
  4. Blogger Edit HTML Button
  5. A new window will open. You'd have to click the Proceed button to start editing.
  6. Blogger Proceed Button
  7. 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>
  8. 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;
    }

  9. 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);
    }
  10. 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);}
  11. 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.
Read more

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


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

Steps to Change Post Title Background Color

  1. Open the Template section.
  2. Blogger Updated Dashboard
  3. Click the Edit HTML button.
  4. Blogger Edit HTML Button
  5. A new window will open. You'd have to click the Proceed button to start editing.
  6. Blogger Proceed Button
  7. 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>
    
  8. Save your template and move on the next step.
  9. Now this step is a little different for each Blogger-Blogspot template. So, please follow the instruction according to the template you're using.

    1. For Simple Blogger-Blogspot 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); }
    2. For Picture Window Blogger-Blogspot 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); }
    3. For Awesome Inc & Ethereal Blogger-Blogspot 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); }
    4. For Watermark Blogger-Blogspot 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); }
    5. For Travel Blogger-Blogspot 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); }
  10. 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-Blogspot 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 :)
Read more

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


  1. 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.
  2. You must also have embedded comment form enabled. Check that by going to Settings > Posts and Comments and check the Comment Location dropdown.
  3. After that, open the Template section.
  4. Blogger Updated Dashboard
  5. Warning: Backup your current template before moving on.
  6. Click the Edit HTML button.
  7. A new window will open. You'd have to click the Proceed button to start editing.
  8. Check Expand Widget Templates option.
  9. Find the following line of code:
    <b:includable id='postQuickEdit' var='post'>
  10. 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'>
  11. 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>

  12. Click Save template and then Close button.
  13. Check your blog. If you can see the option of Reply under each comment then threaded commenting is enabled. Otherwise, upload your backup template.
Read more