Yet Another Blogger Tips Blog

Monday, November 21, 2011

Fine tune your blog's Google custom search

If you use custom Google search in your blog, you may find these tips useful. Excluding pages by meta robots and robots.txt affect also custom Google search results, but here are some tips and hacks to further fine tune your blog's custom Google search, or Custom Search Engine (later CSE), search results.

Open search results in the same window

By default CSE gadget opens the results in new window (link target="_blank"). To change links open in the same window (target="_top"), edit your CSE search gadget code and find line:

customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);

After that add line (double click to select for copying):

customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_TOP);

Set thumbnail for a post

Automatic thumbnails were introduced to CSE a little while ago. For some posts you may want to define the thumbnail manually. For example, I have some posts with picture slideshow, and automatic thumbnailing does not find the slideshow pictures, but I can specify the thumbnail manually instead. The easiest way is to use "meta thumbnail" in the post text. Edit post as html and add following code (double click to select for copying):

<meta name="thumbnail" content="http://lh3.googleusercontent.com/-fY4i0d-wN2A/Tmtet0g4_pI/AAAAAAAAAUs/lNXWTbdvAzs/s288/leskenlehti.jpg" />

Use your own image url in content. I use the "s288" size from Picasa web albums, that should not be too big or too small. You can specify the meta in body text (post text), even if the documentation says it must be in head section, reference: Custom Help Search forums.

No thumbnail for a post (or a page)

Edit post (or page) text in html, add this code to text (double click to select for copying):

<!-- <PageMap><DataObject type="thumbnail" /></PageMap> -->

Be careful not to use the Compose tab – if you switch from html to Compose mode and back to html, the html comments (and so also the PageMap) are gone.

No thumbnail for archive pages

You can set a page to have no thumbnail using a PageMap. For example, to remove thumbnails from archive pages, open template html, find line <b:include data='blog' name='all-head-content'/> and put this code before it (double click to select for copying):

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
&lt;!-- &lt;PageMap&gt;&lt;DataObject type=&quot;thumbnail&quot; /&gt;&lt;/PageMap&gt; --&gt;
</b:if>

Excluding pages from CSE search results

These exclusions are made in CSE control panel. Select Sites, Excluded sites, click Add sites. For most times the selection "Exclude just this specific page or URL pattern I have entered" is best.

To exclude all archive pages, use pattern: *.blogspot.com/*_archive.html
To exclude a static page, use url of the page.
To exclude all static pages, for whatever reason, use pattern: *.blogspot.com/p/*.html

Sunday, November 20, 2011

Block robots from specific page(s) in a Blogspot blog

If you want to have your blog indexed by search engines, you might still have some pages in your blog that you don't want the robots to crawl. You cannot control robots.txt file in Blogger, but you can use conditionals and "meta robots" to restrict individual pages from well-behaving robots (like Google).

For example, I have EmailMeForm contact form, which I have set to redirect to a "thank you" page after the form is submitted. I decided to block this static "thank you" page from being indexed.

To block a static page, put this code somewhere in the template html "<head> area" (before </head>), for example before line <b:include data='blog' name='all-head-content'/>:

<b:if cond='data:blog.url == &quot;http://BLOGURL.blogspot.com/p/PAGE.html&quot;'> 
  <meta content='noindex,nofollow' name='robots'/>
</b:if>

Fix the url http://BLOGURL.blogspot.com/p/PAGE.html to actual url of the page in your blog (in my blog it was http://mspotilas.blogspot.com/p/kiitos_09.html).

Note, that the above code itself does not hide single posts very well, only static pages, because posts are listed on front page and archive pages, too, where search robot would get the contents of the post.

You could turn off the indexing of post archive pages, like this:

<b:if cond='data:blog.pageType == &quot;archive&quot;'> 
  <meta content='noindex,nofollow' name='robots'/>
</b:if>

I have not tried this one, but it might trim down the number of search results, which may be desirable. If you use Google CSE in your blog, you can trim down the CSE search results by excluding *.blogspot.com/*_archive.html url pattern from CSE Sites, but that is another story.

And this is how to hide all static pages, whatever the reason may be, from robots:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <meta content='noindex,nofollow' name='robots'/>
</b:if>

Saturday, November 19, 2011

Custom Google Search / CSE and automatic thumbnails

I have replaced the non-working sidebar search gadget with custom Google search or Custom Search Engine (CSE – why must they have all these different names for things, and CSE also stands for Custom Search Element...) and a gadget (or widget) for that: How to add Custom Google Search to your Blogspot blog. Also my navbar search is hooked to this CSE search.

Last week or so I noticed (in my MS-potilas blog) that the search results included thumbnails. Very good looking. Here's a post about automatic thumbnails in Google Custom Search blog: Thumbnail images in search results -- no work required!

This YABTB blog has not many pictures, but here's one example, search results with search gadget and CSE gadget:

It may be that default search gadget, which is based on Google blogsearch, will get thumbnails eventually, too, but until then I think CSE search results are way better looking than the default gadget's. Even if the default search gadged works for you, thumbnails for search results might be the reason to choose CSE instead.

Friday, November 18, 2011

Combined CSS and image comment bubbles

This article concludes my three part comment bubble article series. If you want comment bubbles in your Blogspot blog, you can pick one these three hacks.

1. Comment bubbles using only CSS
2. Comment bubbles using an image
3. Combined solution, which uses CSS whenever possible (installed in this blog)

As I explained in the CSS only comment bubble hack article, Internet Explorer does not support all CSS needed for rounded comment bubbles with gradient background. And the support varies from version to version.

Internet Explorer 8 and lower

I start with the "CSS only" hack installed, and then add there stuff for different Internet Explorer versions.

IE8 and lower don't have rounded corners and IE7 does not support :after, so I decided simply to use a comment bubble image, when IE version is lower than 9. First I thought that I'll use conditional comments like this:

<!--[if lt IE 9]>
..stuff for ie versions below 9..
<![endif]-->

But after trial and error I found out that it was not so easy. I learned that the browser version number does not actually determine the CSS capabilities, but the document mode (compatibility mode) instead. Well at least in Blogspot blogs, and that's where I'm targeting with my code.

I finally came up with this solution for IE (documentMode) < 9:

<!--[if IE]><script type='text/javascript'>
if(typeof document.documentMode == 'undefined' || document.documentMode < 9)
document.write('<style type="text/css"> a.comment-bubble { background:url(http://lh6.googleusercontent.com/-IVVxPuuguig/Tr_NWRIN3HI/AAAAAAAAAWs/weLvk3eWQtM/s800/comment_bubble.jpg) no-repeat;width:36px;height:26px;border:0;padding-top:3px;} a.comment-bubble:after { border:0; };</style>');
</script><![endif]-->

That code is placed somewhere after template stylesheet and before </body>. The javascript is seen and runs only on IE. If documentMode < 9 (IE8, IE7, ...), new style definitions are written: bubble background uses an image, set width and height, no border and right padding, and for a:after remove the border that made the triangle. Basically make comment-bubble use same styles as in the image comment bubble hack.

Internet Explorer 9

As we saw in the CSS only comment bubble hack, IE9 does quite well with the comment bubble CSS: only the gradient background is missing. There is a filter provided by Microsoft to make gradients, but that messes the rounded corners. There are workarounds for that, too, but I chose another way: I made a gradient background image and encoded it in base64 to make a data URI, so it could be directly embedded in CSS without external file. Background image is correctly clipped by the rounded corners.

So the comment bubble CSS became:

Data provided by Pastebin.com - Download Raw

Line 15 is new (compared to CSS only solution) and contains the gradient for IE9. Because it is before the background gradient definitions, they override it on browsers that support gradients. And on IE8 and below the background is later reset to use an image (see previous chapter).

The discovery of data URIs base64 gradient PNG lead me do a simple linear gradient tool for making embeddable gradient backgrounds.

Complex solution?

So, is there any point in this complex solution, one might ask. Well, to be honest, I don't know :) You might prefer to use either CSS only or image only solution, for simplicity. I could also have used either, but this way I learned more. In a year or two Internet Explorer will do CSS comment bubbles, too, and then these browser version dependend hacks won't be needed anymore.

Thursday, November 17, 2011

Comment bubbles for Blogger using an image

Similar hacks have been available before, this one adds nothing new or special to them, except the CSS code may be a bit tidier. Some might want to use this in their Blogspot blog for its simplicity: the same version gives same results in all browsers, and the CSS code is not long.

In this blog I use a combined method that uses CSS3 whenever supported, so this image comment bubble hack is not installed in this blog, instead a combination of this hack and the CSS3 comment bubble hack, more about that in this post.

Add comment count code

First we will add the link to "post.url#comments" next to the post title. Open your template html, and expand widget templates. Find lines:

<b:includable id='post' var='post'>
  <div class='post hentry'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>

After those lines add (doubleclick to select for copying):

<b:if cond='data:post.allowComments'><a class='comment-bubble' expr:href='data:post.url + &quot;#comments&quot;' expr:title='&quot;Comments to &amp;quot;&quot; + data:post.title + &quot;&amp;quot;&quot;'><data:post.numComments/></a></b:if>

Save the template.

Add CSS for comment bubbles

If you want to have own bubble image, first you need to upload the comment bubble image to some server, to your Picasa web album, for example, and get its url address. I use this image

uploaded to my Picasa web album, its url is http://lh6.googleusercontent.com/-IVVxPuuguig/Tr_NWRIN3HI/AAAAAAAAAWs/weLvk3eWQtM/s800/comment_bubble.jpg.

Then go to Template designer, choose Advanced, Add CSS. Add the following simple CSS definition:

Data provided by Pastebin.com - Download Raw

Change image url, if you want, and image width and height. Paddings can be changed to change text position inside the comment bubble image. Apply to blog – comment bubbles are installed.

Pure CSS3 comment bubbles for Blogger

A week ago or so I implemented the comment bubbles for this blog. There are some comment bubble hacks for Blogger that use image, but I found none with CSS3 bubbles, so that is what I started from. I show in this article, how you can make CSS3 comment bubbles like this This is a comment bubble image, not done by CSS

This is a comment bubble image, not done by CSS

for Blogger.

"Pure" in this context means that I don't use images. I really don't know much CSS so I don't know if the product-dependent -webkit-, -moz- and -o- style settings are "pure CSS3" or not.

Browsers like Firefox, Opera and Chome already support CSS3, and soon also Internet Explorer will, so you might already want to have this clean CSS only solution in your blog. It also loads a bit quicker without external images that cause http request. This CSS solution degrades to quite nice looking and usable element on Internet Explorers (version 9 and below), too, see the end of this article.

Because CSS3 is not fully supported by Internet Explorer versions below 10, in this blog I expanded this CSS only solution to use image in IE8 and below, and CSS + gradient data URI in IE9. So this CSS only hack is not installed in this blog. I'll tell you about "pure image comment bubbles" and the combined solution in later articles.

Add comment count code

First we add the link to "post.url#comments" next to the post title, where link's text is the number of comments in that post. Open your template html, and expand widget templates. Find lines:

<b:includable id='post' var='post'>
  <div class='post hentry'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>

After those lines add (doubleclick to select for copying):

<b:if cond='data:post.allowComments'><a class='comment-bubble' expr:href='data:post.url + &quot;#comments&quot;' expr:title='&quot;Comments to &amp;quot;&quot; + data:post.title + &quot;&amp;quot;&quot;'><data:post.numComments/></a></b:if>

Save the template.

Add CSS for comment bubbles

I chose the colors for my bubbles like this, you might want to use some other colors that suit your template:

Go to Template designer, choose Advanced, Add CSS. Add the following CSS:

Data provided by Pastebin.com - Download Raw

Apply to blog. And you have your CSS comment bubbles!

This hack and Internet Explorer These bubbles are just an image, and not clickable CSS comment bubbles

These bubbles are just an image, and not clickable CSS comment bubbles

In IE7 and below the bubble is only a rectangle with borders and solid background color.
In IE8 the comment bubble has solid background color and no rounded borders.
IE9 does quite well, only the gradient background is missing (background is solid color).

Wednesday, November 16, 2011

Gradient PNG data URI maker reference

As I mentioned when I posted the new version of my AppEngine application, I also added a new feature to the application. When I was implementing the comment bubbles, I learned about data URIs (or data: URIs). Data URI is a Uniform Resource Identifier. URLs are URIs, too, only data URIs do not contain address to the data, but instead the data itself. For example, small images! Data URIs are supported by all major browsers and by Internet Explorer version 8 and higher.

Read more, blog article: Data URIs explained.
Convert any data to data URI: The data: URI kitchen.

I implemented the button gradient for IE9 using gradient PNG data URI. I made the PNG with GIMP, saved without any extra data, run "base64 gradient.png", added "data:image/png;base64," in front of the output and there was my data URI for CSS. Still, quite a lot of work, for example if you change colors, you have to do this all over again. I tried to find a tool to automate this, but did not find, so I implemented it in my Google AppEngine application.

The gradient tool uses url parameters, although I have also made a front end tool for it. Url parameters work like this:

http://avafavico.appspot.com/?c1=C1C1C1&c2=C2C2C2&h=H&w=W

C1C1C1 is top color (or left color in horizontal gradient), 000000-FFFFFF
C2C2C2 is bottom color (or right color in horizontal gradient), 000000-FFFFFF
H is gradient image height, integer 1-4096
W is gradient image width, integer 1-4096

Example: http://avafavico.appspot.com/?c1=ff0000&c2=0000ff&h=10&w=30
Gradient:

Data URI: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAKCAYAAACjd+4vAAAABHNCSVQICAgIfAhkiAAAACVJREFUOI1j/M/A8P8HAyfDdwYOBnrSTAwDBEYtHrV41OKhbzEAzUMfE4HBrHkAAAAASUVORK5CYII=

Usually either H or W is 1 to optimize png size, and image is repeated to make it fill the whole background of an element, in the example h=10 so the image can be seen better, but in production version you would use h=1. H x W cannot be more than 4096, but this should be sufficient.

You don't and cannot embed the call to gradient tool into your template or page. Instead, you use the tool, get the data URI and put that in your template/page.

→ Easy to use front end for gradient tool ←

Subscribe to:

Posts (Atom)

Pages

Monday, November 21, 2011

Sunday, November 20, 2011

Saturday, November 19, 2011

Friday, November 18, 2011

Thursday, November 17, 2011

document.write(postDate);

Wednesday, November 16, 2011