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.

Add Post titles to Older and Newer Post links – reloaded

When viewing a single Blogger blog post there are links to Newer Post, Home, and Older Post at the bottom of the page. Unfortunately the Newer and Older post links only contain text "Newer Post" and "Older Post", not the actual post titles. Wordpress, from where I migrated to Blogger, can display the post titles. But not Blogger...

Previous hacks

There are already some hacks to do this. One of the first is by ETBlue, here's that hack. It works very well, but it skews the stats: the loading of two extra posts by jQuery results in two extra stats hits for an opened post.

I did a hack, too, which adresses the stats problem, it is here. It uses somewhat different method to get the post titles: they are fetched from the blog feed, or generated from the blog url (=pseudo title), so no extra posts are loaded, so we have no stats skew. The problem is that is only gets real titles for 500 latest posts. Older posts get a pseudo title. 500 is sufficient in most cases. The script could be modified to get 1000 posts, or more, but it would take some time to load the feeds.

In a comment of my previous hack Duy Pham gave a link to his Older/Newer post title hack. He has an excellent solution for getting the titles from the blog feed: first get the index using publishing date of the post, then retrieve maximum of 3 posts (previous, this post and next post) from a feed.

Duy Pham's hack was so inspiring, that I started coding the thing same in jQuery (Duy uses javascript), and to be compatible with my previous hack. The result has 2 lines less code than the previous hack, and many more features:

Post titles to Older and Newer Post links – reloaded

Demo

Installing the hack

You need to edit your blog's template. I use jQuery in this hack, so you need jQuery. 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>

Then find </body> and insert this code (just) before it:

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

If you had the previous version installed, you can replace the old code. Save the template, and the hack is installed!

Configuration

You can configure the following javascript variables:

olderLink - contains the template for older link, you can use [title] in this
newerLink - template for newer link, you can use [title] in this
olderTitle - template for older link title, you can use [title], [date] and [datetime] in this
newerTitle - template for newer link title, you can use [title], [date] and [datetime] in this

You can use any html, too, for example you can use images. If you use the default olderLink and newerLink, you can also style classes .blog-pager-older-link-title and .blog-pager-older-link-title.

The previous/next links need some styling, so that post titles fit better. For example something like this in Simple template; add these to the styles section of your template (or use Template Designer|Advanced|Add CSS):

.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}
.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}
.home-link {left:0px;position:absolute;margin-left:250px;text-align:center;width:60px;white-space:nowrap;}

If you don't have Simple template, test and change styles if needed. Values for .home-link work with 560px wide text area (250x2+60=560), change accordingly if needed. If "Home" text is very wide in your language, you may also have to change the values (test and see if it works). Of course you can style everything quite differently than me, that's just CSS. :)

Hope you like this hack!