Saturday, August 7, 2010

[Blogger Tutorial] Creating a Label Page

When I asked my readers what they wanted me to write about, making a page that showed posts with a specific label was the first suggestion I received.  When would this come in handy?  Well, say you want all of your giveaways to show up on the Giveaway page.  Or, you have a daily/weekly post and you’d like all of them to show up on one page (sure, you could just click the label, but having a page is so much cooler!)

Well, here’s the tutorial!  Please keep in mind that I am not an expert at HTML coding, but I do test everything out before posting it. Please let me know if you have a problem!

ALWAYS BACK UP YOUR TEMPLATE BEFORE MAKING CHANGES.  Seriously, I can’t stress that enough!  Usually, I open a Word Doc and copy and paste it there.  That way, I know I have the unmarred code in a totally separate place!

Let’s begin!

  • NOTE: Before you start editing, you will need the unique label link. Get it just by going to your blog and clicking on whichever label you want to make the page for, then copying the URL.
  1. Click the Design link on the Blogger Dashboard, then click Edit HTML Code
  2. Make sure you click the box that says Expand Widget Templates that’s right above the text box
  3. Back up your code before making changes
  4. Press Ctrl + F and search for the following code:

  5. A few lines under this, you will see a line that only says </b:loop>
  6. DIRECTLY UNDER THAT, copy and paste the following code:

    <b:if cond='data:blog.pageTitle == &quot;Title of Label Page&quot;'> 
    <li class='selected'><a href=’Label Link' title=’Label Name’>Title of Label Page</a></li> 
    <b:else/> 
    <li><a href='Label Link' title=’Label Name
    ’>Title of Label Page</a></li> 
    </b:if>

  7. Change the red parts, and make sure you don’t delete anything else!

  8. Click Preview, and if you see that a new page was created with the correct title, it worked! But you might want to save and click on the tab yourself to make sure the posts show up.

  9. You’re DONE! Wasn’t that easy?

  • Please note that this code will make the page for you; you don’t have to make one beforehand!
  • I tested out this code with the “Guest Posts” page up top.  As you can see, clicking on that tab will show you all posts that have the label “Guest Post”.  So it really works!

------------------

Please tell me if the code works, and if my directions were easy to follow.  I’ve never made a tutorial before, so all feedback helps! Also, if you want to know why this code works and what it does, I can give a very simple explanation if you ask.

Also, if you’re interested in any other tutorials (not limited to Blogger), I would love to make a weekly tutorial post, so tell me what you need to know!

P.S. Feel free to copy or link to this post!  Just PLEASE remember to give me credit! I worked hard on this!

3 comments:

  1. Thanks for this - I'll be giving it a try soon.
    I've also got a blog button question: I have a page with buttons for various linky parties that I post to. All the buttons are different sizes and never seem to line up nicely. I have seen other blogs where they seem to have them in a grid, all the same size. How do I do that?

    This is the page I'm talking about: http://mummycrafts.blogspot.com/p/link-parties.html

    ReplyDelete
  2. Thanks so much for sharing this!!! I have been super busy :o( lately but will hopefully give it a try tonight or tomorrow. I will let you know how it goes. I really love your site.

    ReplyDelete
  3. I was unable to find the code in step 4. I assume this is because I do not have a page list widget set up. Is that correct?

    ReplyDelete

Thank you for visiting Cheap Geeks Anonymous and aiding me in my quest for world domination!

Note: Only a member of this blog may post a comment.