Add post titles, thumbnails, and summaries to Older and Newer Post links

By default Blogger shows links to Newer Post, Home, and Older Post at the bottom of a post. There are hacks that add post titles to those links, couple by me, too, here's the latest: Add Post titles to Older and Newer Post links – reloaded. In one comment I was asked if it would be possible to display also thumbnail and post summary. It is.

I have installed this hack in my MS-potilas blog, which is in Finnish (you'll see the idea without understanding the language):

Demo

Installing the hack

You need to edit your blog's template. I use jQuery in this hack, so you need jQuery. If you already have it loaded, you can leave the first line out of the hack.

Open blog's template, and put this code before </head>:

Data provided by Pastebin.com - Download Raw - See Original

If you have any previous hack for Newer/Older post links, remove it. Save the template and test.

Configuration

You can configure the following javascript variables:

maxSummaryLength - how many characters can summary text be
olderLink - contains the template for older link
newerLink - template for newer link
defaultOlderImage - if older post has no thumbnail, use this image instead
defaultNewerImage - if newer post has no thumbnail, use this image instead

In olderLink and newerLink templates you can use html and fields [title], [date], [datetime], [img], [thumburl], and [summary]. You can also edit the CSS to make everything look different. Hope you like this hack!

Hiding posts from Blogpost home page

I started doing this hack after I got a question if it is possible to hide blog posts from home page or not. And it is, with quite easy template modifications.

You must have a list of urls to the articles you want to hide from home page. Use the "blogspot.com" domain in the urls, not the local ones (like "blogspot.fi" in Finland).

I will hide one post, url is http://yabtb.blogspot.com/2013/09/test-post-hidden-from-home-page.html

Go to design, Template, Edit HTML. Select Jump to widget, "Blog1". Search for line:

<div class="date-outer">

Replace that line with either this code:

<div class="date-outer"
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <b:if cond='data:blog.searchQuery == &quot;&quot;'>
    <b:if cond='data:blog.searchLabel == &quot;&quot;'>
            <b:if cond='data:post.url == &quot;http://yabtb.blogspot.com/2013/09/test-post-hidden-from-home-page.html&quot;'> style=&#39;display:none;&#39;</b:if>
            <b:if cond='data:post.url == &quot;ANOTHER ARTICLE URL&quot;'> style=&#39;display:none;&#39;</b:if>
          </b:if>
          </b:if>
          </b:if>
       &gt;

or this code:

<div class="date-outer"
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
            <b:if cond='data:post.url == &quot;http://yabtb.blogspot.com/2013/09/test-post-hidden-from-home-page.html&quot;'> style=&#39;display:none;&#39;</b:if>
            <b:if cond='data:post.url == &quot;ANOTHER ARTICLE URL&quot;'> style=&#39;display:none;&#39;</b:if>
          </b:if>
       &gt;

First code hides articles from the home page (yourblog.blogspot.com) and the older posts' pages, when you click "Older posts" on the home page. This is probably the option you want.

Second code hides articles just from the home page (yourblog.blogspot.com).

If you have three articles you want to hide, make three lines starting with <b:if cond='data:post.url == &quot; (lines 5-6 in the code snippets). Edit your urls carefully to the lines.

Save template. Test.

Hack is installed on this blog, and it is hiding this post http://yabtb.blogspot.com/2013/09/test-post-hidden-from-home-page.html from the home page of this blog.

If you have articles published on same date and you wish to hide one of them, you should install my Show date on all Blogger posts within same date, or edit the date of the article to be hidden.

Test post hidden from home page

This is just a test.

Small update (visual improvement) for my tabbed gadgets

I made my gadget tabifying widget back in 2011. Today I saw another implementation, and it had nice fade in effect. I remembered that I had used also jQuery in the tabifying widget, and that jQuery has nice functions for fading. So I decided to try and tweak it a little. The result can be seen on this blog: click on the tabs on right sidebar (for example, About me, Followers, Subscribe to) and notice the smooth transition. :)

(This won't work with nested tabs, but I don't recommend using them in the first place, because nested tabs can be confusing to user.)

If you have my tabbed gadgets hack installed, you can make the same changes. It is quite easy:

1. Open the tabifying gadget for editing. Make a backup of the working script before making changes.

2. Find line (near line 105):

  for(var i = 0; i<tabnav0_tabids.length; i++) {

3. after that add this line:

    if(tabnav0_tabids[i] == nimi) continue;

If you have multiple tab sets, and you have tabnav1_tabids instead of tabnav0_tabids, use tabnav1_tabids in the added line, etc.

4. Then find this block of code (near line 111):

  toshow = document.getElementById(tabnav3_id).style.display;
  document.getElementById(nimi).style.display=toshow;
  if(tabsIDs[nimi])
    document.getElementById(tabsIDs[nimi]).style.display = toshow;

5. Replace that block of code with this:

  $("#"+nimi).fadeIn(300);
  if(tabsIDs[nimi])
    $("#"+tabsIDs[nimi]).fadeIn(300);

6. Save the gadget.

If you want, you can adjust the fade in time, now 300 (milliseconds), I think 200 to 600 milliseconds is good range. Hope you like it! :)

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.

Small update to my threaded comments hack v2

If you have my threaded comments hack v2 installed, and it stopped threading the comments, it is because Blogger changed the navbar iframe src attribute handling. Seemed to happen yesterday. To fix that, edit the template and find line 235 of the hack, which used to be:

var cfeedbase = 'http://'+window.location.hostname+'/feeds/'+$("#navbar-iframe").attr("src").match(/targetPostID=([^&]*)/)[1]+'/comments'

and change it to:

var cfeedbase = $('link[href$="comments/default"]').attr("href").split("/default")[0];

(all in one line)

The source code has been updated in the hack's article.

Resize Blogger popular post thumbnails

I got a question in a comment how to change the thumbnail size in Blogger popular post gadget, in my Trim Blogger popular post snippets right article. Here's how to do it, hack is similar to my previous popular post hacks.

You must have jQuery loaded in your page for the script to work. Check your template, and if it does not have jQuery, insert this before </head:>

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

You can install this hack by adding an extra HTML/Javascript gadget in your sidebar, or paste the code to an existing gadget. The gadget must be after the popular posts gadget! Or you can put this code in your template's html, just before </body>. If you have my other popular post hacks, like shuffle, shuffle and limit or Trim Blogger popular post snippets right, you can put this code in the same place, after those hack's code.

Data provided by Pastebin.com - Download Raw - See Original

In the script there is the variable var newSize = 100; which defines the new size for thumbnails. You can set the new size smaller or bigger than the default size, which is 72.