Adding Label-based Pages To Blogger

In today’s featured tutorial, Tom Gehrke of thomasgerke.com shows us how to create a label-based page to your Blogger site. A label-based page is basically a section on your blog that contains similar or related posted articles. It offers your visitors a nice and easy way to look up relevant information aside from using other features like the search box.

This feature works best if you mark your posts using single-word descriptions for your articles (as Tom describes himself and his own situation in his article). So how do you create such a page?

In you dashboard, go to the “Pages” section and click on “New Page” and select “Web address”.

You’ll be presented with a form that will ask you to provide a name (Page title) for your page and its URL address. The name can be whatever you wish as long as it makes sense.

For example, if you want it to display all of your “How-To” related posts then name it as “How-To”.

For the URL address field, simply key in your blog’s URL and then append /search/label/Your_Label. Hence using the above example, you’d end up with something like “http://www.yourblogsite.com/search/label/How-To”.

And that’s it! You’re done.

NOTE: This comes with a couple of caveats, however, as Tom points out.

Caveat #1: Capitalization

The case of the label you use to tag your posts needs to be what you enter in the Web address. I’ve been labeling posts with a capitalized “How-To” rather than “how-to”. So “http://blog.thomasgehrke.com/search/label/How-To” works while “http://blog.thomasgehrke.com/search/label/how-to” does not.

Caveat #2: Spaces And Other Characters

You may have elected to use labels that include spaces or other special characters. These characters need to be URL encoded. (Read more about URL encoding here.) If I wanted a page that gathered up all of my New York posts, the Web address I would use is “http://blog.thomasgehrke.com/search/label/New%20York”. Note that I replaced the space between “New” and “York” with a “%20″.

-Copied from: http://www.allblogtools.com/tricks-and-hacks/adding-label-based-pages-to-blogger/

NEW MOUSEOVER PINTEREST BUTTON + CODE:)

For those who want to pin my svg files or other posts, I've finally installed a new Pinterest button that shows up when you mouse over any pix on my blog. enjoy :)

IF YOU WANT THE SAME ONE...
Below I've posted the exact code I used. Note: this is not my code, I borrowed it from someone else and modified the image by copying the img url of the one I wanted to use. To use it. COPY the code below, go to your dashboard, click Template, then click HTML. Find the < /body>

tag, paste the code right above it. Click SAVE! then view blog. The same Pin button shown above will show up in EVERY blog post you ever made whenever you scroll over an image:) Have fun xoxo

 <script>  

 //<![CDATA[
 var bs_pinButtonURL = "http://www.katrinaleechambers.com/wp-content/uploads/2013/06/64_round_pinlove.png";
 var bs_pinButtonPos = "center";
 var bs_pinPrefix = "";
 var bs_pinSuffix = "";
 //]]>
 </script>
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
 <script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
 // This Pinterest Hover Button is brought to you by bloggersentral.com.
 // Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
 // Feel free to use and share, but please keep this notice intact.
 </script>