Translate This Blog
Always Remember To Back Up Your Template Before Attempting Any Of The Tweaks On This Site

Do to error codes you should use the old interface when attempting many of these tweaks to your template

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.

9 comments:

  1. Seems like it should work, but the template editor keeps converting my double quote " to " when I add the above text in the header. Therefore my conditions are never met. How do I stop it from doing that?

    ReplyDelete
  2. What conditions are you using?

    The conversion of the double quotes is normal when using conditional tags and it should not effect the condition from rendering.

    ReplyDelete
  3. (translating the (gt)/(lt) tags so this will post)

    (lt)b:if cond='data:blog.url != "url.blogspot.com/2011/02/post1.html"'(gt)
    (lt)style(gt)
    .post1 {
    display: none;
    }
    (lt)/style>
    (lt)/b:if(gt)

    I'm going to have a small, finite number of pages overall. I want different text in the gadget depending on each page, so I will have a different div and condition for each distinct post URL.

    ReplyDelete
  4. Yes the code above would be correct for what your doing. As you said you just need a different div element and different URL for each condition. You can even style the content in the div element by making use of the conditional else tag.

    ReplyDelete
  5. Ah, I had to put the http:// in the URL to get it to work. Thank you very much for the help.

    ReplyDelete
  6. This is great! This blog igeneral is too. I modified it slightly so that my welcome message only appears othe home page. It does not appear elsewhere. Thank you. I also linked to you in my blog.

    ReplyDelete
  7. oops I can't even understand what this post is talking about. Seems like you are ordering something. Do you have some live demo?

    ReplyDelete
    Replies
    1. No I do not have a live demo of this because I use a bit more advanced method of this through the template to display different link list through my static pages.

      This is one of those post that would require help that I can not provide through this comment box so send me a email through the contact at the top of the site and I will be happy to walk you through it. In the email please state what your having trouble with or what your trying to do.

      Delete

Web Design Blogs PageRank