Dynamic Gadget Content

In this tweak I will teach you how to dictate the content within a gadget depending on the page you are viewing the gadget on. This method will only work with HTML/JavaScript and Text Gadgets. This can get a little confusion depending on how many variables of content you want to use.

I understand this is a complicated tweak so feel free to leave questions at the bottom.

To start off you first need to add your gadget and content. If you are using a Text Gadget make sure your in Edit HTML mode within the gadget. In order to make this work we need to add  the content into div element.

I am going to start with two variables so it will be easier to understand.

Example:

<div class="hide1">
<--content to display-->
</div>
<div class="hide2">
<--content to display-->
</div>

The blue text is your class ID which will change between each variable of content you are using.
The red text is the content its self which can range from simple text to images or flash content. Pretty much anything you can think of can go here.

Make note of each class ID because you will need to call for it later.

Save your gadget and go to the Edit HTML page where you can find your template coding.

I recommend doing this next step in a notepad for editing purposes.

We need to build our conditional tag coding to dictate the content to display and on what pages to display on. You will need to read up on conditional tags in order to do this.

Now lets say I want the content in the class ID  "hide1" to display on the homepage only.

<b:if cond='data:blog.url != "HomePage URL"'>
<style>
.hide1 {
display: none;
}
</style>
</b:if>

The orange text would be my homepage URL in which you will need to replace with yours.
The blue text is where I called on the hide1 element.
The green text is me telling the content in hide1 to hide or not to display.

This conditional code above is telling the hide1 content not to display if the page is not the homepage URL.

 Now we need to dictate the content in div class hide2. Lets say I want this content to display only on the post pages.

<b:if cond='data:blog.pageType != "item"'>
<style>
.hide2 {
display: none;
}
</style>
</b:if>

In this case the orange text does not change because item is calls on all  post pages.
Notice I am now calling on the hide2 element with the blue text.

The conditional code above is telling the hide2 to hide if the page is not a post page. This means the content will be hidden on Static pages and the Homepage.

So when we put these two codes together it will look like this

<b:if cond='data:blog.url != "www.tweakmyblogger.com"'>
<style>
.hide1 {
display: none;
}
</style>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<style>
.hide2 {
display: none;
}
</style>
</b:if>

Now all we need to do is place this code in the right section of your template. To do this you should be  on the Edit HTML page with your template coding and then click  Ctrl+F which will open the browser find/search bar.

In the find/search bar input  </head>

This will locate the </head> tag within you template coding.
Directly above the </head> tag place the conditional code you just made and save.

Provided you did everything correctly your gadget content will now be dynamic to the page in which you view it on.