Blogger Templates 2012: Posts Tutorials

Showing posts with label Posts Tutorials. Show all posts

Sunday, January 22, 2012

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.

Note: This tutorial doesn't work for most of the people, so please email me your template. I'll manually edit and return to you in a week. Here is my email:
levisinside0@gmail.com

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

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

Saturday, December 17, 2011

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

Open the Template section.

Click the Edit HTML button.

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

Find the following code:

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

Replace the above code with the following one:

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

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

Save your template and move on the next step.

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

For Simple Blogger-Blogspot template, find the following code:

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