Show/Hide Gadgets on a Specific Page

It's about time to write a general tutorial on how to do this. I have written few tutorials in the past that use this concept, but it was specifically made for the Archive gadget and so on. But the need to generalize this concept is there, so here it comes!

I am sure there are lots of ways to do this. I'm going to write a tutorial on how I do things.The idea behind this tweak is simple, conditional codes. But it is very important for you to know which element you want to apply the conditions on. Check out this brief tutorial first on how you can identify your elements' ID or Classes. To examine the element, I excessively use Firebug. Firebug is a useful Firefox add-on that allows you to examine CSS styling of a certain page element before you style it. As I said before, this is my way of doing it. I know you can find the way to address your page elements by going to your template and usually find it in the widget area, but Firebug saves a lot of time.

So let's get started. In this tutorial, I will apply a text gadget below my header. So by default, this gadget will appear on every single page. But I want it to appear only on the homepage, so here's how.

Image Too Large When Clicked On

This is a very common modification that blogger would like to make but has no direct solution to it. Here's the problem. You have a cool camera, and you want to upload pictures that you have snapped to your blog. But when you have done this, the target image when it is clicked on appears to be very big, huge!

There are two ways to work around this issue. The first one is the obvious and tedious one, to resize your image before you upload to your blog. There are hundreds of online websites where you can resize your pictures. Alternatively, you can use software like Windows built-in MS Paint or Adobe's Photoshop to resize your image. You can even download third party software to resize your image in a batch.

But that is not what this post is about. In this quick tutorial, I am going to teach you how to resize your target image without going through the hassle of resizing your image before uploading. You can simply 'tell' (with machine language of course, but not literally 'machine language') blogger to show your image at a different size. And it's rather easy and flexible, as you can change to a different size whenever you change your mind without having to upload your image all over again.

RIP Paul the Psychic Octopus

Everybody remembers Paul the Octopus. He became internationally famous after correctly predicting Germany's match results in the 2010 World Cup. Well, he died on 26 October 2010. It's expected though, octopus can't live for more than 2 years. While everyone feels that his death is a tragic loss, there's someone who is happy about it.

Diego Maradona: "I am happy you're gone Psychic Octopus, it's your fault we lost the World Cup,"

Image from http://www.inewscatcher.com

Images Can't Be Clicked After Adding Captions

Update: The bug has been fixed.

This is a bug that still exists in the new editor. It is yet to be fixed. In the updated editor, when a caption is added to an image using the 'Add Caption' feature, the image will not be clickable, or linked. The bug is so obvious with the way it is coded. Few lines are misplaced. There's a quick fix to this, rearrange three lines from the image's HTML.

Check out the following two images. Both of them have captions added. The first one is the default setting, without the fix, so the image is not clickable. The second one has the fix applied, so it is clickable.

Publish Post in Blogger Static Pages

Well, not exactly. You can't publish a dynamic post in a static page. But you can make it appear so, by labeling your posts and linking your label to your tab menu. That's what this tutorial is about. If you want a demo, feel free to click on the Places, Review, Transformers and Photography link on top of this blog, and you will get a live demo of what I've been talking about.

How to Customize Links and Tabs on Pages Gadget

This is a quick tutorial on how to customize links and tabs on pages gadget, in case you want to have a tab to link to some other URL instead of your static pages alone (how selfish the current limitation is!). Do note that after this hack, you won't be able to edit your pages gadget directly by clicking on 'Edit' on your Pages Gadget from Page Element. You'd have to code it each time you wanna make changes. So if you have added a new static page, it wont automatically show on your Pages Gadget unless you make the necessary changes.

Make sure you have already added your Pages Gadget before attempting this tutorial.

Update: With the new Blogger interface, you can add external links to your Pages gadget.

Different Background on Different Page

If you have read my past few posts, you might have already guessed that I will be using conditional codes heavily in this tutorial. Anyway, you actually have different background on different pages. What you need to achieve this? Well, you must at least know how to change your regular main page background using CSS code. You see, there are many page templates and each of them have different ways to address to something, so you must at least do a little homework and try to change it first on the main page.

You can Checkout my test blog for a sample result. Link tab and Contact tab have different backgrounds:

http://www.test2.southernspeakers.net/

Adding an Already Added Gadget

In this quick tutorial, I will show you how to add an already added gadget. I am going to use Page Gadget as an example. As you might have guessed, if you have already added Page Gadget (and some other gadgets), you cant add it again for the second time. If for some strange reason you need the same gadget twice, this tutorial is for you.

If you already have a Page Gadget, remove it first before attempting this tutorial.

Customize Tabs on Pages Gadget

This one is a real quicky. In this tutorial, you will learn how to customize the tabs and its links on the Pages gadgets.

Dedicated Separate Archive Page

This tutorial teaches you how to create a separate archive page, on a static page. That means, you'd be able to see a dedicated static page on your menu, on which you can click on to view your blog's archive. You can choose to display or not to display conventional archive gadget on the sidebar, that's totally up to you. Anyway, you can check out a sample here:

http://www.test2.southernspeakers.net/p/archive.html

The idea behind this tutorial is to place the Archive gadget on all the pages, and then code it in such a way that it will only be visible on one selected static page. Before starting this tutorial, I am going to assume that you already have an Archive Static Page created and optionally Pages Gadget (menu bar) placed below your header.

Virtual Static Page with Selected Posts in it

I realized that this is another common effect that bloggers are trying to achieve but has no direct solution to it. So this tutorial is made especially for you guys. In this tutorial, you will learn how to link to posts sorted by a specific label, and place this link on your Pages Gadget or Menu Bar or Navigation Bar. If you still don't know what I am talking about, imagine a link on your menu bar which you can click on, and this link will bring you to a page similar to your main page, but with only selected posts in it.

Some bloggers are looking ways to achieve this using static pages. Unfortunately, you can't do it using a static page. Blog posts are dynamic, and static pages are static, the two certainly don't mix. However, we can simulate this effect. In this tutorial you will learn how to simulate an effect of having posts in a static page which already have texts or images. So it'd look like a normal static page, but with selected posts on it. And you don't need to waste a static page to do this! From here on, I will be addressing this page as Virtual Static Page.

So, in short, what you will get is a menu which has extra tabs on it, and when you click that tab, you will be brought to a page which has posts that you have specifically selected. In addition, you could also have texts or images there to act like a header of that page. You can check out my test blog here:


http://yoboytestblog.blogspot.com

Blogger Tips: Setting Up Homepage

By default your index page, which is the page that you'd get when you type in a domain, is the page where your main post body is located. Thus, when you visit a blog, you'd see posts in your index page. Whereas in a website, usually an index page is an introductory page, and you'd be able to click a tab from the menu to bring you to the blog/posts page. This is what we are trying to achieve in this tutorial.

Test Blog


In this tutorial, you'd be able to have a homepage, with no posts on it, and you can click on a tab to bring your reader to your posts. On the downside, this method is not so straight forward, and it involves some hardcoding. Something not so suitable for beginners, but feel free to try it out.

Transformers Leader Class Starscream Review

Another precious gift from my Girlfriend. This time, Transformers Hunt for the Decepticons Leader Class Starscream. A really slow, detailed, step-by-step review made specifically for the beginners. As usual, Robot to Alternative Mode (F22 Raptor Jet) review.