Southern Listeners

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

Sunday, August 19, 2012

Adding Label Name next to Blogger Post Title

Before
After
Post titles are usually located on top of your posts, and you can choose to show your post's labels at the bottom of you posts. Typically, you use label to categorize a post. For example, you'd use the label 'Books' to tell your readers that that particular post is about books, and 'Cooking' to indicate that it is a post related to cooking. Wouldn't it be cool if you could have your label automatically appear next to your post title, to allow your readers to distinguish which category your posts belong to? This blog post is a respond to Blog Readers Jelena Dimić and Euronomist.

Note: This is not a Dynamic View tutorial, as such it won't work with Dynamic View templates.

Step 1:

Backup your template by going to Dashboard - Template - Backup/Restore - Download Full Template. Next, go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Templates - Find and delete the following lines:
<b:includable id='post' var='post'>
  <div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <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>
The code in place (Starting part)


The code in place (Ending part)


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' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <a expr:name='data:post.id'/>
        <b:if cond='data:post.labels'>
         <b:loop values='data:post.labels' var='label'>
          <script type='text/javascript'>
            var SS = &#39;<data:label.name/>&#39;;
            var PrintSS = SS + &quot; | &quot;;
          </script>
         </b:loop>
        <b:else/>
         <script type='text/javascript'>
         var PrintSS = &quot;&quot;;
         </script>        
        </b:if>
    <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'><span class='pre-postss'><script>document.write(PrintSS);</script></span><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'><span class='pre-postss'><script>document.write(PrintSS);</script></span><data:post.title/></a>
          <b:else/>
           <span class='pre-postss'><script>document.write(PrintSS);</script></span><data:post.title/>
          </b:if>
        <b:else/>
         <span class='pre-postss'><script>document.write(PrintSS);</script></span><data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>
The code in place (Starting part)


The code in place (Ending part)


That is it. If you assign a label to your post now, it will appear in front of your post title. You can customize the color and size of the label by referring to the 'Extra' section below.

It is important to note that if you add more than a label, the tweak will pick a label reverse-alphabetically. For example, if you add 'Transformers', 'Yoga' and 'Arts' as labels to your posts, the label 'Yoga' will be chosen.

Extra:

To change the color or size of the add-on label, go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line } --> Apply to Blog.
.pre-postss{
color: #5F0707 !important;
font-size: 27px;
}
The values in the attributes above are self-explanatory. You can generate hex code for a color of your choice by visiting the link below:

Hex Color Code Generator

65 comments:

  1. This is amazing! Thank you! It worked perfectly. ;)

    ReplyDelete
  2. Great Post Yoga! I think what I am about to ask is a bit tricky but I will ask it anyway: How can I make a page menu like the one you have on your website? For example I would like to have a menu just below the header (or in the header?) with About, Category 1, Category 2, etc in it. I am using the Awesome template, could I do it there or would I have to use Dynamic Views?

    Another question: I have a picture in my header. Can I make it link to my homepage?

    My blog is http://euronomist.blogspot.com/ if you want to have a look at it.

    Cheers!

    ReplyDelete
    Replies
    1. Hi Euronomist,

      It's simple, you can do it with both Dynamic View and non-Dynamic View templates.. Just get your label's URL (eg: http://euronomist.blogspot.com/search/label/collapse), and go to Dashboard - Page - New Page - Web Address - Add your URL there.. This link will then appear on your menu..

      I've also noticed that you haven't created a menu. And that's easy as well.. Under Dashboard - Pages - Show pages as, choose 'top tabs' - save arrangement. Next, go to Dashboard - Layout and see if a gadget titled 'Page' appear anywhere in your layout. If it doesnt, click 'Add a Gadget' and choose this gadget from your list. Next, click and drag this gadget so that it will sit below your header, because that's where menus are accustomed to be - you, of course, are not tied to this rule, so feel free to place it anywhere you like.

      As for making the header a link, I'm gonna have to suggest some lengthy HTML changes, which isn't appropriate in a comment-area. Tell you what.. Create a question thread in Blogger Help Forum, and get back to me with its link. I'll assist you there..

      Delete
    2. Dear Yoga,

      Thanks for the quick response and I do apologize for my late one.

      I have tried it and it worked (as always your solutions are excellent), yet I have another question:
      How can I edit the boxes to look better? The default blogger ones are awful. I would assume that some kind of CSS is involved but is there an easier way?

      For making the header a link the only easy way I have found out (and will use shortly) is to post a picture in it and then using the "instead of title and description" option. (Obviously you have to write the title and description on the photo directly)

      Thanks again!

      Delete
    3. Hi Euronomist,

      There isn't any other way to modify your menu apart from using manual CSS.. But I'll make it easy for you.. Describe how you'd like it to be, and if it is doable, I'd provide you with the code :)

      Cheers!

      Delete
    4. Hello Yoga and sorry for my late response.
      I have been thinking about moving my blog to its own domain name and I would like to ask how you did it. Did you buy a custom name from Blogger or did you host it on a URL of your own (for example Blogger states that GoDaddy is good)? I have been thinking about moving it for some time now and since I am really bad when HTML and CSS are concerned I thought staying with Blogger would be a good idea. People online are also suggesting WordPress but I have never used them. What do you think? (If you can't/don't want to answer this in public my email is: euronomistblog@gmail.com)

      Also, concerning the menu I asked about in my previous question I would prefer if it could look like yours (or something similar) if I am not asking for too much:)

      Thank you very much for all your help!

      Delete
    5. Wouldn't recommend Wordpress, as Blogger is much-more user-friendly.. Then again, my view could be biased, as I am associated to Google in a way :P

      As for your custom domain, you don't have to switch your platform.. You can still stay with Blogger, and do everything the usual way - nothing changes, except for the fact that your blog is now known with a cooler and more professional name.. No HTML or CSS is needed (literally none at all).. I went with GoDaddy as I got a cheaper deal back then.. It doesn't really matter who you buy your domain from, but I'd recommend GoDaddy..

      After you purchase a domain (I pay $10 a year), you have to configure some settings in your GoDaddy and Blogger account, and you'll be able to use your custom domain for your blog..

      As for the menu, go to Dashboard - Layout and place your Pages gadget below your header.. Once it is there, we can start customizing it :)

      Delete
    6. Cheers Yoga! Thanks for clarifying it for me! I will get back to you when I finish constructing the pages!

      Delete
    7. Well I have created the menu, however, I am not quite sure about how this works. Can i upload more than one post per new page? I would assume yes since you have done it but I do not know how to do it. How do I specify what goes where?
      I have also tried adding the label next to the blog post and it works perfectly. My question would be if it were possible to add a menu page instead of a label next to the the Blogger Post? I think this would categorize them much more easily for me.
      As far as the menu is concerned can the space between the header picture and the menu be eliminated? Also how can I change how the menu looks, basically make one large rectangle which would incorporate everything while removing the |borders in between them? (maybe the color as well!)
      Final question: Can I make the blog look more like a newspaper with the main pages containing boxes with e.g. a picture and part of the article text? An example of what I more or less think about would be the featured blogs part of the UK huffington post (http://www.huffingtonpost.co.uk/)Would this be extremely difficult?

      Thanks for the support and I apologize for writing an essay for an answer!

      Delete
    8. Yet another question: Can I add author name below the post title in non-Dynamic Views templates the same way or do I have to do something else?
      http://euronomist.blogspot.com/

      Thanks!

      Delete
    9. 1) You can't publish more than a single post in a page. 1 page = 1 dedicated post. It is meant for you to publish some 'sticky' posts, like 'About Me', or 'Contact Me' and such.. However, you could group a few posts together (by assigning them a common label), and add the link to your Pages menu. This would create the effect as if you have a static page with few posts in it, but in fact, it is not even a page to begin with. Here's a tutorial on it --> http://www.southernspeakers.net/2010/10/customised-menu-bar-with-link-list.html

      2) As the link to the label are controlled dynamically, there isn't a way to add links to any other stuffs. So nope, it isn't possible.

      3) Yeap. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      #PageList1{
      margin-top: 0px !important;
      }

      If you change your mind later and want to include some space below the header, adjust the value '0' accordingly..

      4) You're gonna need a custom CSS, and you have me for that :) Same step as above, add this code to the 'Add CSS' box:

      .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
      background: none !important;
      }
      .tabs-inner .widget li a{
      border-left: 0px !important;
      }
      .tabs-inner .widget li:first-child{
      border-left: 1px solid white !important;
      }

      5) It would be a mountainous task if you try to transform your current template to look more like huffinftonpost. However, an easier alternative would be to look for a third party template that closely resembles huffingtonpost.. Simply google for 'Blogger News Template' or something to that effect. Here's a guide on how you can install a third party template in your blog: http://www.southernspeakers.net/2011/01/adding-third-party-blogger-template.html

      6) There's an easier way. Go to Dashboard - Layout - Blog Post - Edit - Click and drag the box that says 'Posted by...' wherever you like :)

      Cheers!

      Delete
    10. As usual tip top response Yoga! Cheers! I will modify my texts then to fit the label categories. By the way, I cannot modify the labels of a single post right? I mean delete them and post some other labels.
      Final problem is that although I have dragged and dropped the "Posted by.." just below the title I am not able to see it. I was not been able to see it when it was placed under the post either. What did I do wrong?

      Delete
    11. 1) You can always modify the label that you've assigned to your posts.. Just edit the post, and add/remove its labels using the option on the right hand side..

      2) Sometimes, you need to 'refresh' the template for things to take effect.. But 'refreshing' the template might remove hard-coded HTML modifications.. The tutorial in this page is an example of a hard-coded HTML mod, as we made direct HTML changes to the template.. What you can do is, backup your template, then 'refresh' your template by going to Dashboard - Template - Edit HTML - Proceed - Revert Widget templates to default.. That might bring your 'Posted by...' back.. And then you're gonna have to re-add your hard-coded HTML mods (to the best of my knowledge you have done only one hard-coded HTML mod - the one in this page's tutorial)..

      All the best :)

      Delete
  3. Hellp Yoga I have another Problem Please Help me In this Blog
    www.chisapaninepal.blogspot.com In this blog not showing related but it was showing before and another problem is how to make wideget at the same place like popular post / Recent post / Tag post parallel please help me

    ReplyDelete
    Replies
    1. Hi Jiban,

      I can see your related posts. Here's a screenshot:
      http://i.imgur.com/haCp9.png

      As for adding gadgets in parallel, you're gonna have to edit your template and introduce sections in HTML tables. If you've not created a template before, this is gonna be a challenge for you. It isn't something easy, and it's time taking, and you could end up breaking up your template. I recommend getting a template that comes with parallel widget adding areas rather than creating one on your own..

      Delete
  4. is it not possible to do the same on dynamic views, or having the name of the author next to the title?

    ReplyDelete
    Replies
    1. Hi Berk Efe Altinal,

      Implementing HTML changes isn't possible in Dynamic View templates, so nope, we can't add labels next to post title. Adding author name is possible - granted that it be static (which means you it'll only work if you have a single author in your blog).. I haven't tested it though, but conceptually, it should be possible. What's the name of author that you'd like to have below your titles?

      Delete
  5. Hi Yoga,

    I have a question but not about this post. Do you know how to don't show Home Page in dynamic view Page bar?

    Kind regards,
    Tamara

    ReplyDelete
    Replies
    1. Hi Tamara,

      I do, actually :) Go to Dashboard - Layout - Pages - Edit - Uncheck the second box on the left (the one that says 'Home') - Save - Save arrangement.

      Let me know how it goes :)

      Delete
  6. Hi,

    I wonder, is it possibel to do this with the date as well?
    (date - post title)

    And do you know if it's possibel to show the date like this:
    6 Sept
    2012

    So 2012, is on a separate line?
    Thanks!
    Em

    ReplyDelete
    Replies
    1. Hi Em,

      Theoretically, it is possible to add date next to your post title, but it depends very much to the kind of template that you're using.. What's your blog's address?

      As for showing the year on a separate line, again, it is possible, but it'll involve lots of dissecting and coding.. There are plenty of tutorials around that show how you can make your date to show in a date-ribbon like format, which (co-incidentally) has the year showing on a separate line. If you can get one of those tutorials installed in your template, then you can easily remove the background of the ribbon to make it appear in plain text.

      Cheers :)

      Delete
    2. Hi Yoga,
      Thanks 4 yr answer! :D

      My blog address is http://nerineandsweetpeas.blogspot.se/
      The templet is "Simple".
      so far it's just a test blog where I work with the design.

      Date-ribbon! I never thought about it! I though it was just dynamic view, but may be I can try o play with that ;)

      Thanks!

      Delete
    3. Hi Anon,

      Your blog appears to be set to private.. In any case, if you're using a Simple template, I think it can be done. But as you might have guessed, I won't be able to show the steps here in the comment area.. You can either bring this discussion to the forum or maybe you can wait till I publish a tutorial on it, sometime next week..

      If you wanna bring it to the forum, create a question thread here and get back to me with its link, and I'll attend to you in the forum.. Cheers :)

      Delete
  7. Hi Yoga,

    Sorry about the private thing. I just realized that. Ok, see u in the forum ;)

    Thanks
    Em

    ReplyDelete
    Replies
    1. Hi Em,

      Don't forget to gimme the link to your discussion. Otherwise, I'd never find it, since it's a public forum with hundreds of questions every hour.. :)

      Cheers!

      Delete
  8. this is the best website in my life
    really thanks
    http://www.flipdl.com/

    ReplyDelete
  9. My Blog: jordanroytech.blogspot.com

    ReplyDelete
    Replies
    1. I've missed your question. What was it again?

      Delete
  10. I've done all of the above steps and it worked so well! Thank you.

    I was wondering if it might be possible to remove the bar beside the label and instead have 2 colons like this (::). I am trying to make my post header look like below...

    label (times new roman, 20px) :: Post Title (font and size chosen with template editor)

    I hope this makes sense. Thanks in advance for any help!

    ReplyDelete
    Replies
    1. Hi Anon,

      Technically, this should do. In Step 2, Line 8, change this:

      var PrintSS = SS + " | ";

      to this:

      var PrintSS = SS + " :: ";

      Delete
  11. Hi Yoga

    This is fantastic as usual! Do you know how I can get this to be at the end of my post title instead of before?

    Thanks

    ReplyDelete
    Replies
    1. I haven't tested this, but do give it a try and let me know how it goes :)

      <b:includable id='post' var='post'>
      <div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
      <a expr:name='data:post.id'/>
      <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
      <script type='text/javascript'>
      var SS = &#39;<data:label.name/>&#39;;
      var PrintSS = &quot; | &quot; + SS;
      </script>
      </b:loop>
      <b:else/>
      <script type='text/javascript'>
      var PrintSS = &quot;&quot;;
      </script>
      </b:if>
      <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/><span class='pre-postss'><script>document.write(PrintSS);</script></span></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/><span class='pre-postss'><script>document.write(PrintSS);</script></span></a>
      <b:else/>
      <span class='pre-postss'><script>document.write(PrintSS);</script></span><data:post.title/>
      </b:if>
      <b:else/>
      <span class='pre-postss'><script>document.write(PrintSS);</script></span><data:post.title/>
      </b:if>
      </b:if>
      </h3>
      </b:if>

      Cheers!

      Delete
    2. Works absolutely perfectly! Thanks! This also fixed the problem I had where my twitter button put (PrintSS) at the beginning of the tweet! Bonus! :)

      Delete
    3. Actually it adds 'document.write(PrintSS)' in the middle of the tweet!

      Delete
    4. Last thing, when you go into the post, the title goes at the beginning of the title again. Can you offer any help for this?

      Thanks!

      Delete
    5. Hi

      Ignore previous messages! The only problem I have now is that when I go into the post the label goes back to the beginning. Other that that I'm good and the above works! thanks for your help.

      Delete
    6. Hi Man Dem,

      Sorry for the late reply. Try this instead:

      <b:includable id='post' var='post'>
      <div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
      <a expr:name='data:post.id'/>
      <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
      <script type='text/javascript'>
      var SS = &#39;<data:label.name/>&#39;;
      var PrintSS = &quot; | &quot; + SS;
      </script>
      </b:loop>
      <b:else/>
      <script type='text/javascript'>
      var PrintSS = &quot;&quot;;
      </script>
      </b:if>
      <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/><span class='pre-postss'><script>document.write(PrintSS);</script></span></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/><span class='pre-postss'><script>document.write(PrintSS);</script></span></a>
      <b:else/>
      <data:post.title/><span class='pre-postss'><script>document.write(PrintSS);</script></span>
      </b:if>
      <b:else/>
      <data:post.title/><span class='pre-postss'><script>document.write(PrintSS);</script></span>
      </b:if>
      </b:if>
      </h3>
      </b:if>

      Cheers :)

      Delete
  12. Fantastic - works like a dream. thank you so much!

    ReplyDelete
  13. Hi Yoga,

    Would it be possible to have your comments link next to your heading, in other words something like this:

    HEADING | 0 COMMENTS

    Thanks so much!
    Amy

    ReplyDelete
    Replies
    1. I haven't checked the technical structure, but it sounds possible, although it'll depend very much on the template that you're using. Are you trying this on a particular template? I'll give it a go when I have some free time *bookmarking your question*

      Delete
    2. Hi Amy,

      Here's what you're looking for:

      http://www.southernspeakers.net/2013/11/comment-link-next-to-blogger-post-title.html

      Delete
  14. Thanks a lot for your post and the tips on your blog, they are very helpful. Do you know if there is a way to select a specific tag for this feature? My blog has more than one tag and not always it selects the right one. Thanks!

    ReplyDelete
    Replies
    1. Well, we don't have full control, but we can manipulate it somehow by cleverly naming the label.

      If you add more than one label, the tweak will pick a label reverse-alphabetically. For example, if you add 'Transformers', 'Yoga' and 'Arts' as labels to your posts, the label 'Yoga' will be chosen. Knowing this, if you're adding more than one label to your post, try to name the label in such a way that the label that you want to be picked appears alphabetically after the label that you don't want to appear next to your title.

      Hope this makes sense. Cheers :)

      Delete
  15. Hello Yoga!
    Im loving your tutorials...This helped so much.
    Just wondering if i can assign a different color and unicode to each different tag or label. This would visually help so much my blog!!! Thanks so much.

    www.specadoc.com

    ReplyDelete
    Replies
    1. Hi Agus,

      I'm afraid that will be too tricky to be done :(

      Delete
  16. I'm trying to find a way to replace the date header with the label name, but haven't had any luck. Hoping you could help me out with that. Thanks!

    ReplyDelete
    Replies
    1. Hello there,

      Dealing with the date header has always been tricky, mainly because there is a bug in the default template that groups all the posts published on the same day together. Even with this fixed, it takes some doing to replace the date-header with actual label. I've added this into things to look into. I'll give it a whirl when I get the time :)

      Delete
  17. Label is the unique option to put keyword, by which post can be optimize.
    Although, I am not in favor to add heavy codes inside the template when it is possible without it. But, you have displayed an another way to fix it which is appreciable. I will share my opinion after experiencing it. Thanks for posting.

    Regards,
    Divya @smtutorial

    ReplyDelete
  18. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. When two or more labels are involved, the last label that appears in alphabetical order will be chosen. From the post above:

      "It is important to note that if you add more than a label, the tweak will pick a label reverse-alphabetically. For example, if you add 'Transformers', 'Yoga' and 'Arts' as labels to your posts, the label 'Yoga' will be chosen."

      Delete
  19. hi I have my date below my header and then the date below that- I'd love to have the labels and date on one line below the header- is it possible? thanks in advance! x

    ReplyDelete
    Replies
    1. Hi Charlotte,

      Sorry for the late reply. Let's have a look at your blog. What's your blog's address?

      Delete
  20. Thank you! This was amazingly helpful.

    ReplyDelete
  21. Hi could you do the same for label next to date?
    Here my blog leatherandskirt.blogspot.com

    ReplyDelete
    Replies
    1. This could take some doing. Let's bring it to the forum.

      Delete
  22. Hi Yoga!

    I've just come across this post, in my search for some layout-answers xP

    I want to know, if it is possible to add the author name to the date line (like on this blog: www.mariejedig.com ) I know this blog is not a blogspot-blog, but I hope it is doable in blogger anyway :) (my own blog: www.louisestenberg.com )

    Hope you can help. Thank you!

    ReplyDelete
    Replies
    1. I'd be lying if I say it is not do-able. Anyways, go backup your template, then find for the following line.

      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>

      You might find two to four instances of the same line, just change all of them to the following:

      <h2 class='date-header'><span><data:post.dateHeader/> <data:post.author/></span></h2>

      Delete
    2. Thank you so much! Now it looks just like I want it!

      Delete
  23. thanks, worked well, it looks very nice!

    ReplyDelete

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