Select Your Language

How to hide and show Sidebar Gadgets in Blogger.

eyes,droped,avatar,emoticon,face,emotionThe current blogger platform has a feature which is considered to be very appreciated by template designers. It is called conditional tags. With conditional tags you can make the decision to hide or show gadgets on specific pages of your blog. As we became more familiar with template coding it became common ground as to what each code meant and how it was utilized. This allowed us make certain tweaks that may not be posted on this tutorial. All credit be due to this site which was of great help in providing the step by step process in performing this task. 

This is a great feature one could use in many creative ways. today we are going to tackle side bar gadgets on any page of your blog.


Stage 1. Compatibility of Conditional tags



This feature works well with all standard blogger templates except those with Dynamic views. Please take into consideration that although not all 3rd party templates accept conditional tags, many do. 

This tutorial should make it very easy to perform this task. It is safe to say the difficulty level is close to that of a beginner. 

Stage 2. Lets access your Gadget in the Template

Open the Template by going to Template or (Theme). Go to " Edit HTML " button. Next find the " Jump Widget" drop down button at the top, and select the widget gadget you which to work on. 

Note: If you did not name your gadget  due to preferred aesthetics, please don't be alarmed. Just give it a "title name" by going to your layout, save, and then go back to "Edit HTML" in your template. Now all you have to do is hit Cntrl + F keys and a search box will appear. Type the name of your gadget title in the box and you should see the code for the image with the title name highlighted in the template.(This is your Widget gadget.) 

Stage 3. Inserting the Conditional Tag 
 
It doesn't matter what conditional tag you choose, it goes in the same part of your gadget code, therefore I'm going to first show you placement.
The opening conditional tag goes immediately below this line:
<b:includable id='main'> The closing conditional tag, </b:if>, goes immediately above this line:
</b:includable> Both lines are highlighted in this image:

 

 Showing Gadget on one specific blogger page "Only"

Note: Always, always save (Back Up) your template before making changes.  
 
This one I like. it could be a little tricky at times but as you get use to the template "lingo" per say, it should be second nature. Use this one to make sidebar gadget appear on one page of your blog Only.(No Where Else in the blog will show this gadget.)

Insert the following line below <b:includable id='main'>:
<b:if cond='data:blog.url == "PAGE URL HERE"'> Replace "Page URL here" with the address of the page that should show the gadget only. For example, if I only wanted to show the gadget on my about us page, I'd write it like this:

<b:if cond='data:blog.url=="http://www.spacesmadeperfect.com/p/blog-page_31.html"'> 

Now you will have to close the conditional tag by inserting this small piece of code shown below above this line in your template </b:includable>:
 
</b:if>
Press the "Preview template" button. If you see an error message, double check your code and try again. Otherwise, press the "Save template" button to save your changes. 


Show Sidebar Gadget Only on the Homepage.  

Restricting the gadget only to your homepage, can be accomplished by simply using this conditional.

 <b:if cond='data:blog.url == data:blog.homepageUrl'>

Place the above conditional tag just below this line: <b:includableid='main'>: in your template.

Know close the conditional by placing this line: </b:if> above this line:</b:includable>: in your template. 


Note: Always "Preveiew" your template changes prior to saving. If you get an error message, double check your work.   

If all seems well, you are done.  Please stay tuned  to find out other tips and tricks along the way. Dont forget to leave us a comment on whether this was of any help to you.   

 Return to our Blog Archive..
Post a Comment