Make "Post a Comment" link bigger

Because of problems with the embedded comment form I decided to change my blogs' commenting use separate comment page. Other option would have been a popup window, which I don't like.

But the Post a Comment link is so small, will people notice it at all? To compare with embedded form:

It looked so small, that I decided to enlarge my link. :)

Here's how I did it. Open template HTML, select Expand Widget Templates. Update 2013: Select "Jump to widget" "Blog1". Search for a block that looks like this:

          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>

And change it to this:

Data provided by Pastebin.com - Download Raw

Now the link is bigger (<H4>) so people will notice it easier. See this article's Post a Comment link here.

I can has edit Blogger comments!

Blogger team refuses to add comment editing to Blogger. I think the reasons are not valid, something like "so the blogger won't put words to someone else's mouth". Wordpress had comment editing. I did not misuse it.

If someone posts a comment, I can delete it and post just similar comment with similar identity using name and website. I can post fake comments just on my own. That's internet. Letting us not edit comments is just stubborness. We cannot edit even our own comments, our own words!

The funny thing is, if you know what you are doing, you already can edit already published comments, your's and anyone else's. It is just a bit tricky. I don't know if anyone has figured this out before, but this works and I tested it in my test blog. I won't be too detailed in the instructions, and if you decide to try it, everything you do, you do at your own risk. I won't help you with this one.

My trick involves exporting and importing the blog and a text editor. Bells ringing already? Well, at least warning bells should, because import can fail, especially if you mess up the xml file. It is best you forget the whole thing. Ok but here we go. Export your blog to file, save file to computer. Open file with text editor. Edit the comment(s) you want to edit, save file. In your blog (this is a scary part) delete that/those post(s), which contained the edited comment(s). Import your edited xml-file. Only the missing post(s) gets imported, now with the comment(s) edited.

Workaround for navbar search bug

Navbar search problems have been around since 2009, as known issues blog tells. And still outstanding (as opposed to fixed). This was the first things I noticed when I switched from Wordpress.com to Blogger.

Known issues blog instructs us:

As a workaround, you can use search operators on Google.com to search for content specifically on your blog. For example:

site:yourblog.blogspot.com KEYWORD KEYWORD

OK, maybe good for blog writers, but what about our users... not very user friendly. My first solution to fix the navbar search was to automate that googling. Here's how it can be done.

Navbar search to Google search

Edit your template html. Insert this code either just before </head> or just before </body>.

<script type='text/javascript'>
//<![CDATA[
  var blogUrl=window.location.protocol + "//" + window.location.host + "/";
  var qPos = window.location.href.indexOf('/search?q='); // length 10
  if(window.location.href.indexOf('/search/label/') == -1 && qPos != -1) 
  {
    var urlGoogle = "http://www.google.com/search?q=" + window.location.href.substring(qPos+10) + "+site:" + encodeURIComponent(blogUrl);
    if(confirm("Navbar search is broken. Search with Google?"))
      window.location = urlGoogle;
  }
//]]>
</script>

If you put the code before </head>, the page below won't draw before user is asked to move to google search (the question pops up on white screen). If you put it before </body>, the page loads and then pops up the question, so user can see if the broken search actually found anything. You can test it in both places and choose which ever you like the most.

You can also customize the code to your liking, for example remove the confirm question, if you know how to. Know your way around.

This was my first solution to the broken navbar search, and it works nicely, and is very simple to install. I used this solution for a while, then came up with something completely different... I'll write about my second navbar workaround later on.

In the meanwhile, because search gadget is also broken, you might consider adding a custom Google search to your blog's sidebar: How to add Custom Google Search to your Blogspot blog.

3.10.2011 Navbar search works actually quite well in this blog (surprise, does not work for my other blog), but I installed this hack here for demonstration. I will remove it when I install the second generation navbar search hack and blog about it.
5.10.2011 This hack is removed, installed The ultimate hack for broken Blogger navbar search

"# comments" link in index page hack

I changed this blog's commenting to use full page comment form. With embedded form there are problems with cookies across different domains, I could fix them but my readers might not. So I decided to use the only good option: full page. (some might also like popup window, I don't)

With embedded form commenting, when you view articles in index, suppose you have 5 comments in a post, then there is a link 5 comments which opens the post and jumps to comments section (#comments). This is nice.

But with full page comment form the link 5 comments don't open the post and comments, but the commenting page instead. I think it is better to open the post and comments, and there user can click Post Comment link if he wants to post a comment. When there are 0 comments, the link still may open the commenting page directly.

This can be accomplished quite easily. Open you templates html for editing, click Expand Widget Templates. Find code that looks like:

            <b:if cond='data:post.allowComments'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
            </b:if>

That code should be inside <b:includable id='post' var='post'> block (there's another one for mobile devices, block <b:includable id='mobile-post' var='post'>, that one I didn't touch, you can, if you want). Replace that previous code by:

Data provided by Pastebin.com - Download Raw

We insert three adjacent things into original code, highlighted red, old code is black (no need to do anything about this snipped, this is just for clarification):

    <b:if cond='data:post.allowComments'>
1.   <b:if cond='data:post.numComments == 0'>
      <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/> <data:top.commentLabelPlural/></a>
     <b:else/>
2.    <a class='comment-link' expr:href='data:post.url + &quot;#comments&quot;' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
3.   </b:if>
    </b:if>

Now it works the way I want. I'll install this hack on this blog, except on this particular post, so you can test it – this post works like it was before, all others work like this hack. Instructions are not too detailed, so you should know your way around before trying to apply to your blog.

References:
Blogger Help: How do I leave comments on a blog?

How to add Custom Google Search to your Blogspot blog

When I moved my MS-potilas blog from Wordpress.com to Blogger, the first problems I noticed were with search capabilities. The navbar search would not find blog posts whose dates are over one week older than blog's creation day. Of course in my imported blog most of the posts were like this.

Fortunately, I thought, there is a search gadget that can be inserted in the side bar. I did that, but the gadget gave me no results. Google already found my blog, so that was not the problem.

Searching through Blogger forums I noticed that navbar search problems have been around since 2009 and search gadget has stopped working in February 2011. So fixing those might take a while... On the meanwhile, something would be nice.

How to create a CSE for your blog

Because Google already found the blog and I could search it there, I figured that a Custom Google Search Engine would work, too. Free version displays ads before/next to search results, but it is better than nothing.

Here is how you create one for your blog:

1. Go to http://www.google.com/cse/. Click Create a Custom Search Engine (CSE)
2. Give your CSE a name and a description (MyBlog's search, Search for my blog MyBlog, for example). Put your blog's url in Sites to search. Read terms of service and click Next.
3. Select the style. Here you can also try out what results CSE will find for your blog. Then click Next
4. You're done. You don't need to copy the given code. From now on, if you wish to modify your CSE or get the codes, just go to http://www.google.com/cse/ and click manage your existing search engines.

Integrate search box into sidebar and results in main column

The search gadget displays this way, and we can make CSE work so, too. Go to your CSE's control panel, and choose "Look and feel". Select the two column layout and then click Save & Get Code. We use those codes in a while.

Now go to your blog's design, Page elements. Add gadget to sidebar. Choose HTML/Javascript gadget, optionally give it a title, and paste the longer code into this gadget. Arrange to your liking and save page layouts.

Then edit template html. Select Expand Widget Templates. Search for line

<div class='column-center-inner'>

After that add the shorter code, i.e. this:

<div id='cse' style='width:100%;'/>

If you did not find the column-center-inner -line, then search for line which begins:

<b:section class='main' id='main'  [...]

And put the shorter code immediately before it.

Now the search already works, you can try it out.

Styling to remove the excess space

The div which we inserted had initial height of 28, and CSE scripts double that when run, so the main column gets pushed 56 pixels downward. I fixed that by styling the <div id="cse"> by infamous negative margins.

Here's how: Go to Template Designer, Advanced, and Add CSS. Add the following definition:

#cse { 
min-height: 28px;
_height: expression(this.scrollHeight<29?"28px":"auto"); /* IE6 min-height */
margin-top: -28px;
margin-bottom: -28px;
}

Setting the min-height just makes sure the initial height is 28px. Apply to blog and now the main column is back to normal and we have a working search. Nice, innit :) You can see it working on this blog, and also the non-working out-of-the-box search gadget. You can try searching for "smilies", for example, using those gadgets.

Blogger, javascript and CDATA

In some of my code samples in this blog you will see javascript blocks like this:

<script type='text/javascript'>
  ... code ...
</script>

And in some like this:

<script type='text/javascript'>
//<![CDATA[
  ... code ...
//]]>
</script>

You might ask: What is that CDATA? Why cannot he make up his mind which one to use? Can I stick to one of the notations?

Blogger layout template must be valid XML, otherwise it won't pass validation and you cannot save it. In XML for example character < starts a tag. Lets assume you want to run the following javascript code, which you have found somewhere in internet:

<script type='text/javascript'>
  alert("Tip of the day: 5 < 6 & 1 < 2");
</script>

But if you put that on your template and try to save or preview, you'll get:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The content of elements must consist of well-formed character data or markup.

Now there are two ways to correct this script before pulling out your hair. To make the original script to be valid XML inside script tags, you must escape certain characters, like <, >, and &. And if you don't escape, the template editor will escape " and ', too. The script in your template becomes:

<script type='text/javascript'>
  alert(&quot;Tip of the day: 5 &lt; 6 &amp; 1 &lt; 2&quot;);
</script>

You can use HTML Escape Tool (from htmlescape.net) and similar tools to escape the javascript code, if you don't want to do it by hand. There are also tools for unescaping the characters.

Ok, as you see that "messes up" the code and makes it harder to maintain. Another solution is to mark the code between <script> and </script> tags as CDATA (character data). This tells XML parser that the text is general character data, instead of XML to be parsed. You may have already guessed, it looks like this:

<script type='text/javascript'>
//<![CDATA[
  alert("Tip of the day: 5 < 6 & 1 < 2");
//]]>
</script>

The latter is perfect, you may think. It is good, but, there is a but. If you want to use widget tags for templates, you cannot mark those sections as CDATA. I'll give you a simple example.

<script type='text/javascript'>
  alert("<data:blog.url/>");
</script>

In this script you must not escape <data:blog.url/>, because it is template data tag http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=47270. You can escape "s to &quot;s, and if you don't, Blogger will do it for you. But if you try this:

<script type='text/javascript'>
//<![CDATA[
  alert("<data:blog.url/>");
//]]>
</script>

It does not show your blog address, but the text "<data:blog.url/>", which probably was not the intention.

For some reason, you cannot find this information in Blogger help.

Some references:
Wikipedia CDATA
Javascript and XHTML

Create an image link to your blog's dynamic views in Blogspot

Blogger just launched a new way to view the blogs: dynamic views. They're nice, but gadgets and custom javascript won't work there (at least for now). Why not offer your readers easily the best of both worlds? Here is how you can create in the traditional view a (graphical) link to the dynamic views.

Graphical link

Open your template design, and edit the html. Find </body> tag, and before that insert this code:

<a href='/view' style='display:scroll;position:fixed;bottom:4px;right:4px;' title='Try the new dynamic views!'><img src='http://oi53.tinypic.com/245wwmd.jpg'/></a>

This creates a link, which position is fixed to the downright corner of the window. The link itself is an image, a sticker-like Blogger icon, which I downloaded and resized from Findicons.com. You can use other image as well, just replace the img's src parameter value. Possibly it would be better, if you uploaded the icon to your own server space or Picasa web albums instead of tinypic. You can also change link position and the dynamic view style that is opened.

Text link

This one obviously needs no image. Open your template design, and edit the html. Find </body> tag, and before that insert this code:

<a href='/view/sidebar' style='display:scroll;position:fixed;bottom:4px;right:4px;background-color:rgba(192,255,192,0.6);' title='Try the new dynamic views!'>[ Dynamic views ]</a>

This creates a link, which position is fixed to the downright corner of the window. The link itself is semi-transparent text. You can change link colors, transparency and position. And you can also style the link using css, to use hover etc, if you know how to.

Only on index-type pages

If you want, you can show the link only on index-type pages (index, search), with conditional tags, like this:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a href='/view/sidebar' style='display:scroll;position:fixed;bottom:4px;right:4px;background-color:rgba(192,255,192,0.6);' title='Try the new dynamic views!'>[ Dynamic views ]</a>
</b:if>

Hope you liked this tip :)