Pages

Monday, October 31, 2011

23

How to autopost to Blogpost from RSS

Autoposting from RSS feed(s) is a much asked feature in Blogger. I will tell you here one way to accomplish this without third party services. You'll need some computing skills, I won't explain everything in detail, details can be found in other documentation.

First of all, you need the RSS feed or feeds, where the articles appear that you want to republish. You can combine multiple feeds into one using Google Reader, if you wish: group feeds together in a folder and make folder feed public and shared. But you don't have to combine feeds, multiple feeds are ok as is.

Don't steal other people's work. Before publishing content written by other's, you should ask permission for it, otherwise your blog may be reported and terminated. But maybe you want to aggregate your own posts from many blogs to one blog. And this can be done from other/mixed environments, like Wordpress.com, too, and to a hidden blog (visible only to you). Not from hidden blogs, though, because you need the feed. If you republish your own material, that is ok of course.

Blog settings and setting up rss2email

In the blog you want to publish, go to Settings | Email & Mobile. Set your secret email posting address by providing a secret word. Choose "Save emails as draft posts". You can change that to "Publish emails immediately" after you have directed feed(s) to blog and have everything working.

Rss2email is a free tool for delivering news from RSS feeds to email. Python is needed to run rss2email. Rss2email can be run in Windows and different UNIX systems.

Download, install and configure rss2email. I had to change the outgoing mail server settings and the email address of sender (DEFAULT_FROM) in config.py. I also configured rss2email to use html (HTML_MAIL = 1) and not to use stylesheet (USE_CSS_STYLING = 0).

In unix console, change to rss2email's directory, and execute commands:

./r2e new YOURNAME.YOURSECRETWORDS@blogger.com
./r2e add http://yourfeedurl.com
./r2e add http://yoursecondfeedurl.com
./r2e add http://yourthirdfeedurl.com

In Windows you would run r2e.bat instead of ./r2e. You need at least one feed url. Now you have your feed(s) ready for sending to blog.

Sending old (current) entries or not?

If you want to start feeding your blog with only new entries in the feed(s), run first:

./r2e run --no-send

That marks all current feed entries read. Afterwards run ./r2e in regular basis, for example from crontab.

If you want to send all entries, run "r2e run" already at the first time. But beware, there is a limit of about 30-50 posts you can send to Blogger in one day. One way to limit the posts is to add one new feed per day for the publishing email.

You can also publish single posts from a feed using Google Reader. View a post from the feed, select Send To, Blogger.

Double titles hacked away

To prevent "double titles" (first article title, then title with a link to the source) in the receiving blog, I did the following changes to rss2email.py (version 2.71), first around line 717, search for:
      content += '<h1'
      content += ' class="header"'
      content += '><a href="'+link+'">'+subjecthdr+'</a></h1>\n'
Add # in front of all 3 lines:
#      content += '<h1'
#      content += ' class="header"'
#      content += '><a href="'+link+'">'+subjecthdr+'</a></h1>\n'
and around line 748, search lines:
        content = ("<html><body>\n\n" + 
                  '<h1><a href="'+link+'">'+subjecthdr+'</a></h1>\n\n' +
                  entrycontent[1].strip() + # drop type tag (HACK: bad abstraction)
                  '<p>URL: <a href="'+link+'">'+link+'</a>' )
Add # in front of one line, like this:
       content = ("<html><body>\n\n" + 
#                  '<h1><a href="'+link+'">'+subjecthdr+'</a></h1>\n\n' +
                  entrycontent[1].strip() + # drop type tag (HACK: bad abstraction)
                  '<p>URL: <a href="'+link+'">'+link+'</a></p>' )

If you have different version, then you might have to change something else. The purpose of the changes is to remove <h1> title+link from the beginning of the email body.

Run rss2email automatically

And finally I added a crontab entry (crontab -e) to run the script once an hour (33 minutes past full hour), like this:

33 * * * * cd ~/rss2email-2.71/ && ./r2e run

In Windows you would use the Windows task scheduler and run r2e.bat. See more instructions in rss2email/getting-started-with-rss2email.

I have also subscribed the feeds to my Google Reader, so I decided not to publish the emailed articles immediately, but as a draft. This way I can also do some minor adjustments to the article before publishing, or choose not to publish the article at all.

Sunday, October 30, 2011

13

Better Recent comments gadget for Blogger

Update 12/29/11: A new recent comments gadget with avatars is installed on the blog, you might consider using it instead of this gadget.


Blogger Gadget directory has two recent comments gadgets, Top Comments by Ziyush and Recent Comments by Blogger Buster, but both suffer from same problems.

Bug: the anchor of the link to the comment is broken. It should be ...showComment=COMMENTID#COMMENTANCHOR but it is ...showComment=COMMENTID#comment-COMMENTANCHOR. When you have many comments, it would be really nice if the link took you to the right comment, not to the top of the page.

Bug: sometimes gadget does not show anything, sometimes load times are long. Annoying.

Bug/feature: Strings cannot be translated. I don't want in my Finnish blog to have texts "wrote..." and "Continue >>", but "kirjoitti:" and "Lue lisää >>" instead.

Bug/cosmetic: styles don't look good, not the same as in blog (for example all links are underlined).

Missing features: CSS cannot be modified. Post titles cannot be used. Customization very limited.

Missing feature: Always gets x number of chronologically latest comments, but what if you wanted the latest comments all from different posts, or if you wanted maximum of 2, or 3, comments per same post, to prevent one topic from "flooding" the recent comments?

Own gadget to the resque

Because of all this, I first used RSS feed gadget for displaying recent comments, until yesterday, when I started developing something better. My goal was to make a gadget, which has working link anchors, customizable CSS styles and allow translating the strings and allow other modifications, too.

Along the way I added the possibility to limit comments count per post to 1...[number of recent comments shown], and that is actually really great. You can also choose not to limit, when the 5 recent comments are fetched regardless of their posts. And, because I think no one had done it before in a javascript gadget, I also fetched the post titles for the comments :) Although I only use those in link titles (shown when user hovers over the link), but you can edit the code and show it in the link, for example, like "Gary commented on We're back in business!...".

Load times are way better and no "blank recent comments" have been detected with my gadged.

To use it, add HTML/Javascript gadget to your blog, and paste following code into it:

Data provided by Pastebin.com - Download Raw

This gadget is installed in this blog, too. In the gadget there are some easily configurable things, and of course you can change anything in the code, if you can...

You can configure CSS styles, number of recent comments (numRecentComments), length of comment excerpt (numCommentChars), maximum comments per post (numPerPost), texts (txtWrote and txtMore), and whether to load titles or not (getTitles; not loading them makes the gadget run yet a tiny bit faster).

If you want to customize the code, you can, but I hope you know your way around and can do it on your own.

Hope you like it! I do, but now I just cannot make up my mind, whether to set numPerPost to 1 or 2, with 5 recent comments... both good choices... Which would you use?
Update 11/02/11: This hack is no longer installed in this blog. I developed it further. I will post the new Recent comments in a while, stay tuned.
Update 11/03/11: A new gadget with avatars is installed on the blog.
Update 12/29/11: A new gadget with avatars (fetched differently) is installed on the blog.
Update Jan 2nd 2012: Deleted comments (This post has been removed by the author.) no longer have "alternate" link in comment feeds, like they used to, which can cause the recent comments to disappear. I modified the script to prevent this: line 69 is modified and line 76 is new.

Saturday, October 29, 2011

52

Prac's looping Picasa simple slideshow gadget

While I was developing my looping embedded Picasa slideshow, I was also searching for alternative slideshow viewers. I don't care too much about branding that appears in many slideshow services and gadgets. Then from Google Sites forum I found (nickname) prac's RSS slideshow gadget in this thread. Tried it, and it works very well in Blogger. Thank you prac, your gadgets are great.

I use the No Border version like this:

<iframe allowtransparency="true" frameborder="0" scrolling="no" width="600" height="420" src="http://www.gmodules.com/gadgets/ifr?url=https://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/picasa-slideshow-simple-nb.xml&up_CCOL=%23FFFFFF&up_SCOL=%23FFFFFF&up_PWH=560&up_PHT=420&up_DTime=3000&up_TTime=400&up_CLP=Yes&up_FEED=http://picasaweb.google.com/data/feed/base/user/mspotilas.fi/albumid/5650715941079457233?alt=rss&amp;kind=photo&amp;hl=en_US"><a href="http://picasaweb.google.com/mspotilas.fi/KevatKesa?authuser=0&feat=directlink#slideshow">Gallery</a></iframe>
<!-- Gadget Google - Diaporama Picasa Albums Web - http://www.liens-du-vin.ch/picasa-gadget-script.htm -->

Red parts you want to change, they are the Picasa web album RSS feed and Picasa web album (#slideshow) url, in case iframe is not supported. You must change all & characters to &amp; in the feed url (but not in album url)! You can get the links from Picasa Web albums, from right side bar "Link to this album" (add #slideshow to it to make a slideshow link) and "RSS" (the feed). And remember to change those &:s in the RSS feed url.

Green parts you may want to change: dimensions, background colors, slide time, transition time, and link pictures to gallery or not. I use white background, 3 second slide time, 400 millisecond transition time, link pictures (up_CLP) to Picasa web album. More of the parameters here (in French).

You can see the above code embedded here in action:

Friday, October 28, 2011

10

Loop embedded Picasa flash slideshow

Picasa Web Albums offer code to embed slideshows to your blog and web page. Unfortunately the embedded slideshow displays the pictures only once, then stops. User can restart the show, but due to a bug in the flash, clicking the play button also opens the Picasa Web album from which the slideshow is made. This can be confusing to user.

So I wanted the flash to loop. It starts running when it is initially loaded and after showing all images, it stops. What if the flash was reloaded then? I developed a solution based on this. This works on Blogspot blogs, and should work on standalone pages, too. When user clicks the flash at any time, the looping stops (it would be stupid to reload the flash while user is pausing the slide show to look closer to some picture) and looping won't restart until page is reloaded.

To make it work in your blog or page, first you need the looping functions I made. Edit your template or page html, find </head>, and put this code before it:

Data provided by Pastebin.com - Download Raw

Modify Picasa slideshow embed code

In Picasa web albums you can get the embed code for slideshow, which is something like this:

<embed type="application/x-shockwave-flash" [..code.cut..] ></embed>

To make it loop, append <img onerror="slideRun(this,28300)" src="..." /> to it, resulting something like this:

<embed type="application/x-shockwave-flash" src="https://picasaweb.google.com/s/c/bin/slideshow.swf" width="600" height="400" flashvars="host=picasaweb.google.com&hl=en_US&feat=flashalbum&RGB=0x000000&feed=https%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2Fmspotilas.fi%2Falbumid%2F5650714283562956577%3Falt%3Drss%26kind%3Dphoto%26hl%3Den_US" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed><img onerror="slideRun(this,28300)" src="..." />

This code you can embed into your post or page, see example.

28300 is timeout values in milliseconds, after which the flash is reloaded. If you have 3 second slide time (default), then good timeout (in ms) is: (number of images) x 3000 + 1300. Or for any slide time: (number of images) x (slide time) x 1000 + 1300. For example for 5 images: 5x3000+1300 = 16300. Test your own timeouts.

Although I did not test, I think that my code should be able to restart any embedded flash(es) on html page at given interval, not just Picasa slideshow flashes.

Customize the embedded slideshow

You can change the background color and time to show one image (slide time) by modifying the <embed>...</embed> code. To change background, find code

=en_US&feat=flashalbum&RGB=0x000000&feed=

Change the RGB value 0x000000 to what ever you like. 0xFFFFFF is white.

To change slide time, find code:

flashvars="host=

Add interval=#& after ", where # is number of seconds, resulting for example:

flashvars="interval=7&host=


Something better is coming along...

Embedded Picasa slideshow still flashes a bit (well it is flash application :) ) at startup and when flash is reloaded. I found a smoother slideshow, though harder to embed, from Google Gadgets. More about that in another post.

Monday, October 24, 2011

19

Backup your Blogspot blogs!

"Yes, I know, I should backup my blog more often, but..."

It is so difficult? If something goes wrong and your blog is lost, do you have anything (besides your memory, Google cache and maybe Web archive) to salvage your posts?

If your answers were "Yes" and "No", read on. I'll show you how to ease the pain of backing up Blogspot blogs.

What should you back up?

Blogger has a function for exporting and importing a blog. This export format (XML) contains all blog's posts and all comments of posts. So it is good to backup this export file. But this might not be enough.

Sometimes a single post may become corrupted. It may be overkill to restore that from an export file. Blog posts are stored in the blog feed, from which it is quite easy to pick single posts. So you may want to backup the blog feed, too.

Many bloggers have customized their blog's template and widgets. So full template html/XML should be backed up, too, and also the widget's data.

Last, but not least, your pictures and other media files. If you or some bug accidentally delete your Picasa Web Album or Google+ album for you blog pictures, they are gone from your blog. I feel a lot safer, if pictures are backed up, too.

How to do it?

When you are logged in, there are four urls you can use to backup your blog:

Export file url: http://www.blogger.com/feeds/BLOGID/archive
Blog feed url: http://YOURBLOGNAME.blogspot.com/feeds/posts/default?redirect=false&max-results=500
Template: http://www.blogger.com/html?blogID=BLOGID&action=download

You need to fix BLOGID and YOURBLOGNAME in these urls.

Backing up widgets using Blogger UI is laborious: you should click edit for each widget, copy its contents and store locally. I wanted something easier. And luckily I found a way to back up all widgets' data in one file, I think this is undocumented feature, but as long as it works, it is good for this purpose.

All widgets: http://www.blogger.com/feeds/BLOGID/widgets

Your blog posts probably have media files, images at least. I found at least two good ways to back up media from blog, both use Firefox web browser: FireUploader and DownThemAll!.

FireUploader is great for downloading your Picasa Web Albums to your local computer. If you have all your pictures in Picasa Web Albums, this might be a good choice. FireUploader logs in your Picasa account, displays albums as folders, and you can easily download singe files, single folders, multiple files and multiple folders from your Picasa Web Albums. Also upload and other services besides Picasa are supported.

DownThemAll! can be used to extract all media from RSS feeds. So, you can extract images from your Picasa Web Album, and also directly from your blog feed! Using blog feed as the source ensures, that all images in posts, also from different galleries (Picasa, Imageshack, Photobucket, etc), will be downloaded.

If you have some good solutions for Chrome, Internet Explorer and/or Opera for downloading media files, please leave a comment. :)

Update: Google Takeout is very good tool for backing up Picasa Web albums, too, see these comments.

Of course you can also install Picasa and use it to download you Picasa Web Albums.

Blog Backup Helper Gadget

If you have many blogs, then you have many sets of urls you need to download. Under linux you could script the whole thing and download xml/rss backups using wget. Although using linux, I did something different: coded a little javascript helper gadget, which can be installed in my (and your) blogs. It hides itself, when logged in user is not blog admin. When blog admin is logged in, it shows the four download links (export, feed, template, widgets). This same gadget works in different operating systems and in different browsers (tested on: Chrome, Firefox, Opera, IE).


Go to Design|Page Elements. Click Add Gadget in your side bar area. Select HTML/Javascript. Here are the contents of the gadget:

Data provided by Pastebin.com - Download Raw

I suggest you place this gadget as last gadget in your sidebar.

Blog Backup Helper, page version

Maybe you don't want to load backup gadget code on every page load into your sidebar. Then you can create a (hidden) page and put backup helper code there. Create a new page, called Backup, and paste this code in html edit:

Data provided by Pastebin.com - Download Raw

Restore strategies

Hopefully you'll/I'll never have to go here, but I outline some strategies for restoring data.

1. Restore single post HTML from blog feed backup
2. Restore single or multiple deleted posts and their comments by importing blog export file
3. Restore corruped template and/or widget using template backup and/or widgets backup
4. Restore deleted blog by restoring template, restoring widget data, importing blog export file
5. Restore deleted media files: re-upload files, fix references in your posts to new urls

Widget export file contains all widgets, with their html codes escaped. One easy way to copy widget codes from the file is to unescape the file contents, for example using un-escape tool, then copy/paste.

Sunday, October 16, 2011

40

Blogger posts from feed in chronological order

A while ago I did my Chronological post order hack, which simply reverses the order of the posts on the screen using javascript. That can be used to read the whole blog from start to end, like this.

Adam has in his Too Clever By Half blog a different solution that uses 3rd party services to manipulate and reverse the feed to be displayed in chronological order, but there are drawbacks in using (free) third party services.

A while ago the Blogger dynamic views were announced. Dynamic views use javascript and AJAX to read from blog feed, and display the entries.

All these things made me think, if the whole reversing thing could be done in Blogger, reading the feed and manipulating it by javascript, without third party services. And it could, I yesterday figured it out, see a demo here. I'll show you how you can do it. It is actually quite easy (once the code is ready), no template editing, for example.

Create a new page

Create a new page in your blog. Name it as you like. Edit the post as HTML (important!), and paste this code into it:

Data provided by Pastebin.com - Download Raw

There are some configurable values in the script, which should be self explanatory. If you want, for small blogs you can display all entries on the same page (tested with ~200 entries). The maximum number of entries that this script can display is 500, because of limitations in Blogger feeds. The actual amount may be lower, and it depends how many entries are left in your blog's RSS feed and some Google caches (includeHistoricalEntries). You cannot know, before you try. Formatting of the posts' header and footer is very basic, you can make it better if you want, add social buttons, etc.

Save and test. You can see it in action here: Chronological post order from feed demo.

Not everything can be displayed, for example dynamic content that is generated by javascript. This is a limitation of (Blogger) feeds. That is why some code examples (pastebin.com snippets) don't show in the demo. If you need to display javascript content, too, then you'll better use the other chronological post order hack.

Reference: Google Feed API.

Update March 22th: Google loader no longer need API key. Article and code snippets simplified. Thanks to Adam who tipped me about this in comments. :)

Friday, October 14, 2011

1

Publishing syntax highlighted code in Blogger

This was tougher than I first thought. I thought that I'll just install SyntaxHighlighter, and that's it. But not quite.

First I installed SyntaxHighlighter 2.x, according to some instructions on the net. It had some problems, so after a few days, I switched to newest version, 3.0.83.

Publishing code between <pre> tags is a bit problematic alltogether. One must escape some characters, like > and < to &gt; and &lt;, to allow for example html to be shown. So there's always this extra step.

The most problematic thing with SyntaxHighlighter is that it changed left intendation spaces to non breaking spaces. That is mainly cosmetic, but can result in nasty looking &#160;:s in template, although harmless. As some sort of a perfectionist I could not let this be.

So my final (at least at this point in time) solution, which I came up yesterday, is to use pastebin.com to host those (longer) code snippets, that are supposed to be copied by user. Other codes may still be shown by SyntaxHighlighter. I styled SyntaxHighlighter and Pastebin codes to look similar.

Example, first pastebin:

Data provided by Pastebin.com - Download Raw

Then SyntaxHighlighter:
<script type='text/javascript'>
//<![CDATA[
// make pastebin.com raw links open in target="_blank"
  var clss = document.getElementsByClassName("embedFooter");
  for (var x=0 ; x < clss.length; x++ )
  {
    var child = clss[x].firstChild;
    while(child) {
      if(child.nodeType == 1 && child.tagName.toLowerCase() == 'a')
        child.target="_blank";
      child = child.nextSibling;
    }
  }
//]]>
</script>
Internet Explorer needed some styling for its own, that one I figured out this morning, there was for example a persistent vertical scrollbar on SyntaxHighligter code snippets. But I got those sorted out. Finally I coded the above script to make the "Download Raw" link open the code in a new window.

The best way for user to copy pastebin codes is to click the Download Raw link, and to copy SyntaxHighlighter codes is to doubleclick the code. Of course mouse selection and copy can be used, but depending on browser that might also copy the line numbers. Hopefully my blog's readers are able to figure these out.

Wednesday, October 12, 2011

0

In Blogger: Make blogs, not problems

In Blogger support forums you can daily read how someone has lost his post due to editor constantly autosaving the draft, or blog layout is broken after trying some hack. Can the post be recovered - no. Layout fixing - stressful work, your users see broken blog, etc. These problems can be avoided or diminished very easily. If you try to work on one blog only, chances of loosing data get higher. Appreciate your work and efforts and do not put all the eggs in one basket.

Blogger is a platform for making blogs. Blogspot blogs are free. So make blogs instead of problems. Don't use your "main blog" to try all the hacks out there. Make a blog for that, call it your "beta blog", for example. Tired of loosing a post text because of autosave? Make a blog for pre-publishing posts, "prepub blog". There you can publish already the very first draft version, after which the autosave is turned off while editing the post. After text is ok, copy text to your main blog and publish.

Prepub blog can also be a great place to develop ideas for blog posts. You can publish there your draft ideas without "filtering" them. Just pick the good ones for further editing and publishing in main blog. Your existing posts can be exported from main blog and imported into background blogs for test data. Your template html can be copied to background blogs, too, you don't have to make all changes from the start.

Note: if you upload images to your post in prepub blog, they will be placed in prepub blog's Picasa album, so you should not delete this album or pictures in it. Alternatively you can just work on the text in your prepub blog, and upload the photos in your main blog before publishing.

You can leave those background blocks out of Blogger's listings and keep search engines out. You can also make them completely private, if you want, you being the only one who can view (prepub could be like this).

Your blogs could be for example:

myblog.blogspot.com
myblog-beta.blogspot.com
myblog-prepub.blogspot.com

Specific addresses may not be available, but for background blogs the url is not so important anyway. And you don't have to stop there, at three blogs. Make blogs as many as you think you need. Do not compromise a single copy of information.

What do you think?

Tuesday, October 11, 2011

9

Follow post's comments by email in Blogger

"Isn't this a built-in feature?" Yes and no. You can have post comments delivered to your mail, if you have Blogger/Google account, but not if you are OpenID, non-registered or anonymous commenter. There is the Subscribe to Post Comments (Atom) -link, maybe spiced up with RSS icon, but many people don't know what to do with that feed link. So something more user friendly would be nice.

With this little hack you can offer your reader an easy way to subscribe to new comments of a post and get them delivered to reader's email. I use blogtrottr.com feed-to-email service in this hack. I wanted to place the email subscription form beneath the RSS link, which was bit tricky but succeeded. Because RSS feed url opens in new window (target="_blank"), I made the form open its results in target="_blank", too.


Installation is easy, if you know your way around. Open template html for editing. Select Expand widget templates. Search lines:
    <!-- feed links -->
    <b:include name='feedLinks'/>
After those line add:

Data provided by Pastebin.com - Download Raw

Now your readers can subscribe to those posts' comments they are interested in. It works either by user entering email address in the form (form has very basic email validation) and clicking the subscribe button, or just by clicking the button, which opens Blogtrottr page where email is asked.

You can test this and my other comments hacks at Playground for Blogger threaded comments.

Monday, October 10, 2011

0

Tip: Add avatar for anonymous commenters in Blogger

Seen this man?


Probably. That is the "mystery man" gravatar, widely used in different blogging systems as an avatar of non-registered and anonymous users. Not in Blogger, though. So, if you allow anonymous or non-registered comments in your blog, you might want to use this tip.

You can get the anonymous avatar to your blog by simply adding some CSS to your template (layout templates). You can do it by editing template html or through Template Designer: Select Advanced, Add CSS. Add this CSS to your template:
.avatar-image-container.avatar-stock img { 
background:url(http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=33) no-repeat center center;
width:35px; height:35px; 
}
If you want custom avatar instead of the mystery man, change url http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=33 to your custom image url (uploaded to your Picasa web albums, for example).

You can see this working in Playground for Blogger threaded comments.


2011-Dec-25 update: changed "width:37px; height:37px;" to "width:35px; height:35px;".
Update Feb 2nd 2012: Blogger threaded comment has now this anonymous avatar, so you might consider using it: http://img1.blogblog.com/img/anon36.png

Sunday, October 9, 2011

2

Collapse and expand individual Blogger comments hack

When a post has many comments, reading them, keeping track what's read and following threads of conversation may be difficult. After making the threaded comments hack, I was thinking if one could make the texts of all comments collapse, so that the "flow" of conversation could be seen, it would make easier to follow conversation and find/navigate to particular comments. User could also expand the texts of all comments, and collapse/expand single comment's text.

A hack that would do those things was not found ready. So I had to code one myself (well I probably would have done it anyway). I first did it to use "pure" javascript and div show/hide, but then I made an option to use jQuery and smooth transitions, which in the end looks really great. But you can choose to opt out the jQuery, if you want, it still works.

Before installing this hack you need to install my Highlight author comments hack. We use those comment wrapping div:s created in that hack.

Open template html for editing. Click Expand Widget Templates. Insert this code before </head> (leave out first line if you don't want jquery):

Data provided by Pastebin.com - Download Raw

After inserting that code, find lines:
<b:includable id='comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
After those lines add:

Data provided by Pastebin.com - Download Raw

Next line contains <H4>. Change that <H4> to:

<h4 style='width: 50%;'>

Find lines (added in Highlight author comments hack):
              &lt;div class=&#39;admin-comment&#39; id=&#39;x<data:comment.anchorName/>&#39;&gt;
            <b:else/>
              &lt;div class=&#39;normal-comment&#39; id=&#39;x<data:comment.anchorName/>&#39;&gt;
Replace those lines with:

Data provided by Pastebin.com - Download Raw

Save template. Now the hack already works, you can test it.

But let's add some visual clue when mouse cursor is over a comment so user is encouraged to click it to hide/show comment's text. I made that by adding hover effects to comment wrappers. I also styled the normal-comment spacing to be same as admin-comment's.

Open Template Designer. Select Advanced, Add CSS. Find the CSS you added in Highlight author comments hack, something like this:
.admin-comment {
background: #F4F4F4;
margin-top: 6px;
margin-bottom: 6px;
padding: 3px 3px 0 3px;
border: 1px solid #EDEDED;
}
(you can do this also in tempate html editing mode, if you know what you're doing)

Replace that with:
.admin-comment {
background: #F4F4F4;
margin: 4px 4px 4px 0;
padding: 3px 3px 0 3px;
border: 1px solid #EDEDED; 
}
.admin-comment:hover {
background: #EDEDFF;
border: 1px solid #D0D0FF; 
}
.normal-comment {
margin-right: 4px;
padding: 3px 3px 0 3px;
border: 1px solid #FFFFFF;
}
.normal-comment:hover {
background: #F8F8FF;
border: 1px solid #EDEDFF; 
padding: 3px 3px 0 3px;
}
.comment-footer { margin-bottom: 4px; }
I also fine tuned margins in this CSS a bit. You may want to adjust color details etc. according to your blog styles. I have again installed this hack on this blog, so you can see it in action, for example here. Although not necessary for this hack to work, I recommend you to install also my threaded comments hack.

Option: comments closed initially

If you want the comments to be closed when the post is opened, edit html and put this before </body>:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
  hideComments();
</script>
</b:if>

0

Add RSS icon to feed link in Blogspot footer

I've seen many complaints that Blogger does not offer user the possibility to follow comments in a post, that user has commented. Well, it kind of does, via RSS feed, but this is often not noticed. When viewing a post, there's a feed link in page footer, but it is in small text not easily recognized. My tip to make it more visible is to add RSS icon to the link.


This hack also adds RSS icon to other pages' feed links in footer, for example in front page the link to the blog posts' feed.

Here's how you can do it: Open template html, select Expand Widget Templates. Search for line:

     <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>

Change to:

     <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><img src='http://img1.blogblog.com/img/icon_feed12.png'/> <data:f.name/> (<data:f.feedType/>)</a>

Save.

Friday, October 7, 2011

34

Threaded commenting with Blogger native comments

Update January 18th 2012: A newer and easier to install version 2 here, you should consider using it.

Threaded commenting is a much wanted feature in Blogger. There are 3rd party commenting solutions with threading. Wordpress has threaded commenting built in. But what about threading in native Blogger comments?

When googling Blogger comments hacks, for completely other reasons, I came across this Threaded Comments in Blogger article. However the hack looked a bit complicated, template needed big changes, and I did not want that. And, according to some comments, installation to new templates was not straightforward. I thought, maybe it could be done with fewer changes and code that was easier to maintain. I felt like my mind could not rest before I figured out how to do it. :) So I had to find a solution, and finally I did, here it is. Thanks to Sham for the idea.


This hack works for the (current) layout templates (October 2011). Don't know about classic templates. Does not work with dynamic templates, because they display comments completely differently, getting their data dynamically from comments feed.

How to install Threaded comments

Update January 18th 2012: A newer and easier to install version 2 here, you should consider using it.

You must install my Highlight author comments and Reply to comments hacks first. After installing those, edit template html, and paste this just before </body>:

Data provided by Pastebin.com - Download Raw

In the script there are two values, 300 and 20, that you can change to control the maximum indent amount (300 in my code) and the indent of one "step" (20 in my code). Defaults should be quite good. You can also change these values afterwards.

Save template and enjoy. It is almost like magic :)

Code "threads" the comments either by parsing link <a href="#link to comment"... or by parsing @username from message field. A reply containing "@username" is positioned after latest username's comment (which timestamp in earlier than in reply) or for immediate previous comment, if it is from username, on the list before reply.

If you just want to test how the threaded comments work, please don't do it in this post, I will delete totally irrelevant comments. But you can do the testing here: Playground for Blogger threaded comments. Thank you.

27

Playground for Blogger threaded comments

You can test my threaded commenting hack (v2) in this post.

Thursday, October 6, 2011

0

Reply to Blogger comments hack

Update January 18th 2012: A new and easy to install threaded commenting hack version 2 includes this hack's functionality, you might consider using it.

There is one hack with variations circulating in internet which gives you the opportunity to reply to individual comments in Blogger. There are some shortcomings in that code. It always uses a popup and the popup does not position (scroll) to the comment form when opened, this is a bug and annoying if there are many comments. You can correct it by changing https to http, after that it jumps to the anchor as it should. From this exactly same bug you can tell that all the variations of that hack are from the same source.

Not satisfied with code quality ;) and windows popping up when I did not want to, I did my own hack.

With popup and full page commenting the code uses either popup or full page, which ever the blog uses. With embedded comment form text cannot be injected into iframe (from another domain), so separate comment page is opened (not popup). Comment form is prefilled with @ + link to the comment the user is replying to.

How to install

Open blog template html for editing, expand widget templates. Search line that contains:

<data:commentPostedByMsg/>

Just after that paste the following code, but change 12345CHANGETHIS6789 to your blog's id number. You can find your blog id by going to Design, it is in the url: http://www.blogger.com/rearrange?blogID=HEREISYOURBLOGID (old interface) or http://www.blogger.com/blogger.g?blogID=HEREISYOURBLOGID#template (new interface). And here's the code:

Data provided by Pastebin.com - Download Raw

Remember, change the blog ID! It is there in the url when you are editing the template, too. Save, and you're done. You can style the CSS class "comment-reply-link", if you like, but it is not necessary. With CSS you can have hover effect for the link etc. You might also want to use an image instead of the [reply] text.

2

The ultimate hack for broken Blogger navbar search

My first workaround for navbar search was not too shiny: it redirects user to google search with the keywords user entered, search limited to your blog. Works though. But I wanted something better, and finally came up with this hack. For this hack you need custom Google search installed in your blog, see How to add Custom Google Search to your Blogspot blog. You also better have getElementsForClassName installed for better old browser support, and count blogger posts on page hack.

This is quite a long story, so to get you motivated, I'll first show you how it works. With keyword "bedica" the "original" navbar search found nothing from my MS-potilas blog (in Finnish), but with my hack, it looks like this:


Navbar search has had problems since 2009. Also the search gadget is now broken (broke this year). Search gadget can be replaced by custom Google Search, but what about navbar? We certainly don't have access to the code that searches the posts.

So, the (broken) search executes when user tries to use the navbar search, without us having any control. But, we can do things after that, when the results, or no results, are displayed. That is what my hack is based on.

Start with these:

1. Know your way around
2. Install getElementsForClassName function
3. Install Count Blogger Posts on Page hack
4. Install Custom Google Search in your blog. Test that it works.

After successfully completing these steps you have done most of the work already :) Now edit the template html. Find </head>, and before that add:
<script type='text/javascript'>
var searchPhrase = "";
var customSearchControl = null;
</script>
You can also add those two variable definition lines into some existing <script> block there before </head>, if you want. Then, find </body> and before that add:

Data provided by Pastebin.com - Download Raw

Save template, then open page elements. Open custom search gadget (HTML/Javascript) you made. In that code change: var customSearchControl = ... to customSearchControl = ... (i.e. remove "var" from that line). Don't alter the rest of the line. Don't add the ellipsis.

Then, after line:
    customSearchControl.draw('cse', options);
add:
    if(searchPhrase != "")
      customSearchControl.execute(searchPhrase);
For a nice finishing touch, let's make the search result links open in the same window. This also applies for the sidebar search gadged, naturally, because we're editing it's code. After line:
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
add:
    customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_TOP);
After those modifications the code looks something like this (don't copy this code directly, this searches my Finnish blog, no use for you), changed/added lines highlighted:
<div id="cse-search-form" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : 'fi', style : google.loader.themes.MINIMALIST});
  google.setOnLoadCallback(function() {
    customSearchControl = new google.search.CustomSearchControl('014531972749200972566:g5b3gu6awfk');
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_TOP);
    var options = new google.search.DrawOptions();
    options.setSearchFormRoot('cse-search-form');
    customSearchControl.draw('cse', options);
    if(searchPhrase != "")
      customSearchControl.execute(searchPhrase);
  }, true);
</script>
Save gadget and you're all done.

Interesting detail discovered during coding: In Firefox, Chrome and Opera the customSearchControl is created after the before-</body> script is run. In Internet Explorer customSearchControl was created before the script is run. That's why we need the execute function in both places (script & gadget), so we can run it when customSearchControl is created and we have the search keywords. Both are needed, and we cannot be sure, which is set first.

Now when you use navbar search, in the search results first are google results, and after those are, if any, navbar's own findings. If navbar search did not find anything, the "No posts found" text is removed (this needs the post count hack). In this blog the navbar search happens to work pretty good, but I'll install this hack here anyway for demonstration.

Update January 20th 2012: You might be interested in adding a clear results button to the search results, hack here.
Update March 2012: Commented nine (line 24-32) lines from the source, if you had this installed you might want to do the same. By commenting the lines, the new "Sort by date" link is not hidden.

Wednesday, October 5, 2011

33

How to Highlight author comments in Blogger

Update Jan 17th 2012: now uses simpler code.
Update January 18th 2012: A new and easy to install threaded commenting hack version 2 includes this hack's functionality, you might consider using it.

There are some highlight author comments hacks out there, but most I've seen check only that comment author name is something. It is better to check the author url (so anonymous user's won't disquise as you so easily), which my hack does. But it is easiest to use the variable "data:comment.authorClass" – for blog authors it is set to "blog-author", and we can check that. Basically my hack puts all "user comments" into div with class "normal-comment", and "admin comments" into div with class "admin-comment".

Edit your template html. Select Expand Widget Templates. Find line:
          <b:loop values='data:post.comments' var='comment'>
After that add:

Data provided by Pastebin.com - Download Raw

Remember to change the url between the &quot;s to your profile page url. In the old code you needed to change the url, in this new code you don't have to change anything. Then find lines:
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
(you can search using the first line). Just after those lines add:
            &lt;/div&gt;
Then save the template. Now we need only to style the admin-comment to look different. Go to Template Designer, choose Advanced, Add CSS, and add following:
.admin-comment {
background: #F4F4F4;
margin-top: 6px;
margin-bottom: 6px;
padding: 3px 3px 0 3px;
border: 1px solid #EDEDED;
}
And then to the testing. You can style admin-comment background otherwise, if you like, using CSS. I have installed this hack on this blog.

Tuesday, October 4, 2011

210

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.

Monday, October 3, 2011

11

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.

0

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

Sunday, October 2, 2011

1

"# 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?

Saturday, October 1, 2011

41

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.

60

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

1

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 :)
See the hack
for this dynamic
views icon: