Displaying A Gadget Exclusively On The Abode Page - Or Exclusively On A Specific Page

This article is near how to gear upward a gadget / widget inwards Blogger therefore that it is alone visible on the foremost identify that a reader sees when they see your spider web log (often called the "home page").  It is ane of a serial of articles near 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 pose out of reasons why yous mightiness desire to pose a gadget alone the covert that shows when a visitor foremost navigates to your blog's abode page.

You may desire to exhibit a welcome message, or a topic-index page, or to seat a thought of your recent tweets or another RSS feed.    

No affair what the reason, the procedure is really similar:

How to brand a gadget alone appear on the foremost page

Note:  in Blogger, the words "gadget", "widget", too fifty-fifty "page-element" all hateful the same thing.  I mostly role "gadget", because the Page Elements tab currently says "Add a Gadget".  But they're absolutely the same.

1   Add the gadget

Do this inwards the usual way.

ii  Place the gadget

Drag-and-drop the gadget to the identify where yous desire it.   It may hold upward over or nether your blog-posts gadget, or inwards a totally unlike place.

Influenza A virus subtype H5N1 pop identify for a gadget that is going to seem similar a "home page" would hold upward inwards the Body section, only inwards a higher identify the Blog Posts gadget, where "Test Gadget" is inwards this example:

3   Find the Gadget-ID  in the usual way.


4  Find the code for your gadget:

Edit your template.

Click inwards the search box within the template editor, too seem for the widget advert that yous noted inwards measuring 3.   Once you've institute it, notice what comes after it.   In this example, it's the delineate of piece of job 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 department of the code.  After yous do, it volition seem like:

 <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'>
<b:includable id='main'>
  <!-- alone display championship 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 necessitate to pose conditional formatting code some the code for the gadget - makings certain that it doesn't larn some the code for anything else!  (which is why yous noted what comes subsequently inwards measuring 4)

And to avoid leaving blank infinite where the gadget would convey gone, yous necessitate to update a "hide" education to apply it to the gadget-id yous noted inwards measuring 3.

The code to role is this - except pose 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 infinite that the gadget leaves*/
</style>
</b:if>

The event inwards a higher identify looks similar 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'>  <!-- alone display championship 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 infinite 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 spider web log earlier yous salve the changes:  cheque that the the widget is visible.

Save the template changes, too seem at your blog.  Check that

• The widget is on the foremost page
• The widget is non seen when yous seem at an older page (eg ane from your archive)
• The other elements of your spider web log (other widgets, spider web log postal service titles, dates too contents) are all equally yous await them - on the foremost screen, too on other screens too.

If anything is incorrect amongst how your spider web log is working, larn dorsum to the template editor (Layout > Edit HTML), too upload from the re-create of your template that yous made at the start of measuring 1.   This volition allow yous spider web log move properly, spell yous figure out what went wrong.

How to display a gadget alone on a specific postal service or page

Follow just the same approach equally above.

But instead of  

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

Make the conditional contention based on something else.

This tin seat the sack hold upward a unlike condition, or a specific page URL.    For event to display a gadget alone on a specific page, role this code, too pose 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 spider web log does non convey a custom domain, too therefore hold upward careful to role the "blogspot.com" version of the address, non ane amongst a country-level advert  (eg the blogspot.in or blogspot.co.uk version)


To display a gadget on every page except a specifc one, supplant the double equals signs (==) amongst the HTML code for not, which is an exclamation grade followed past times an equal sign (!=).   For example:

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

Blogger convey directly provided an expanded listing of conditional statements - yous tin seat the sack abide by information near it:

• The back upward forum articles near tags https://support.google.com/blogger/answer/46995?hl=en
• and near expressions:   https://support.google.com/blogger/answer/6214580?hl=en
• Blogger Buzz near some to a greater extent than extensions:   http://inaredhouse.blogspot.com//search?q=setting-what-goes-on-home-page
• Another Blogger Buzz postal service - fifty-fifty to a greater extent than extensions:  http://inaredhouse.blogspot.com//search?q=setting-what-goes-on-home-page

---

Where to larn to a greater extent than 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 pose a painting exhibit into your blog

Making a gadget that looks similar a posthttp://inaredhouse.blogspot.com//search?q=setting-what-goes-on-home-page

Share this post