How to easily host web content on Google Drive

This article is deprecated, here's a message from Google:

---

Hello from Google,

We announced last year that we’re deprecating web hosting in Google Drive for users and developers. Our records show that you might have used this feature to publish a webpage or serve other web assets.

On Aug 31, 2016, we will discontinue serving content via googledrive.com/host/[id] and the webpages will not be accessible anymore.

As an alternative to web hosting in Drive, we recommend:

• Blogger—An easy and free way to host websites.
• Firebase Hosting— An alternative if you’re using the web-hosting feature to serve static webpages with items on Drive.

If you have additional questions or need assistance, please contact Google Support.

Sincerely,

The Google Apps Team

---

Last November (2012) Google announced that Google Drive can now host static web content, for example html pages, javascript files, and flash. Here's the article where they announced this: Announcing Google Drive Site Publishing, and here's the documentation: Google Drive SDK.

It all looks very good, you can programmatically make shared public folder for hosting and add content. But what if I just wanted to host some .js (javascript) files which I have ready? Must I write a program to implement this hosting? Fortunately, I don't.

Hosting web files on Google Drive

First you have to create a directory in your drive. It can be a subdirectory (of a non-shared directory), for example in the root I have sub directory "Web Hosting" (private dir) which has all the public web hosting directories I have made.

/Web Hosting
--/Google Drive hosting url tool
--/Some Other Web Project
--/etc...

After you have created the directory, you can upload files there. When you want to begin hosting those files, select "Share..." for the directory, and under "Who has access" change the directory to be public on the web. Copy the "Link to share" url from the sharing dialog.

To get the web hosting url, use this tool ("Google Drive hosting url tool" hosted under my Google Drive):



You can make the url manually, or use the Drive API and "webViewLink", but I made this simple javascript tool for the job. It is a hosting example at the same time.

Other options for web hosting with Google products

You can also use Google Sites to host your files. Google App Engine can be used, too, but that is a bit more compilicated.

Some tips for hosting on Google Drive

• Don't upload multiple files with same name (like two copies of index.html) under the same directory. Use the "Manage revisions" option.
• You can use subdirectories under your web hosting directories.
• Do you have a good tip for Google Drive hosting? Please post it as a comment.

Thanks to Ben for the article idea. :)

Update May 6th 2013:
Updated the tool to handle the new Google Drive sharing urls.

Templates: blogID in posts widget layout data tag

This might be quite new feature, I just discovered it today (by browsing through template sources): blogID is now available in posts widget in the layout data tag "data:top.id". So if you are making Blogger hacks or templates, you can use this instead of telling users to edit their blogID into the code.

Templates: Is comment author blog admin? An easy test

If you make Blogger templates or template based hacks, this info might interest you. In the comments section, usually in <b:includable id='comments' var='post'>, if one needs to check if the comment author is blog admin, often seen solutions include:

<b:if cond='data:comment.author == &quot;PUT_USERNAME_HERE&quot;'>

and

<b:if cond='data:comment.authorUrl == &quot;http://www.blogger.com/profile/01234CHANGETHIS56789&quot;'>

But the easiest way, and least error prone, is:

<b:if cond='data:comment.authorClass == &quot;blog-author&quot;'>

After realising this, I updated my How to Hightlight author comments in Blogger hack to use this easier method.

Tip: Anonymous avatar for new Blogger threaded comments

Update Feb 2nd 2012: Blogger has updated the threaded comments, and it now includes an avatar for anonymous commenters by default. So this is now obsolete.

---

Previously I've told how to use anonymous "mystery man" avatar in the "old" commenting system, article here. But if you start using Blogger's new threaded commenting system, that old CSS won't display the mystery man anymore.

To make anonymous avatar work for the new commenting system, I had to use CSS3. Most browsers luckily support it now. Here's a simple CSS3 definition, that puts the mystery man back into his place. Add this to your template's CSS section (you can use Template Designer|Advanced|Add CSS):

.avatar-image-container img[src$="blogblog.com/img/blank.gif"] { width:36px;height:36px;
background:url(http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=36) no-repeat center center;
}

(double click code to select for copying) This tip works for non-dynamic views. You can use a custom avatar instead of the Gravatar's mystery man, uploaded to your Picasa web albums, for example.

How to enable Blogger threaded commenting (on customized template)

Blogger announced threaded commenting today, as I wrote earlier. If you have customized your template, there is a chance that this threaded commenting does not work.

There is of course the possibility to reset the template, but then you loose all customizations. So here's how I could enable Blogger threaded commenting on blogs where it did not work, due to previous customizations.

First you should check, that you have embedded comment form enabled, and also full blog feeds. Without those settings the threaded commenting won't show. If they are ok, and still no threaded comments, you should edit the template.

Open template html for editing, and click "Expand Widget Templates". Find this code, it is either twice or four times in the template:

          <b:include data='post' name='comments'/>

Change every instance you find to this:

          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>

Save the template and test. If the previous changes were not enough, then you should see if this block of code is found, where threading javascript is included, and insert/modify it if necessary (search for <div id='comment-holder'>):

    <div class='comments-content'>
      <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threaded_comment_js'/>
      </b:if>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
    </div>

How to disable Blogger's new threaded commenting

As I wrote earlier today, Blogger has now threaded commenting. There are three ways (that I know) to disable Blogger's new threaded commenting, if you don't want it:

- Don't use embedded comment form,
- Disable per-post comment feeds in your blog, or
- Edit template html.

The easiest way is to change embedded comment form to popup or full page, or disable per-post comment feeds in your blog settings. But if you want embedded comment form and post comment feeds enabled, then you need to edit template. Note: these instructions do not apply to dynamic views.

For the template editing option, this has worked for me:

Open template for editing, and click "Expand Widget Templates". Find this block of code, which is there twice (for mobile and normal viewing), you can search for <b:if cond='data:post.showThreadedComments'>:

        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>

Change both the blocks to this:

        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<!--      <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/> -->
            <b:include data='post' name='comments'/>
<!--      </b:if> -->
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
<!--      <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/> -->
            <b:include data='post' name='comments'/>
<!--      </b:if> -->
        </b:if>

I.e. comment out the if-elses where "threaded_comments" are included, and include only "comments". Remember to do this twice, for both blocks of same code. To avoid extra javascript loading, search this line:

        <b:include data='post' name='threaded_comment_js'/>

and change to:

<!--    <b:include data='post' name='threaded_comment_js'/> -->

Save template. Now you should have the "good old" comments back with embedded comment form, and any modifications and hacks that were made to comments system.

Thumbnail on main page, bigger image on full post

You may have seen those fancy templates, that display on the main page a snippet of the post's text along with a thumbnail of an image inside the post. Maybe you want something like that only from time to time, so installing a new template for that would be overkill and maybe constrains your other options. I will show you how you can do it with a little javascript or CSS for example in Simple template.

Make a jump break jump to where you want to

Jump breaks are great, but the jump target is not always what you want: exactly at the place where <!--more--> was. Maybe you'd like to show the whole post instead. Here is a simple tip to alter the target position. You have to use the html editing mode for these hacks to work.

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)

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXUeVkaYpaU1R84h6lkvJuZTaCDcGScznbuJ1WFpDeyWrpmLD2Q3ODHGciDjwogIfvV_BXwS7TGCo3myvGUhsDAexe5gLanMi73A5zcZbYqd2jpom4N9gzvkQ04MMA6j-4_T41GddVrbc/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.

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.

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:

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.

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.

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?

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

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.

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.