April 8, 2012

Labels on Your Food Blog~ Food Blog Tech Essentials #3


I am back. All springy and as jumpy as a bunny. To talk to you all about labels. While i m thinking about to how to begin this post, Mr. P here is sitting next to me and reading aloud what i m typing in ridiculous modulations. He sounds very much like a much disliked news reporter on a not very happening channel. Ok so now, that he has read the whole thing, he s gone all quiet as a mouse. Pretending to absorbed in the T.V. Bah!! men.. Like i would buy that. Ha.. now s he s making me faces and that only adds to my inability to begin this post like how i was supposed to have begun it. I think by now, you all would have figured out that blogging with your husband beside you is not a swell idea. That s one tip for you all. Anyway, now for some sensible talking.. Food Blog Tech Essentials shall be written as FBTE from now. Why?? Of course, convenience sake. I feel so pained to type out the whole 4 words all with the spelling right. Phew!!



       Now, i know i m digressing. But then, like i read somewhere, life is a combination of digressions.So, i guess it s ok to digress now and then and take a break from the daily drudgery. Back to labels.
       So what are labels? Why labels? Basically, labels are very useful to categorise your posts beautifully without having to create new pages and add link lists of specific category of posts. There s no upper limit on adding labels on blogger. One more advantage as against stand alone pages which are 10 in blogspot blogs and 20 in custom domains.Why labels for food blogs in particular?? Food blogs have too many categories. Like vegan, vegetarian, eggs, dairy free, whole grains... i can go on.. its difficult to create link lists of posts and compile them into stand along pages for all categories. So, a label gadget with a drop down list box is a very smart idea.
How To Add Labels To Your Post?
Blogger interface has been modified and many of us are now using the new interface now. But there are folks out there using old one too. So i ll tell you both the ways.

Old Interface: 

Sign in to blogger- go to dashboard- click on edit posts-You will have a drop down box above your posts- choose the posts to which you want to apply the labels to and then choose new label option from the drop down box- type in the name of the label and choose apply. 
That s it we are done. You can follow the same options to remove a label option too. 

New Interface: 

You will have an overview page once you log into blogger. 
You will have options New Blog, Your name of the blog, create new post button and next to that a small drop down icon with the option go to post list.
Click on that.
Now the process changes.
Click on the edit option below every individual post on the list.
To the right hand corner, you ll have an option called labels.
Click on it. Now, you have the list of labels that you would have added in the old interface and a blank space in which you can type the new labels. Do any of the above and then click done.
That s it now, we ve learnt how to add posts.

Now the next step s to display these labels on the blog.

Old Interface:


Dashboard- design- add a gadget- choose labels- choose labels that you want to display- give a suitable name to the gadget and click save.

New Interface:


Overview- Beside your blog name, you will have options of new post and a drop down box with the go to post options. Click the downward arrow on the drop down box and choose layout.
Once you reach layout, click add gadget in the page elements page and choose labels. Pick labels that you want to display, name the gadget and click save.
Finally position your labels gadget in such a place where your readers can easily look up the blog with the help of the gadget.
I would suggest the top corners of your blog should be ideal for this.

But there s a hitch. What if you have say around 30 labels. I have some 70 labels and the normal list box really left me short of space on my blog. It occupied vital space on my blog.
So, i just shifted to a drop down list box for labels.
This involves some tweaking in your basic HTML code of your blog.
Lets do this both the ways~ Old and new interface:

Old interface:


Step1:
You need to get your widget id before we begin. Go to the page elements page. Click on your labels gadget. At the top of your label gadget page, you will have an address bar sort of a box. 
Step2:
Go to the far end of the bar. You will have something like Widget Id= Label1 . Copy the name of the widget. In this case, Label1. Paste on a word pad doc.Now, the action.
Step3:
Go to dashboard- design- page elements page- edit html option. You will have an option to backup or restore your template. Do that without any second thought.
Step4:
Once you have done that, go to the code.
Uncheck the expand widget templates if you ve checked it.
Place the cursor inside the HTML Code box and click Ctrl+F.
Now, look for this code in your code.
<b:widget id = 'your widget id' locked='False' title='labels' type='label'/>
Copy the code and paste in the search bar that pops up once you press Ctrl+F.
Now, you will know where the code is.
Once you ve identified the exact position of the widget code,
replace that line with the following code.

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<select style='width:100%' onchange='location=this.options[this.selectedIndex].value;'>
<option>Click to choose a label</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>                                         
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Replace the red text with whatever text you want to appear on the labels list.
Now, choose preview. If your blog appears perfectly, then hit save template.

New Interface: 

Log in to blogger- go to overview- choose template option.
Now, on the template page, you will have 2 options~ Customise and Edit HTML.
At the top right corner, you will have a button with options BACKUP/RESTORE.
Click that button and download your full template. Close the dialog.
Choose Edit HTML.
You have three options now:
Proceed, Open Template Designer and Cancel.
Click Proceed. You will get a warning dialog box saying its meant for advanced bloggers.
Click proceed anyway.
Now continue from step 4 in the old interface.
And you will have a drop down list for all your labels.

You can add as many label gadgets and customise them as you desire. But remember,
everytime you want to customise the gadget, change the widget ID in the coding of the HTML.

The concept of labels helps us to save space on the blog, organise our posts well and have a great layout too. I hope i helped ya all figure out the entanglements of labels in this post. Next post, we ll talk on event promotions and alphabetical recipe index for your space. In the meanwhile, what did ya all cook today?? I made Mixed Veggies Kuruma alongside some crispy fluffy Pooris. And devoured a jumbo water melon all by myself. Dint give a bite to Mr. P :P 

9 comments :

  1. Very good posts on all the 3 in this series.

    ReplyDelete
  2. Can't agree more about having to blog with your husband by your side. I blog through wordpress and the labels are called categories I guess (I'm totally new to the blogging world). I fall and learn every step and enjoy the process all the way. Great read!!!

    ReplyDelete
  3. Very detailed explanation Anu. Love your patience in writing such a detailed post. I would have started to yarn half way while typing.

    ReplyDelete
  4. nicely written.. Wonder why I am not getting your posts on my feed !! anyways, will check again.
    meanwhile please do pack those poori-kurma for me.. :D


    Kalyani
    Sizzling Tastebuds
    Event : Pickles & Preserves Fest + Giveaway
    Event : CWS - Oats

    ReplyDelete
  5. very well explained..thanks for sharing..:)

    Tasty Appetite

    ReplyDelete
  6. Thanks for sharing, well written..

    ReplyDelete
  7. very informative piece... thanks for sharing..

    ReplyDelete
  8. absolutely love the post and the point you have stressed. blogging all the way through no matter what!

    ReplyDelete
  9. Hi, interesting post. I am using new interface and I followed your instruction. in ctrl+F option, I am getting message "phrase not found".

    i checked for the code several times but i am not getting it through search option.

    Could you please help me with more inputs? :)

    ReplyDelete

Thank you foodies for all your comment love :) All comments with links and abusive language shall be promptly deleted.