Southern Listeners

Sunday, August 19, 2012

Adding Label Name next to Blogger Post Title

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.

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:

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.

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

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)

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:)

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 :)

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!

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:

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

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?

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

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

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

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?

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.

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 :)

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*

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!

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.

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.

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 :)

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.

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

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 )