» » » » » » News!! Displaying A Gadget Exclusively On The Habitation Page - Or Exclusively On A Specific Page

News!! Displaying A Gadget Exclusively On The Habitation Page - Or Exclusively On A Specific Page

, , , , Edit
This article is nigh how to gear upwardly a gadget / widget inward Blogger thence that it is solely visible on the initiatory of all identify that a reader sees when they see your weblog (often called the "home page").  It is 1 of a serial of articles nigh 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 give away of reasons why you lot mightiness desire to lay a gadget solely the covert 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 laissez passer on 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 solely appear on the initiatory of all page

Note:  in Blogger, the words "gadget", "widget", too fifty-fifty "page-element" all hateful the same thing.  I to a greater extent than ofttimes 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 inward the usual way.


two  Place the gadget

Drag-and-drop the gadget to the identify where you lot desire it.   It may move over or nether your blog-posts gadget, or inward a totally dissimilar place.

H5N1 pop identify for a gadget that is going to appear similar a "home page" would move inward the Body section, simply higher upwardly the Blog Posts gadget, where "Test Gadget" is inward this example:



3   Find the Gadget-ID  in the usual way.


4  Find the code for your gadget:

Edit your template.

Click inward the search box within the template editor, too appear for the widget cite that you lot noted inward measuring 3.   Once you've establish it, notice what comes after it.   In this example, it's the describe of piece of employment 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'>
  <!-- solely 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 bespeak to lay conditional formatting code unopen to the code for the gadget - makings certain that it doesn't larn unopen to the code for anything else!  (which is why you lot noted what comes later inward measuring 4)

And to avoid leaving blank infinite where the gadget would bring gone, you lot bespeak to update a "hide" didactics to apply it to the gadget-id you lot noted inward measuring 3.

The code to purpose is this - except lay 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 higher upwardly 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'>  <!-- solely 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 weblog earlier you lot salve the changes:  cheque that the the widget is visible.

Save the template changes, too 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 weblog (other widgets, weblog postal service titles, dates too contents) are all every bit you lot appear them - on the initiatory of all screen, too on other screens too.

If anything is incorrect amongst how your weblog is working, larn dorsum to the template editor (Layout > Edit HTML), too upload from the re-create of your template that you lot made at the commencement of measuring 1.   This volition allow you lot weblog function properly, piece you lot figure out what went wrong.


How to display a gadget solely on a specific postal 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 tilt based on something else.

This tin move a dissimilar condition, or a specific page URL.    For instance to display a gadget solely on a specific page, purpose this code, too lay 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 weblog does non bring a custom domain, thence move careful to purpose the "blogspot.com" version of the address, non 1 amongst a country-level cite  (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 past times an equal sign (!=).   For example:
<b:if cond='data:blog.canonicalUrl != data:blog.homepageUrl'>

Blogger bring straight off provided an expanded listing of conditional statements - you lot tin uncovering information nigh it:




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 lay a motion-picture exhibit into your blog

Making a gadget that looks similar a postal service /search?q=setting-what-goes-on-home-page

Subscribe to receive free email updates:

Related Posts :

0 Response to "News!! Displaying A Gadget Exclusively On The Habitation Page - Or Exclusively On A Specific Page"

Post a Comment

Subscribe to: Post Comments (Atom)