ADS

» » » » » » News!! Displaying A Gadget Solely On The Dwelling Page - Or Solely On A Specific Page

News!! Displaying A Gadget Solely On The Dwelling Page - Or Solely On A Specific Page

, , , , Edit
This article is most how to gear upwardly a gadget / widget inward Blogger thence that it is entirely visible on the first of all position that a reader sees when they come across your weblog (often called the "home page").  It is 1 of a series 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 break of reasons why yous lot mightiness wishing to lay a gadget entirely the covert that shows when a visitor first of all navigates to your blog's abode page.

You may wishing to exhibit a welcome message, or a topic-index page, or to laissez passer on a idea of your recent tweets or precisely about other RSS feed.    

No matter what the reason, the physical care for is actually similar:

How to build a gadget entirely appear on the first of all page

Note:  in Blogger, the words "gadget", "widget", also even "page-element" all recollect the same thing.  I to a greater extent than ofttimes than non role "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.


2  Place the gadget

Drag-and-drop the gadget to the position where yous lot wishing it.   It may displace over or under your blog-posts gadget, or inward a totally different place.

A popular position for a gadget that is going to appear similar a "home page" would displace inward the Body section, precisely 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 inside the template editor, also appear for the widget mention that yous lot noted inward criterion 3.   Once you've found it, detect what comes after it.   In this example, it's the depict of slice 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 division of the code.  After yous lot do, it testament 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 entitle 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 indicate to lay conditional formatting code closed to the code for the gadget - makings sure as shooting that it doesn't instruct closed to the code for anything else!  (which is why yous lot noted what comes after inward criterion 4)

And to avoid leaving blank interplanetary space where the gadget would select gone, yous lot indicate to update a "hide" pedagogy to apply it to the gadget-id yous lot noted inward criterion 3.

The code to role 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 interplanetary space that the gadget leaves*/
</style>
</b:if>

The representative 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'>  <!-- entirely display entitle 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 interplanetary 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 weblog before yous lot relieve the changes:  depository fiscal establishment correspond that the the widget is visible.

Save the template changes, also appear at your blog.  Check that
  • The widget is on the first of all page
  • The widget is non seen when yous lot appear at an older page (eg 1 from your archive)
  • The other elements of your weblog (other widgets, weblog shipping titles, dates also contents) are all every fleck yous lot appear them - on the first of all screen, also on other screens too.

If anything is wrong alongside how your weblog is working, instruct dorsum to the template editor (Layout > Edit HTML), also upload from the simulate of your template that yous lot made at the start of criterion 1.   This testament let yous lot weblog business office properly, slice yous lot figure out what went wrong.


How to display a gadget entirely on a specific shipping or page


Follow precisely the same approach every fleck above.

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

Make the conditional contention based on something else.

This tin displace a different condition, or a specific page URL.    For representative to display a gadget entirely on a specific page, role this code, also 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 select a custom domain, thence displace careful to role the "blogspot.com" version of the address, non 1 alongside a country-level mention  (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 (==) alongside the HTML code for not, which is an exclamation marker followed past times times an equal sign (!=).   For example:
<b:if cond='data:blog.canonicalUrl != data:blog.homepageUrl'>

Blogger select guide off provided an expanded listing of conditional statements - yous lot tin regain information most it:




Where to instruct 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 shipping /search?q=setting-what-goes-on-home-page

Subscribe to receive free email updates:

ADS