Fix Blogger post and page titles

Now that Google finally begun indexing this site, I remembered the page <title>'s. And that they are not to my liking in Blogspot.

Default Blogger page titles are like this:

main page: YourBlogTitleWhichCanBeVeryLongInSomeCases

a page: YourBlogTitleWhichCanBeVeryLongInSomeCases: A Page

a post page: YourBlogTitleWhichCanBeVeryLongInSomeCases: A Post

archive page: YourBlogTitleWhichCanBeVeryLongInSomeCases: September 2011

Imagine those titles in Google search, or better still, on browser tabs or operating system's taskbar. Hard to differentiate one from the other! Better titles would be, at least I think:

main page: YourBlogTitleWhichCanBeVeryLongInSomeCases

a page: A Page | YourBlogTitleWhichCanBeVeryLongInSomeCases

a post page: A Post | YourBlogTitleWhichCanBeVeryLongInSomeCases

archive page: September 2011 | YourBlogTitleWhichCanBeVeryLongInSomeCases

This way the important information is first. Luckily the fix is simple: Edit template html. Find line:

<title><data:blog.pageTitle/></title>

and replace it with:

<b:if cond='data:blog.pageType == &quot;index&quot;'> 

  <title><data:blog.pageTitle/></title> 

<b:else/> 

  <title><data:blog.pageName/> | <data:blog.title/></title> 

</b:if>

Save template and test. Now index-type (index and search) pages keep old titles, others get new titles. You can use other characters instead of   |  there, and more characters than one, too. If you could not make it, please read know your way around.

Blog commenting - embedded form problems suck

There are issues with Blogger's embedded comment form, sometimes you just cannot post the reply, something to do with cookies and the fact that embedded form iframe runs in different domain (blogger.com) than the blog. This morning I run into this problem: could not post a comment into my own blog (this one).

I don't understand why they at Blogger cannot map the comment-iframe.g which is shown in iframe in blogger.com domain to the blog domain, so iframe could show (for example) http://yabtb.blogspot.com/comment-iframe.g?blogID=2509274430802200281&postID=[...] instead of http://www.blogger.com/comment-iframe.g?blogID=2509274430802200281&postID=[...] This would solve the cookie problem, I think.

I could of course do the tricks needed (logging out, clearing cookies, what ever), but I don't expect that all my commenters can (well on this blog they might, and should). So I decided to change commenting to use own page (because popups suck, too :) ). The separate page for commenting is actually quite good, I just wish one could style it to make it look like your blog.

Remove unnecessary links for older / newer posts in Blogger

This hack was inspired by this discussion thread on Blogger forums. First I made the solution (remove the Show older posts link in the grey box) which I describe in the last post, which is already quite good. But then I developed it further, and now it can remove unnecessary links in label searches almost every time, like 95% or 19/20 (it cannot always know if it is ok to remove the link, and then it does not).

This script uses getElementsByClassName, and some older browsers don't have it, so first install the function to your template using the instructions here.

Then you must install the post count hack. You don't have to set the window title, we'll just use the numPosts variable.

After installing those two, open your template html again, search for </body>, and insert this code before it:

Data provided by Pastebin.com - Download Raw

And there it is, many of the unnecessary and even confusing links are now removed in label searches. I'm really no javascript guru and one could possibly check the links some better way, but this works and it is good enough for me. :)

A dummy post (the 8th post)

This is the 8th post in this blog. I will use this post's date and time to construct the link for reversing the posts on this blog, see Blogger posts in chronological order, 2011 version. 8th and 7th post cannot have the same date, if you wish to break the first page there.

Blogger posts in chronological order, 2011 version

Many bloggers and readers would like to have the option to read the blog, or part of the blog, in chronological order. In Wordpress this is possible and I used it in my blogs, but unfortunately, Blogger does not support this. So we need a hack.

This hack is based on David Merrimans hack, thanks to David for that. But that hack did not work in Internet Explorer, and no longer worked on other browsers either. I first fixed the script for my MS-potilas blog, where I wrote an article about that hack. Now I have rewritten the code, so this is a completely new and better version. It works on new templates (at least on Simple, september 2011) and possibly on old ones, too.

What the script does

The script is placed before </body> tag, so it executes just after the page elements have been constructed. We dig into the DOM model of the page, find the posts, and reverse the viewing order of the posts on that page.

We can make the script reverse the posts on different conditions. For example, I reverse posts when the url contains argument order=ASC (like it worked in Wordpress). I also include the script only for index-type pages (including front page and label searches) using widget tags, so posts and other pages won't have this script.

My script also modifies the previous/next posts links at bottom of the page, adding argument order=ASC there, so user can browse through all the posts, from first to the latest.

Posts in chronological order hack script

Edit your template's html. Find </body> tag, and insert before that this code:

Data provided by Pastebin.com - Download Raw

Now, if you view your blog, nothing is changed. But, if you add #order=ASC to the url of your blog, like http://yourblog.blogspot.com/#order=ASC (you must reload page, F5), the posts on the page should be reversed. If not, something went wrong and you probably should also read this.

How to use it - building the link's url

The code version checks, if url contains order=ASC, so we need a link with order=ASC in it. You probably want this link to go to page with your first page. Link's url looks like, for example (in MS-potilas blog), this: http://mspotilas.blogspot.com/search?updated-max=2011-02-14T08%3A08%3A00%2B02%3A00&max-results=7. We add #order=ASC there (& instead of ? because there are arguments already), and the resulting url is http://mspotilas.blogspot.com/search?updated-max=2011-02-14T08%3A08%3A00%2B02%3A00&max-results=7#order=ASC.

You need to modify the red and green parts and possibly the blue parts of the url to get your first post displayed. First change your blog url, that's easy. Then there is updated-max parameter, which contains the date of the first post not shown anymore on the first posts' page + your time zone. And then the number of posts per page, from your blog's settings.

Let's assume you have 7 posts per page. Go to Edit posts, find the 8th oldest post you've written to your blog, and get it's publishing date and time, say for example 2010/06/30 5:14 pm. And your time zone is PST (Pacific time, GMT-7). Here is your url parameters: ?updated-max=2010-06-30T17%3A14%3A00%2D07%3A00&max-results=7#order=ASC

And explained: 5:14 pm must be changed to 24 hour clock, that becomes 17:14. Time zone must be changed to GMT +- #. Plus sign (+) in the time zone encodes to %2B and minus sign (-) encodes to %2D, so the time zone part is %2D07. First two blue 00:s are the seconds of post timestamp. Last two blue 00:s are minutes of timezone, usually 0, but if not, you need to change them.

Test your url. If result goes off by one post, try incrementing/decrementing the minutes value in the url by 1. Test the next/previous posts links at bottom of the page, too.

Gadget for the link

In my MS-potilas blog, I added the link to the right sidebar using HTML/Javascript gadget. Go to Page elements and add HTML/Javascript gadget where you want it. Contents of this widget (you need to change the red part for your blog, see previous chapter, to get to the page with your first post) are:

<script type="text/javascript">if(window.location.href.indexOf('order=ASC') == -1) document.write('<a href="/search?updated-max=2011-02-14T08%3A08%3A00%2B02%3A00&max-results=7#order=ASC" title="Show all articles in chronological order"><b>Articles in chronological order</b></a>');</script>

Link is shown only, if posts are not already shown in chronological order (the if clause). You can change this, if you want. And of course use your own blog's url, and the link text to your liking. If you're completely lost, read know your way around.

Several posts on same day?

Blogger groups all posts with same date to a group, which in the DOM model looks like one big post. The above script cannot reverse order of the posts inside the group. But if you have posts in your blog with same date, the fix is simple, just install my Show date on all Blogger posts within same date hack, and the posts in same day can now be shown in chronological order.

Option: use script on specific url (label, for example)

Because I wanted to give the reader (and me) the option to read posts in chronological order, while preserving the default view's order, I made the script run with the url paramerer order=ASC and gave user the link. Depending on your needs, you may want to run the script on other conditions. For example, when showing posts with a specific label.

In the code before </body> change <b:if cond='data:blog.pageType == &quot;index&quot;'> to <b:if cond='data:blog.url == &quot;http://yourblog.blogspot.com/search/label/yourlabel&quot;'>. Then replace if(window.location.href.indexOf('order=ASC') > -1) { with only {. You can also use other urls between the &quot;'s.

Tested on

Firefox, Opera (on Linux)
Chrome (on Linux and Windows Vista)
Internet Explorer 8 (on Windows Vista)

I will install this hack on this blog, too, so you can see it working and inspect the source codes.

Update Oct 16th 2011: I made another chronological post hack which uses blog feed, you might want to check that out, too.

"Count" blogger posts on page

In some scripts it is be useful to know the number of posts on a page. It can be used for example to hide the "previous posts" link, I'll write about that some time later. Information about posts and their count is available only in the blog posts widget which shows the posts. First I made javascript function which incremented a counter on each post loop iteration to get the post count, but then I found out that posts widget has a template variable called data:numPosts (not documented), which holds the number of posts displayed on current page. So the code got much simpler, and that's why quotation marks for "count". Here is how you do it.

Declare javascript variable numPosts

This step is not absolutely necessary, but I like to declare the variables used in the whole page. Best place for this is in html head. So, edit template html, find </head> and add this before it:

<script type='text/javascript'>
  var numPosts = 7;
</script>  

Default value is 7 posts per page. If there is already some javascript before </head>, you can also add only the var numPosts = 7; line before the </script> tag. Something like this (highlighted line is added, others are old lines):

  // ... some old code here ...
  // ... some old code here ...

  var numPosts = 7;

//]]>
</script>

Assign actual numPosts value in the posts widget

Ok, for this one you need to edit the html, again, and select Expand Widget Templates. Then find line:

<b:includable id='main' var='top'>

and add after that these lines:

<script type='text/javascript'>
  numPosts = <data:numPosts/>;
</script>

And now we have the number of posts showing on the page in javascript variable numPosts.

Testing

To test that code works, find </body>, and add before that:

<script type='text/javascript'>
  document.title = document.title + " (viewing " + numPosts + " posts)";
</script> 

Again, if there is already some javascript there, before </body>, you can also add document.title... line there. Now when viewing the blog, window title should be "YourBlogName (viewing # posts), where # is the number of posts on page.

Show date on all Blogger posts within same date

Blogger groups articles written on same day together, and the template variable data:post.dateHeader is only set for the first displayed post of the day (which is the last post of the day because of non-chronological blog post order). I saw some instructions to replace dateHeader by timestamp, that is ok but you loose the timestamp under the post. I came up with this solution, tested it, googled a little more, and found that some others had invented similar hacks, too. But here is mine.

These instructions work for the "Simple" template (september 2011), may work for others, too. I will install this hack on this blog to verify, that these instructions work.

Edit your blog's HTML. If you don't know how, you should definitely read this: Know your way around.
 
Commenting out template lines

Choose Expand Widget Templates. Edit 6/2013: Select Jump to widget -> Blog1 (editor has been changed). Find the section of code (use browser's find function, ctrl+F), where this string is three times:

<b:if cond='data:post.isDateStart'>

For me that code section looks like this (it may be different for you):

        <b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>

The important parts are the tree "if" lines and their corresponding "endif" lines. Put those three <b:if>'s in html comments, and also their closing tags </b:if>'s, like this:

<!--    <b:if cond='data:post.isDateStart'> -->
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
<!--    </b:if> -->
<!--    <b:if cond='data:post.isDateStart'> -->
          &lt;div class=&quot;date-outer&quot;&gt;
<!--    </b:if> -->
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
<!--    <b:if cond='data:post.isDateStart'> -->
          &lt;div class=&quot;date-posts&quot;&gt;
<!--    </b:if> -->

This is a good way to "delete" things from your html template. Blogger will strip all comments out, so they won't clutter the final html of your blog page.

Add javascript code to copy the date

Stay in the html editor and the vicinity of those previously commented lines. A few lines up from there, look for a line like this:

<div class='blog-posts hfeed'>

After that line, add these lines:

<!-- dates for all posts (on same day)/mspotilas. commented if/endif-lines + added unindented lines: -->
<script type='text/javascript'> var postDate=&quot;&quot;; </script>

That section is not absolutely necessary, but I like to declare the variables I use (C/C++ background). Then move down about 16-20 lines, where you should find a lines:

        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>

After those add these lines:

<script type='text/javascript'> postDate = &quot;<data:post.dateHeader/>&quot;; </script>
<b:else/>
<h2 class='date-header'><span><script type='text/javascript'>  document.write(postDate); </script></span></h2>

Now you should have date for every post, also on posts written on the same day.

Smiley emoticons to Blogger, and getElementsByClassName

This small script changes textual smileys into graphical emoticons in post texts and comments in a Blogspot blog. Before trying to apply this, you should know your way around in html and customizing your blog.

getElementsByClassName  

Go to Design -> Edit HTML. Insert this code before </head>-tag:

Data provided by Pastebin.com - Download Raw

This function does not exist on some older browsers, so if it doesn't, we define it here. This getElementsByClassName will be used by many other script snippets, too, so it is useful to add, even if you don't add the actual smiley codes, which we do next.

Smileys/emoticons script and css

In html editing, add this code before </body>-tag:

Data provided by Pastebin.com - Download Raw

You should upload decent smilies for example to your Picasa albums, and change the smilies' urls accordingly. These smilies are just for demonstration. You can use them to test the script. Smilies, now 6 of them, can be added or removed by modifying the code, the code should be self explanatory. See also Smileys test post.

And finally go to Template designer, Advanced, Add CSS, and copy this css definition there:

img.emoticon { 
border: 0; padding: 0; margin: 0; 
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}

You may also add the css directly to html instead of using Template designer, if you know what you are doing.

There you go. Now find your favorite smileys and upload them to web, and change the script's img urls. :)

Know your way around

The instructions for the tips and hacks I'm going to write in this blog won't be too detailed. So you really should know your way around in customizing your blog. Basic functions that you should be able to find and use are:

Edit HTML

• when viewing your blog, click Design on the top navbar
• if you have new interface, Template is already selected from left menu, just click Edit HTML and Proceed
• if you have old interface, Design tab is already selected, just click Edit HTML.

You should not be html illiterate if you try to install these hacks. Also, I will not remind you to back up your html, which you should always do before editing anything. If you break anything, it is your responsibility, you fix it, I cannot help you. You've been warned.

Template Designer

• click Design on the navbar
• new interface: click Customize
• old interface: click Template Designer

Here you can modify how your blog looks. On Advanced options you can add CSS declarations easily,  we'll probably be using that.

Layout/Page Elements (gadgets etc)

• click Design on the navbar
• new interface: click Layout
• old interface: click Page elements

Here you can add new gadgets to your page and configure different page elements. At least HTML/Javascript gadget will be used.

I'm sorry I cannot give you too detailed instructions, with pictures etc, and help everyone no matter what their computer skills are. You can google for more help. I have multiple sclerosis and I cannot spend too much time on computer. I don't do this to earn money, just use my spare time to share these tips. Hopefully they are useful to someone :)

Smileys test post

Or is it smilies... (I think both are ok).

:) :) smile http://oi55.tinypic.com/2462gkg.jpg
;) ;) wink http://oi56.tinypic.com/20j6cdj.jpg
:( :( sad: http://oi52.tinypic.com/2my3x3b.jpg
:D :D biggrin: http://oi52.tinypic.com/157ek4h.jpg
:P :P razz: http://oi54.tinypic.com/iwkj05.jpg
;( ;( cry: http://oi51.tinypic.com/wr8e1.jpg

Smileys in my example(s) are uploaded to tinypic.com. It is better to images them for example to your Picasa-albums and change the urls accordingly.