Info Displaying A Gadget Exclusively On The Dwelling Page - Or Exclusively On A Specific Page

This article is most how to ready a gadget / widget inwards Blogger hence that it is entirely visible on the initiatory of all identify that a reader sees when they see your spider web log (often called the "home page").  It is 1 of a serial of articles most 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 set out of reasons why you lot mightiness desire to set a gadget entirely the concealment that shows when a visitor initiatory of all navigates to your blog's dwelling page.

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

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

How to brand a gadget entirely appear on the initiatory of all page

Note:  in Blogger, the words "gadget", "widget", in addition to fifty-fifty "page-element" all hateful the same thing.  I to a greater extent than frequently than non purpose "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.

two  Place the gadget

Drag-and-drop the gadget to the identify where you lot desire it.   It may endure 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 appear similar a "home page" would endure inwards the Body section, simply to 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, in addition to appear for the widget refer that you lot noted inwards measurement 3.   Once you've establish it, notice what comes after it.   In this example, it's the trace of piece of occupation 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 you lot do, it volition appear like:

 <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'>
<b:includable id='main'>
  <!-- entirely 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 need to set conditional formatting code around the code for the gadget - makings certain that it doesn't larn around the code for anything else!  (which is why you lot noted what comes after inwards measurement 4)

And to avoid leaving blank infinite where the gadget would convey gone, you lot need to update a "hide" didactics to apply it to the gadget-id you lot noted inwards measurement 3.

The code to purpose is this - except set 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 instance to 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'>  <!-- entirely 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 you lot relieve the changes:  banking concern tally that the the widget is visible.

Save the template changes, in addition to appear at your blog.  Check that

• The widget is on the initiatory of all page
• The widget is non seen when you lot appear at an older page (eg 1 from your archive)
• The other elements of your spider web log (other widgets, spider web log post service titles, dates in addition to contents) are all every bit you lot await them - on the initiatory of all screen, in addition to 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), in addition to upload from the re-create of your template that you lot made at the start of measurement 1.   This volition allow you lot spider web log operate properly, piece you lot figure out what went wrong.

How to display a gadget entirely on a specific post service or page

Follow just the same approach every bit above.

But instead of  

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

Make the conditional disceptation based on something else.

This tin endure a unlike condition, or a specific page URL.    For instance to display a gadget entirely on a specific page, purpose this code, in addition to set 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, in addition to then endure careful to purpose the "blogspot.com" version of the address, non 1 amongst a country-level refer  (eg the blogspot.in or blogspot.co.uk version)


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

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

Blogger convey at 1 time provided an expanded listing of conditional statements - you lot tin detect information most it:

• The back upwards forum articles most tags https://support.google.com/blogger/answer/46995?hl=en
• and most expressions:   https://support.google.com/blogger/answer/6214580?hl=en
• Blogger Buzz most some to a greater extent than extensions:   theadsenseblog.blogspot.com/search?q=setting-what-goes-on-home-page
• Another Blogger Buzz post service - fifty-fifty to a greater extent than extensions:  theadsenseblog.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 set a flick into your blog

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