Monday, May 28, 2007

Leveraging Conditional Tags in Blogger Templates

Blogger Style:
Working with:
If you have worked with Blogger templates for any length of time, then you are aware of what a Tag is and how it can insert information into your Blog at the exact location where the Tag appears. There are Tags for just about everything you can think of -- but what if you do not want certain types of information to appear on your Post Item page or an Archive page?

There are a second set of Blogger template tags known as Conditional Tags which can allow you to specify what information to display under certain conditions. The Conditional Tags are dependant upon the page type you are viewing -- those types are the Main Page, Archive Page and Item Page. A fourth Conditional Tag is an "OR" combination of the Main/Archive pages.
<MainPage>
... show this on Main page only
</MainPage>

<ArchivePage>
... show this on Archive page only
</ArchivePage>

<ItemPage>
... show this on Item page only
</ItemPage>

<MainOrArchivePage>
... show this on Main or Archive page only
</MainOrArchivePage>

You can use any Conditional Tag more than once in your template. Mix and match them wherever you want to.

Practical Uses for Conditional Tags


Let's say that you want to display a short introduction of what your blog is about on your Main Page before your Posts start to be displayed.
<MainPage>
<h1>The Widget Factory Blog</h1>
<p>Hello and welcome to the Widget Factory,
a world of widget news, reviews and fun!</p>
</MainPage>

The introduction will not appear on any of your Item or Archive pages.

If you are listing your Recent Posts in the sidebar of your blog, then having them on your Main Page is a little redundant. Also, the list is of no real value on your Archive pages. Let's display the list on your Item Pages only.
<ItemPage>
<h3>Latest Entries</h3>
<ul>
<BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>">
<$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
</ul>
</ItemPage>

Conditional Tags work in the <head> section as well. For example, take this following code snippet which alters the your Page Title.

Normally an Item Page will have a Title in the form of "Site Name - Post Title" which comes from the Template Tag <$BlogPageTitle$>. We can workaround this by using Conditional Tags.
In the <head> section, find this:
<title><$BlogPageTitle$></title>

Replace with this:
<MainOrArchivePage>
<title>Your Sitename - Site Description</title>
</MainOrArchivePage>

<ItemPage>
<title>
<$BlogItemTitle$> - Your Sitename</title>
</title>
</ItemPage>

As you can see, there are many uses for Conditional Tags. Try using this method for displaying your Blogroll on your Main Page only or putting a short description of your blog in the Item Pages only. You are only limited by your imagination.

Friday, May 25, 2007

SpotBack - Rating Widget for Blogger

Blogger Style:
Working with:
UPDATE: This service is no longer active. Too bad, it would have been invaluable for structured ratings data.

Rating widgets allow your readers to interact with your blog and provide you, the writer, with feedback on what they deem your articles to be worth. There are an abundancy of rating widget services on the Internet and typically are of the vanilla "five star" variety.


Enter Spotback's Rate Everything widget which brings not only the ability for your readers to rate your posts, but other features with the purpose of generating more user interaction with your blog. The widget enables your readers to tag your posts, find personalized recommendations and referrals to other destinations on your site. The service is free and childsplay to install.

Your rating and tagging history will be saved to your personal profile and provide you with statistics on what your readers really do think. Tagging history could possibly be used to develop keyword search term lists. If you know how they are tagging your posts, then it is not difficult to imagine how they would be searching for that information.

All of this is packaged into a completely customizable widget of your choosing. Either select a ready-made design from the SpotBack gallery or use the online editor to roll-your-own. The editor allows you to add any element you want into it (rate-this, tags, etc.) and define CSS properties for background images, font size and color, borders, labels, etc.

How to get your Spotback Rate Everything widget


Go to the Spotback Get a Widget page. You will be presented with a choice of widget styles. Just pick one that you feel comfortable with, you can always modify your choice later.

The next screen will enable you to register an account with Spotback. Creating an account allows you to access and manage your rated posts. After you complete the registration process, you will be able to create your personal rating and recommended content widgets.

Once your widget is selected (or built from scratch) grab the code for your style of blog (Classic/New) and paste it into your template. Since everyone's templates are different, you will have to feel your way around. But Spotback has some guidlines for both Classic and New Layouts.

If you like, I have designed a rater widget for Blogger. Instead of stars, it uses the orange B's -- you can see it just below this post.

Wednesday, May 23, 2007

Processing Classic FTP Blogger pages as PHP



Applies to:
Working with:



As already mentioned, this applies to Blogger owners who publish their pages via FTP to their own website. If your pages are hosted at Blogspot.com for any flavor of Blogger, this will not work.

Why process Html pages as PHP?


PHP is a scripting language that will allow you to do many amazing things to your page that is not possible with standard Html. For example, you could modularize your pages into sections (header, footer, sidebar, etc.) and then instruct the server to include them into your page at the appropriate place.

The advantage of this is that you can make changes to your "localized include file" without having to republish your entire blog. This is known also as server-side includes.

Blogger variable capturing


Another practical use is that you can take a Blogger template variable and output it in a different fashion. Take the following line of Template code and see how Blogger outputs it:

This Blogger template variable:

<$BlogCommentAuthor$>

Gets published as:

<a href="http://webstractions.blogspot.com" rel="nofollow">Ronnie T. Dodger</a>


As you can see, the template variable is translated into a piece of Html code and then published via FTP to your blog page. You have no control over the formatting of the variable. It is, what it is.

With PHP we can capture that variable, perform a pre-written function on it and output it in a different way. Take this code snippet for example:

Our template code:

<?php remove_nofollow( "<$BlogCommentAuthor$>" ) ?>

Gets published as:

<?php remove_nofollow( "<a href="http://webstractions.blogspot.com"
rel="nofollow">Ronnie T. Dodger</a>" ) ?>


And our pre-written PHP function remove_nofollow outputs:

<a href="http://webstractions.blogspot.com" >Ronnie T. Dodger</a>



The basic premise here is that you revise the Blogger template with a line of PHP script that will capture the Blogger variable <$BlogCommentAuthor$>. Once published, the stage is set. When a user (or yourself) views the page, our pre-written PHP function remove_nofollow() will get called by the PHP interpreter and strip the rel="nofollow" from that line of code.

You will notice that our scripts are enclosed inside of <?php   ?> tags. This is what instructs your server to interpret everything between them as PHP script. More on that later. I just want to call your attention to it.

Server-side Includes


There are other things you can do with PHP. I mentioned earlier about server-side include files for your header, sidebar and footer. As an example, you can "cut" the code from your footer area to the end of the page in the template, "paste" it into a seperate file on your server and replace all of that inside your template with one line of code:

<?php include "footer.php"; ?>

Publishing with Blogger is wasteful. The way it is set up, we send the same chunks of code over and over again. By setting up server-side include files and using PHP to insert those chunks, we eliminate that waste. This will save on republishing time and bandwidth.

Another advantage is that you can edit the include file with your favorite software and have no need to republish your entire blog. Insert links into your blogroll, more footer information, maybe add some css coding, etc. As soon as you save your file -- the effects are live and for every page on your site.

Sounds kewl eh?

Processing .html pages as PHP


Your server will not process PHP script inside of web pages with the .html extension. Pages with a .php extension, however, instructs the server to pass the file through the PHP interpreter first. The interpreter acts on the script and returns the output back to the server for normal Html delivery.

The .htaccess File


Fortunately there is directive to instruct the server to process .html files as PHP script, via a file named .htaccess which will hold the instruction.

Copy the following code into a new Notepad file:

AddType application/x-httpd-php .html .htm

Save the file to your computer with the filename .htaccess (note that filename begins with a period). Upload that file via FTP into the directory where your Blogger main page is located. Your blog directory may be at the root domain or in a sub-directory named /blog or something else. You were the one that set it up, so you tell me.

This file will tell the server that from this directory, and every directory below it (sub-directories), whenever it encounters a file with the .html or .htm extension -- then pass it through the PHP interpreter first.

Testing your .htaccess installation


We are going to revise the template to include a short snippet of PHP script to test that everything is hunky-dorey.
Navigate to Dashboard > Template > Edit Html

Copy and Paste, exactly, the following code at the bottom of the template right before the </body> tag. I chose this place because some of you may have some wacky CSS that repositions your page over things (like Blogger navbars and such). Hopefully this part of the page is okay to see if the test works.

<?php echo "PHP is fun!!!"; ?>

Save your template and republish your Index only

If all went well, you should see the words PHP is fun!!! at the bottom of your page. If so, go back to your template and remove that line of code and republish your Index only.

If you do not see the words, drop me a comment and we will figure it out.

What do we do now?


In upcoming articles, we will be removing the NoFollow tag from comments, flipping Page Titles around (topic first, then blogname ... good for SEO), creating easier to edit blogroll blocks, blocks for labels (oh joy), and maybe a widget or two.

Stay tuned, more coming soon!!

Friday, May 18, 2007

Adding pseudo Categories to your Blogger sidebar (New Layouts)


Applies to: New Layouts
Working with: Page Elements


Note: I will be following up with a version for Classic Templates shortly.

Labels are great for identifying what your posts are about. They are to posts, as META keywords are to web pages. As such, they tend to get to a point of overflow if we are not consistent with are spelling or we use them in a spammy manner.

Don't get me wrong, labels have a purpose. Just not on the sidebar. As your list of labels grow increasingly bigger, so does the sidebar -- and that can be a mess.

In this tutorial, I am going to show you how to use labels to produce a pseudo-Category List for your sidebar. Accomplishing this technique is fairly easy to do, but the planning and follow-through will take a little determination.

Choosing your categories wisely


Categories are broad stroked themes for your blog and should be hierarchical in nature. You need to determine what your main theme is and break it down into sub-areas of interest.

For this blog, I am dealing with two versions of Blogger -- Classic and New. Look at my categories in the sidebar and that will top the list. With both versions of Blogger, I will be looking posting methods, layouts/templates, settings, and some misc stuff, so I created sub-areas of interest concerning those themes. The categories are not etched in stone however, and can be changed easily at any time.

Creating a label for your category


If you have not used labels before or a label does not exist for your category, it will have to be created.

Existing labels that may fit your category can be adapted and may not have to be created explicitly. Click on the label and see what types of posts get listed for it. If they all mostly deal with the category you have in mind, then it won't have to be created.

Naming your labels should be done in a consistent manner, this is to aid you in remembering them easier when it comes time to post. Make them short, no double words, non-plural. If you this is unavoidable, don't sweat it.

If you need to create labels, the first thing to do is create a new post titled "Categories". Enter a little blurb in the post that this is non-informational and for category setup only. In the "Labels for this post" box, enter in all of the labels you will be using for your categories. Double check them, then publish the post.

This post can be deleted sometime down the line after you have used each new label at least one more time. For right now, we are going to let the garbage post sit there.

We are now done with creation of categories. On to the next step.

Creating the Category Html


We will be writing a little Html code consisting of three tags for a heading, unordered list and list items. Don't worry, it will be easy.

First thing we need to do is capture the link Urls from your labels. Open up the blog in your browser and hover your mouse over the link. Down in the status bar you will see the Url. It should look something like this:
http://webstractions.blogspot.com/search/label/settings

At the end of the url you will be able to see your actual label name. Right now we are interested in the path to your label directory, everything but the label name and the root of your blog Url.

Open up notepad on your computer and type in the following:
<ul>
<li><a href="/search/label/"></a></li>
<li><a href="/search/label/"></a></li>
<li><a href="/search/label/"></a></li>
<li><a href="/search/label/"></a></li>
</ul>


Note that the href portion starts with a forward slash. This tells your browser to go to the root path of your blog. In my case http://webstractions.blogspot.com

Add as many <li> items as you have categories.

The <a> portion of the Html is your link anchor. At the end of the url (between the slash and quotemark) insert your label names. In my example above, that was "settings".

Put them in the order you want them listed.

The anchor surrounds your "linking text". Right before the </a>, insert what you want that text to read. If you notice on my category list for the style of Blogger, I am pretty descriptive. Be careful not to write a paragraph or two here, short and sweet.

When you are done, it should look something like this:
<ul>
<li><a href="/search/label/basics">Getting started with Blogger</a> </li>
<li><a href="/search/label/layouts">Using templates and layouts</a> </li>
<li><a href="/search/label/posting">Handling posts and comments</a> </li>
<li><a href="/search/label/settings">Settings</a></li>
</ul>


Save your work or keep it handy for the next step. We will be copying that text to the clipboard and pasting it into a widget.

Copying your code to a Text Widget


Go to your blog dashboard and navigate to the Template tab. Click on Page Elements, then Add a Page Element.

In the pop dialog that appears, click on the add to blog button for Html/JavaScript. That screen will change to an input form.

In the box labeled Title, enter in "Categories" (or whatever you want).

Copy the code you wrote in Notepad and paste it into the large box labled Content in the widget. If you don't know how to copy and paste, you should learn (go here).

Click on Save Changes.

If all went well, you are back at the Page Element screen and your new widget is sitting at the top of your sidebar. If you want to reposition it, do so now.

Now View your blog. Test all of the links for your Categories out to make sure they are working properly. If there are any bad links in there, go back to your Page Element screen and edit it.

Using your new categories


Make sure that you label every post with at least one of your categories. Two or three labels can be used if they truly fit the category. More than three, then this whole exercise would have been in vain, go back to just using labels.

Remember, categories are for your users. Labels are for tagging the blog bots with. Spam the bots all you want, not your readers.

If you have any problems, drop me a comment. I am available 24/7, except on weekends, bowling night, poker night, mornings of extreme pain from the night before, siesta time, daily constitutionals and sometimes when I am sleeping. Outside of that, I am here for ya man.

Categories

This post is for the tutorial Adding Categories to your Blogger Sidebar and is for reference only.

Blogger Styles

Classic Templates
New Layouts

Templating

Edit Html
Page Elements(new)
Fonts and Colors (new)
Widgets (new)

Posting

Posting
Comments
Backlinks

Other

Settings

Thursday, May 17, 2007

Removing NoFollow from Blogger styled layouts

I follow, do follow, no nofollowBlogger by default, and other blogging software such as WordPress, automatically adds the "nofollow" microformat extension to all links from user generated content. User generated content is defined as comments or external sources such as linkbacks and trackbacks.

I support the people of the blogging community who have chosen to remove NoFollow for blog comments and linkbacks/trackbacks. If you are reading this right now, you too are probably thinking about joining us yourself. It would be a good move, read on to find out why.

Before we begin


First, this removal procedure applies to the New Blogger styled layout. It is impossible, at this time, to remove NoFollow from Classic styled Blogger templates. This is due to the fact that those templates use the variable {$CommentAuthorName$} which encapsulates the anchor link around linking text. I am working on getting around this, because I have another blog using this style.

There are a number of tip sites out there explaining how to accomplish the removal of NoFollow -- and every one of them did not get it completely right. I have not found one yet who has addressed the issue of backlinks which also have the NoFollow extension added to it.

I have seen numerous comments left by readers of the tutorials stating that they could not find the NoFollow referenced in their layout template. Two reasons for this. They either are using the Classic template or more probably it is the same problem I encountered when I first went looking for it. I will explain why below, and it will be very clear as to why they missed it too.

Properly removing NoFollow from the template


Warning: Before beginning this procedure -- backup your template
.

Login to your dashboard and click on the Layout Link. If you are already managing your blog, then click on the Template Tab. Confused, don't be -- there really is a reason for that.

Click on the Edit Html Sub-tab for Templates.

Here is the important part. On the upper right of the template edit area, there is a checkbox labeled Expand Widgets. Make sure it is checked.


[ Click for larger version ]


Every tutorial I have read failed to mention the checkbox. The items we will be deleting are inside of sections, which in turn are inside of a widget. If the widget is collapsed, then we will not be able to see anything inside of the widget.

Now do a search for nofollow in your expanded template. You can either use your browser menu by clicking on Edit>Find in page or via the keyboard Ctrl-F. When the dialog box comes up, type in nofollow, and enter.

You should come across a line of code that looks something like this:
          <dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

Delete the portion of the code that says rel='nofollow' and Save Your Template.

Optionally remove Nofollow from backlinks


By doing another search for nofollow in your expanded template, you will find another one for your backlinks. You can choose to delete this as outlined above -- or not.

If you do delete the reference, do at your own risk. Backlinks are outside of your control and cannot be moderated. You can turn them off altogether via your Settings>Comments Tab. It is up to you.

Wednesday, May 16, 2007

Introducing WebStraction's Tips 4 BlogSpot

Tips 4 Blogspot NewsI have seen numerous tip sites on the Internet for Blogger, some of which are pretty bad. There are a few pearls in there however. Inevitably though, they all have one thing in common -- they deal with the new and improved Blogger which is now hosted on Blogspot.com

Having my original Blogger account self-hosted for my WebDev Blog at WebStractions (eg: the old Classic style) a lot of the tips I saw was all Greek to me. I had no clue as to what they were talking about when it came to editing your layout or inserting widgets. I come to find that the terms are new and apply to the way Blogger is now handling the template for the blog.

Ultimately I had to get myself one of these new fangdangled blogs to play around with. So far it is has been a pleasant experience and relatively easy to work with. What was more exciting was that nobody had claimed my main domain name (Webstractions) as their own.

Anyhow, I will be dedicating this site to my exploration of the new Blogger and hopefully provide some pearls of wisdom for all of you out there in Blogsville. And if there are any of you who are actually still hosting their original Classic Blogger account, drop me line so I know I am not the only one out there.