Skip to main content

Displaying a gadget only on the home page - or only on a specific page

This article is about how to set up a gadget / widget in Blogger so that it is only visible on the first place that a reader sees when they visit your blog (often called the "home page").  It is one of a series of articles about controlling what goes on the homepage of your blogspot blog.


Front Page Bob
By Paginator (Own work)
 [CC-BY-3.0], via Wikimedia Commons
There are a number of reasons why you might want to put a gadget only the screen that shows when a visitor first navigates to your blog's home page.

You may want to show a welcome message, or a topic-index page, or to give a view of your recent tweets or some other RSS feed.    

No matter what the reason, the process is very similar:

How to make a gadget only appear on the first page

Note:  in Blogger, the words "gadget", "widget", and even "page-element" all mean the same thing.  I generally use "gadget", because the Page Elements tab currently says "Add a Gadget".  But they're absolutely the same.

1   Add the gadget

Do this in the usual way.


2  Place the gadget

Drag-and-drop the gadget to the place where you want it.   It may be over or under your blog-posts gadget, or in a totally different place.

A popular place for a gadget that is going to look like a "home page" would be in the Body section, just above the Blog Posts gadget, where "Test Gadget" is in this example:



3   Find the Gadget-ID  in the usual way.


4  Find the code for your gadget:

Edit your template.

Click in the search box inside the template editor, and look for the widget name that you noted in step 3.   Once you've found it, notice what comes after it.   In this example, it's the line for Blog1:
          <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'/>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

Use the expansion triangle at the left side of the template editor to expand this section of the code.  After you do, it will look like:
 <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

5   Add conditional formatting

You need to put conditional formatting code around the code for the gadget - makings sure that it doesn't go around the code for anything else!  (which is why you noted what comes afterwards in step 4)

And to avoid leaving blank space where the gadget would have gone, you need to update a "hide" instruction to apply it to the gadget-id you noted in step 3.

The code to use is this - except put the gadget-id instead of the XXX.

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

THE red CODE FOR YOUR GADGET GOES IN HERE 
<b:else/>

 <style type='text/css'>
#XXXX {display:none;}/*remove blank space that the gadget leaves*/
</style>
</b:if>

The example above looks like this, when the code has been added:
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'>
<b:includable id='main'>
  <b:if cond='data:blog.canonicalUrl == data:blog.homepageUrl'>  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>

<b:else/>

<style type='text/css'>
#Text1 {display:none;}/*remove blank space that the gadget leaves*/
</style>

</b:if>
</b:includable>
</b:widget>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>


6  Check that it's worked

Preview your blog before you save the changes:  check that the the widget is visible.

Save the template changes, and look at your blog.  Check that
  • The widget is on the first page
  • The widget is not seen when you look at an older page (eg one from your archive)
  • The other elements of your blog (other widgets, blog post titles, dates and contents) are all as you expect them - on the first screen, and on other screens too.

If anything is wrong with how your blog is working, go back to the template editor (Layout > Edit HTML), and upload from the copy of your template that you made at the beginning of step 1.   This will let you blog work properly, while you figure out what went wrong.


How to display a gadget only on a specific post or page


Follow exactly the same approach as above.

But instead of  
<b:if cond='data:blog.canonicalUrl == data:blog.homepageUrl'>

Make the conditional statement based on something else.

This can be a different condition, or a specific page URL.    For example to display a gadget only on a specific page, use this code, and put the address of the page instead of POST-URL:
<b:if cond='data:blog.canonicalUrl == "POST-URL"'>>

Note:   for the address of the page, if your blog does not have a custom domain, then be careful to use the "blogspot.com" version of the address, not one with a country-level name  (eg the blogspot.in or blogspot.co.uk version)


To display a gadget on every page except a specifc one, replace the double equals signs (==) with the HTML code for not, which is an exclamation mark followed by an equal sign (!=).   For example:
<b:if cond='data:blog.canonicalUrl != data:blog.homepageUrl'>

Blogger have now provided an expanded list of conditional statements - you can find information about it:




Where to get more information

Controlling what goes on the homepage

Adding a gadget / widget / page-element to your blog

Editing your blogger template

Putting a slideshow from Picasa onto your blog

Getting the HTML code to put a picture into your blog

Making a gadget that looks like a posthttp://buzz.blogger.com/2015/06/even-more-expansions-to-blogger.html
Labels:

Comments

Post a Comment

Share or Leave Your Comment

Popular posts from this blog

Putting a badge for a Facebook Page into your Blog

This article describes making a Facebook badge to promote your page, and putting it onto your blog. What is a Facebook page This article is about how to make a badge to promote a Facebook  Page . This is an example of the "follow me" approach to linking your blog and the social networks , although for Facebook pages your reader becomes a Fan rather than a Friend. Many people are confused about when they should use each of the types of "thing" in Facebook, ie Profiles - accounts for flesh-and-blood, living, breathing, individual people Pages - for websites, brands, and organisations that don't want to approve all their Facebook members Groups -  for organisations that want to approve individual members who join (and in return, group-owners can send private messages to individual members. The most common "thing" for blogs to have is a Page - and a Badge is the tool which Facebook provides to help you to promote a Page on your blog or other website. Ho
Post a Comment
Read more

How Do Insurance Companies Make Money? - How Does It Work Operationally?

How does it work operationally? Insurance companies can be much more complex than it seems. I won't go into details, but I will try to give a sense of the variety of things to do: Marketing and product development - we have to understand what our clients want and product design including "features" and guarantees (e.g., including dental health plan or not in limitation of the disease before the type of questionnaire that we ask clients to fill???), pricing, regulatory constraints, etc. and IT is, of course, for the system to support this product. Distribution - how we bring our products to the clients? Agents, brokers, direct sales channels are all there, plus the development of smartphone applications and internet sales. Customer service and claims that "the process of paper" including address change customer or telephone number, the call center for clients who have questions, people file to review and pay claims, etc. Finance   - n
Read more

How to rename picture files in Picasa-desktop

This article is about re-naming files from within Picasa-desktop, to provide SEO benefits for your blog. Picasa's desktop software is a good tool for organizing and editing photos on your local computer.   And it is still available for you to use, even though Picasa-web-albums has been replaced by Google Albums + Google Album Archive. For pictures that are important in your blog, I still recommend preparing them in a tool like Picasa-desktop and then uploading the finished versions to Google Photos before putting them into a post, because: The desktop tool has better editing tools (cropping, zooming, auto adjustment, adding watermarks) and Picasa-web-albums does. It lets you control the size of the uploaded file It's easier to ensure sure that you still have full-size files on my local machine for printing etc, as well as smaller, more optimized, copies to use on web-pages. Picasa-desktop folders have a very nice relationship with files and directories with the Windows file sy
Post a Comment
Read more