Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Tuesday, November 5, 2013

Comment Link Next to Blogger Post Title

Before
After
Finally, a non-dynamic post after a long time (or I should say, a *post* after a long time).. Knowing there's a way to add labels next to post titles, blog reader Amy was curious to know if there's a way to do the same with Comment links - adding the link next to the title, including the comment counter.. Since this doesn't involve a Dynamic template, you have all the reason in the world to believe there must be a way. Personally, I think this tweak could be especially handy, now that the comment link in post footer is more of a hit-and-miss thing. Without further ado, here's how..

Step 1:

Backup your template by going to Dashboard - Template - Backup/Restore - Download Full Template. Next, go to Dashboard - Template - Edit HTML - Find and delete the following lines:

<b:includable id='post' var='post'>
  <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <b:if cond='data:post.firstImageUrl'>
      <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
    </b:if>
    <meta expr:content='data:blog.blogId' itemprop='blogId'/>
    <meta expr:content='data:post.id' itemprop='postId'/>

    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

Screenshot of the lines to be deleted:



Step 2:

Copy and paste the following lines in place of the deleted lines in Step 1, then click on 'Save Template'.
<b:includable id='post' var='post'>
  <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <b:if cond='data:post.firstImageUrl'>
      <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
    </b:if>
    <meta expr:content='data:blog.blogId' itemprop='blogId'/>
    <meta expr:content='data:post.id' itemprop='postId'/>

    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a><span> | </span>
              <span class='post-comment-link spk-title-comment'>
                 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                      <b:include data='post' name='comment_count_picker'/>
                  </b:if>
              </span>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a><span> | </span>
              <span class='post-comment-link spk-title-comment'>
                  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                      <b:include data='post' name='comment_count_picker'/>
                  </b:if>
              </span>
          <b:else/>
            <data:post.title/><span> | </span>
              <span class='post-comment-link spk-title-comment'>
                  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                      <b:include data='post' name='comment_count_picker'/>
                  </b:if>
              </span>
          </b:if>
        <b:else/>
          <data:post.title/><span> | </span>
              <span class='post-comment-link spk-title-comment'>
                  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                      <b:include data='post' name='comment_count_picker'/>
                  </b:if>
              </span>
        </b:if>
      </b:if>
      </h3>
    </b:if>

That will be all. Happy trying :)

33 comments:

  1. Yea! A tip for a non dynamic post! I have been waiting forever for one!

    ReplyDelete
  2. Yoga can you please help me,
    I have a blog with the URL http://technotrickology.blogspot.in/
    recently I have replaced my blog template with a new one and problem arises. My post comment has not been showing, it appears for some URL of my post but not for all ////////you can check
    1) It appears for http://technotrickology.blogspot.in/2013/06/change-color-of-hyperlinks.html#more
    2) It does not appear for http://technotrickology.blogspot.in/2013/10/embed-Google-map-website.html#.UnskidIwdAE
    PLEASE HELP ME

    ReplyDelete
    Replies
    1. Jayanta, have you checked if comment has been set to allow for that particular post? Edit that post - on your right, click on Post Settings - Options - Reader Comments - Allow.

      Delete
    2. Thanks a lot.It works
      But how to make it a default choice for all the posts

      Delete
    3. When you go to Dashboard - Post and Comments - Comment Location - what is the currently selected option there?

      Delete
    4. My Blog post links are appearing like this
      http://technotrickology.blogspot.in/2013/11/highlight-codes-blogger.html#.Uot0h9KVNAE

      can't understand the portion after .html, can you help me? Plz

      Delete
    5. I'm not following. What seems to be the problem?

      Delete
  3. Hey Yoga,

    I had a question (sorry that it's irrelevant to this post).. I don't know how to explain it really, but on my blog words are splitting apart... By this I mean that the last word in the line gets split into a different line.. I've never had this problem earlier..so I'm guessing it's some new glitch or change to the DV views..

    Any idea on how to fix it?

    http://a-shared-thought.blogspot.ca/

    ReplyDelete
    Replies
    1. Hi there Wanderer,

      This issue should now be resolved. If you're still seeing it, the following walkaround might help. Add it to your CSS:

      .article .article-content {
      word-break: normal !important;
      }

      Delete
  4. Now that dynamic blogs work well, there is another problem: the parameter /view no longer works on non-dynamic blogs ...

    ReplyDelete
    Replies
    1. Looks like it. I've escalated this to Blogger.

      Delete
  5. Hi :) can you please make a tutorial on how to bring down the date part? Like below the blog post title :) haha something like this:

    Blog post title
    Date | Comments

    please? Thank you!!

    ReplyDelete
    Replies
    1. Hi Thrish,

      Are you not able to do so by going to Dashbaord - Layout - Blog Post - edit?

      Delete
  6. Help how can i get the comments title smaller. Or under te post title?

    ReplyDelete
    Replies
    1. It depends to the kind of template you're using. What's your blog's address?

      Delete
  7. I have been on your page for the longest. Using all these codes. This website has been awesome thanks!

    Oronovelo - DIY, Home Decor & Lifestyle

    ReplyDelete
  8. great post, thanks for tutorial admin :)

    ReplyDelete
  9. To make a page dynamic you must make a post associate it to a new LABEL, go to the blog look for the post click on the link of the label, COPY the URL, then go to Layout Page edit, add link page, paste that URL you copied earlier to the http:// and give it name, which creates a button on your navigation to where all posts connected to that label will be seen on its own page and there it is now everytime you make a post you associate it to that certain label which is connected to that page from the label....

    ReplyDelete
  10. What about placing the post date BESIDE the post title? There are plenty of tutorials about placing the post date under the post title, but none (that I can find) about putting them side by side.

    ReplyDelete
    Replies
    1. This could take some doing. I'll look into it when I get the time.

      Delete
  11. would be possible to move the comments under the title and not next to it?

    ReplyDelete
    Replies
    1. Hello Maki-san,

      It used to be as simple as placing the comment box under Post title's GUI in Layout mode. But that is no longer the case. I'll have to look at your current template code if I were to suggest a mod. Can we bring this discussion to the forum?

      Delete
  12. Hi. Nice tweak but there are a couple of problems. The font size for the comment link needs to be a lot smaller than the post title font-size. Second, there is a colon (:) appearing at the end of the comment link which can be avoided. I really want to use this tweak and will be grateful if you can address these.

    ReplyDelete
    Replies
    1. Hi there,

      The colon wasn't introduced from the tweak above. The code is just repositioning the comment link that you have on your post footer. If you already have a colon there, it gets carried upward.

      As for the font-size, I believe this should make it smaller:

      .spk-title-comment{
      font-size: 10px !important;
      }

      Delete
  13. Hi I have a problem. It gave me the comments up but stayed well below me how can I delete the ones below?

    ReplyDelete
    Replies
    1. Hello Andrea,

      Add this to your CSS:

      .post-footer-line .post-comment-link{
      display: none !important;
      }

      Cheers.

      Delete
  14. Could you please tell me how I can do the same with the date, rather than comments?

    ReplyDelete
    Replies
    1. Hello Laura,

      Moving the date is slightly more complicated. I'll come up with a tutorial when I get the time.

      Delete
  15. There are different roamers about that its one organization that controls the player yea that is the manner by which you need it to be in that way you know it will fill in as near the same correct way(because its a similar organization same designers same pioneers) in all gadgets.
    java

    ReplyDelete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.