Shuffle Blogger Popular Posts

Blogger's popular posts gadget is a great way to introduce more interesting topics in your blog to an occasional reader. The gadget uses blog statistics, and the most popular post (from the chosen period or all time) is displayed first, second popular is second, etc.

The gadget is really great, but I missed some features. If you have always the same list in the same order in your sidebar, users very quickly ignore it. But if you shuffle the entries, the list looks fresh every page load. And I could not tell, which one of my most popular posts is the best, they are all good ;) and so random order suits them better.

So my first hack (more coming along) for the Popular Posts gadget randomizes the order of the popular posts. You can install this by adding extra HTML/Javascript gadget in your sidebar or paste the code to an existing gadget (the gadget must be after the popular posts gadget!), or you can put this code in your template html, just before </body>.

Data provided by Pastebin.com - Download Raw

I use a simple but effective Fisher-Yates/Knuth shuffle to shuffle the posts. You must have jQuery loaded in your page for the code to work. If the script did nothing to your popular posts list, try adding the following code, which loads jQuery, in your template before </head>:

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>

I'm very pleased with the result of the hack, and hope you like it, too. You can see a working example of this in my MS-potilas blog ("Popular Posts" is "Suositut artikkelit" in Finnish), and later I'll install this also on YABTB (now installed).

Gadget tabifying widget for Blogger

Sidebar gadgets may be an important part of your blog. There are literally hundreds of different gadgets you could have in your blog. But the size is kind of limited, if you have too many, users might not scroll pages after pages to see what gadgets there are. I have had one hack in mind, that would collapse/expand single gadgets, when user clicks on the gadget title, to save space so user finds the gadgets easier. I started playing around with this idea, hiding and showing the gadget divs... And then I realized...

If I have say four subsequent gadgets, and I hide three of them and show only one at a time, it is like showing one page of four gadget pages. And a good UI component for selecting one of several pages is "tabs". So my idea of one hack turned into another: tabbed sidebar gadgets (I still might do the collapsing gadgets some day, too).

Some coding, and my javascript widget that tabifies other gadgets (gadget tabifying widget) was ready for testing. Look at this picture:

See how much vertical space is saved! A couple of these tabifying gadgets, and your new sidebar could be just a fraction of the old sidebar. You can see a working demo in my other blog, MS-potilas (blog is in Finnish). Later when I have time I will install these tabbed gadgets on this blog, too.
(Dec 4th 2011: installed on YABTB.)

The tabifier script

You have say 2–5 gadgets that you want to tabify (turn into "tabs"). Place a HTML/Javascript gadget just above them, and in the gadget put my code. You may give the gadget a title for housekeeping, by default the script hides it when run.

Script does not need jQuery library, which is often used in making user interface tabs. I wanted a clean and light, low level approach, and learn more, so I coded it just using CSS/html and javascript without any libraries.

Data provided by Pastebin.com - Download Raw

Script configuration

There are some configurable variables in the beginning of the script. But first, if you use more than one set of tabs in your blog, for the second gadget, you must do a search and replace, and replace all instances of "tabnav0" by "tabnav1" (and "tabnav2" in third tab set, etc) in the script.

Configure the number of gadgets you want to tabify. By default the tab titles are taken from gadget titles, which are then hidden by the script. Short titles are preferred, so the tabs don't span on several lines, which does not look good, works though. If you want, you can specify the tab titles in the array tabnav#_tabtitles, so you don't have to shorten the titles of the actual gadgets.

You can also style the tabs using CSS. Every tabset has different IDs and so can have different styles. I've added some simple grey gradients to the tabs, which I made using my gradient png data URI maker, but the tabs look ok without gradients, too.

Nested tabs

My tabbed gadgets can be nested. But if nested, the gadget that contains another tab set must always be the last tab of the "upper" tabbed gadged. And also increase the two z-index values by one in CSS of the inner tabifier script(s), so they are rendered better. I suggest you to not use nested tabs, because the user interface might get confusing to the blog reader.

Another tabify gadgets implementation, using jQuery

I googled for other tabbed gadgets' implementations, and found one at Blogger Sentral: The easiest tabbed content widget for Blogger, demo here, which looks very good. It uses jQuery to draw the tabs and is quite different from mine. You might want to check out that one, too, and decide whether use that script or mine. There is also much other interesting stuff @ Blogger Sentral.

New info January 30th 2012: Gadgets with iframe and Internet Explorer 9

This hack hides "hidden tabs" (gadgets) using CSS display:none. In Internet Explorer 9 for some reason, if gadget has an iframe, it won't be shown. You can specify your blog to use Internet Explorer 8 document mode, if you have iframe-containing gadgets you want to tabify. I.e. in the <head> section, there should be line:

<meta content='IE=EmulateIE8' http-equiv='X-UA-Compatible'/>

Or don't tabify iframe containing gadgets. If you do, make sure you test it with Internet Explorer. This might be related to this feature, but my script is not altering the DOM, only visibility, so I'm not sure. If you have some clue why it does not show in IE9 document mode, please let me know.

---

A small visual update, May 6th 2013:: Fade in effect for tabs, see the hack.

---

CSS styling with gradients

A little while ago I made my gradient PNG data URI tool for the comment bubble CSS. Gradients can be used many ways in CSS. I just styled two elements on this blog, the sidebar gadget titles, and the search button(s):

I just quickly made some gradients using the colors in my blog – and here is the CSS for these:

.sidebar .widget h2 {
padding:1px 0 1px 3px;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAABCAYAAACbv+HiAAAABHNCSVQICAgIfAhkiAAAAGRJREFUKJGdkkEOgCAMBGf5/0t8nF/QA7ExUJfKiZQJ7YStzoMLBGr0U4DQU8ddC0bCZFi8e3EZls2RYeOcbffJwbmPvZz72qHknvh9u+d+pZw23eecfL4q/t+vHXPui3yzHbsBQ9wD/WdajeAAAAAASUVORK5CYII=) 100% 100%;
}
input.gsc-search-button {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAYAAACgXdXMAAAABHNCSVQICAgIfAhkiAAAACFJREFUCJljeLeK4T/Tj18MDEzffzEw4GH9xCtLLAufKQB+SDdFA0XBigAAAABJRU5ErkJggg==) 100% 100% !important;
}

(double click to select for copying)

Second quickedit pencil for Blogspot post

I have sometimes chased the quickedit pencil from the bottom of the post, to edit the post. Especially if you have many comments on a long blog post, the pencil is somewhere in the middle of the page, and can be a bit tedious to find. I have often thought, that only if the quickedit pencil would be at the top of the post...

Yesterday I saw a feature suggestion in Blogger forums for a second quickedit pencil. So someone else had chased the pencil, too. :) This finally gave me the push to make this simple hack. It adds a second quickedit pencil to the upper right corner of a post.

Installation is easy. Open your template html, click Expand Widget Templates, find line:

<b:includable id='post' var='post'>

And just after that line, add this:

<!-- extra quickedit pencil / MS-potilas -->
<span style='float:right;margin-right:-25px;'><b:include data='post' name='postQuickEdit'/></span>

or add this, if you want the extra pencil only to appear when post page is opened (not shown on front page):

<!-- extra quickedit pencil / MS-potilas -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span style='float:right;margin-right:-25px;'><b:include data='post' name='postQuickEdit'/></span>
</b:if>

Save template.

Note, that quickedit pencils are displayed only when administrator is logged in and viewing the blog. So you won't see the pencils on this blog, just on your own blog(s).

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

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>

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.