Friday, 5 July 2013

How to remove Blogger's Click Trap in Previews

Have you ever previewed a post you've been writing on Blogger and tried to click something only to find you can't? We have. A lot. In fact, it's a pain in the arse. Here's how to remove it both temporarily and, using Addons, permanently.
This guide only covers Chrome and Firefox, however the same should be for other browsers.

How do I remove it temporarily?

 Your browser will need some form of Developer Tools. This is now customary on all modern browsers.
First, open your preview page. I've used my article on Changing from Apache MPM Prefork to Apache MPM Worker on Virtualmin in a post-install environment as my example.
Now, the first thing you need to do is bring up your Developer Tools. In most cases, this is F12, but not all. It should be under you tools menu regardless, though it may have varying names.

Google Chrome

In Chrome, this is very simple. F12.
The look for the line with "Blogger-ClickTrap" in it. It should be around 14 lines down.
Note how Chrome also highlights it.
 Select the line, and press Delete on the Keyboard. Then you can close the tools with the X in the top-right of the popup box.

Mozilla Firefox

The shortcut for Firefox is Ctrl - Shift - I.
After the box opens, move the mouse on the screen and the line should auto-highlight, the line we are looking for should highlight automatically (due to it being right at the front). Select it, press Delete then close the popup box.

How do I remove it forever?

I am assuming you know how to download and install Addons in your browser. These addons are Adblockers, which you should have installed anyway IMHO.

Chrome using Adblock

Right-click anywhere on page the page. Go to Adblock, and click "Block this ad".

 Click "Looks good"
 Click "Block it!"
The page will now reload and you are done!

Mozilla Firefox?

Unfortunately, I've not been able to find a simple way of doing it. Sorry guys.

Why does Blogger only show one post when I have more selected and how do I fix it?

Over at Life, Doctor Who and Combom, we've recently had a number of emails saying "How come there's only one or two posts on your homepage?" Well, we've looked into it a few times, albeit quickly, and discovered that we couldn't find the cause, as the setting in Blogger is correct.

We've just discovered what the problem is, however. Thanks to this blog post,we now know what the problem was.

The problem is with how one of our writers added the images to the post. Instead of uploading the content via Blogger's picture tool, they dragged and dropped the image into the window. To the user, this normally does not look any different from anything else, however the image isn't actually uploaded to the server in the traditional format. Rather, the image is encoded into base64 and added to the post, raising the post's size. When you, or the visitor sees it, it is decoded back.

When does this happen?

When you have dragged and dropped an image from your computer into your blog post.
Note: Dragging and dropping from another site will usually result in a series of foreign characters displayed.

Why does the page not load?

Blogger has certain limitations attached and one of these is page size and having a base64 image encoded in your post takes up a lot of the page's allocated space. (A single standard quality image could be worth about the same as your entire HTML page. That's a lot of text!)

How do I fix it?

First, you must find the image. Simply open up your blog, and put your mouse over each image and look in the bottom left of your browser.
If it has "data:image/jpeg;base64..." or something similar at the start, then that's your problem. Most of them should have a domain (or the start of one) at the start.

Once you have found your image, download it to your computer.
Then, edit the post on Blogger, delete the old picture and properly upload the new one to replace it and save.
This should now be fixed.

Unless you use tags with old posts, you shouldn't need to go too far back to fix the errors.

If you've not done too many blog posts, you can download your backup, open it and just use find to look for the occurrences of the blog posts.