Displaying a gadget alone on the habitation page - or alone on a specific page

This article is nearly how to ready a gadget / widget inward Blogger hence that it is entirely visible on the initiative 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 nearly 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 publish of reasons why y'all mightiness desire to lay a gadget entirely the concealment that shows when a visitor initiative of all navigates to your blog's habitation page.

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

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

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

Note:  in Blogger, the words "gadget", "widget", together with fifty-fifty "page-element" all hateful the same thing.  I by together with large 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.


ii  Place the gadget

Drag-and-drop the gadget to the identify where y'all desire it.   It may live on over or nether your blog-posts gadget, or inward a totally unlike place.

Influenza A virus subtype H5N1 pop identify for a gadget that is going to appear similar a "home page" would live on inward the Body section, merely inward a higher identify 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, together with appear for the widget elevate that y'all noted inward mensuration 3.   Once you've constitute it, notice what comes after it.   In this example, it's the work 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 y'all 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 postulate to lay conditional formatting code approximately the code for the gadget - makings certain that it doesn't learn approximately the code for anything else!  (which is why y'all noted what comes later on inward mensuration 4)

And to avoid leaving blank infinite where the gadget would accept gone, y'all postulate to update a "hide" teaching to apply it to the gadget-id y'all noted inward mensuration 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 inward 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 weblog earlier y'all salve the changes:  banking corporation tally that the the widget is visible.

Save the template changes, together with appear at your blog.  Check that
  • The widget is on the initiative of all page
  • The widget is non seen when y'all appear at an older page (eg 1 from your archive)
  • The other elements of your weblog (other widgets, weblog postal service titles, dates together with contents) are all equally y'all appear them - on the initiative of all screen, together with on other screens too.

If anything is incorrect amongst how your weblog is working, learn dorsum to the template editor (Layout > Edit HTML), together with upload from the re-create of your template that y'all made at the commencement of mensuration 1.   This volition allow y'all weblog operate properly, piece y'all figure out what went wrong.


How to display a gadget entirely 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 disceptation based on something else.

This tin live on a unlike condition, or a specific page URL.    For instance to display a gadget entirely on a specific page, purpose this code, together with 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 accept a custom domain, together with hence live on careful to purpose the "blogspot.com" version of the address, non 1 amongst a country-level elevate  (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 accept forthwith provided an expanded listing of conditional statements - y'all tin discovery information nearly it:




Where to learn 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 pic into your blog

Making a gadget that looks similar a postal service

Popular posts from this blog

Putting a badge for a Facebook Page into your Blog

Image
This article describes making a Facebook badge to promote your page, too putting it onto your blog. What is a Facebook page This article is nigh how to construct a badge to promote a Facebook  Page . This is an instance of the "follow me" approach to linking your spider web log too the social networks , although for Facebook pages your reader becomes a Fan rather than a Friend. Many people are confused nigh when they should utilisation each of the types of "thing" inwards Facebook, ie Profiles - accounts for flesh-and-blood, living, breathing, private people Pages - for websites, brands, too organisations that don't desire to approve all their Facebook members Groups -  for organisations that desire to approve private members who bring together (and inwards return, group-owners tin ship private messages to private members. The most mutual "thing" for blogs to convey is a Page - too a Badge is the tool which Facebook provides to ass...
Read more

How to edit your Theme inward Blogger

Image
This article is almost how to edit your subject inwards Blogger. It supports many other articles on this site, which propose specific subject changes needed to solve exceptional problems.    Note that until early on 2017, themes were called templates.   In practise, "edit your template" in addition to "edit your theme" hateful the same thing. In Blogger, a subject is a file which controls how your weblog are displayed on the covert when someone reads it using a browser or a mobile device.   Themes used to survive called templates, but were renamed "themes" inwards early on 2017. Previously, I've looked at whether it's a expert thought to edit your Blogger subject / template or not.   Because themes are the same matter every bit templates, the same principles apply to editing your theme. For many people, editing the subject is exactly something which they require to do, because it's the alone way to do what they desire ( remov...
Read more

Saving a shipping if Blogger's Publish push doesn't work

This article is close how you lot tin salvage a  postal service fifty-fifty if Blogger's Publish push clitoris won't allow you lot salvage your work. use a pre-publication weblog to ready your posts , but if you lot don't produce that, it tin crusade your RSS subscribers to shape a bad impression of the character of your posts. Influenza A virus subtype H5N1 better option is to operate a source-code editor similar Notepad++ (free, Windows only) or XMLSpy (30 24-hour interval costless trial, far to a greater extent than complex code editor), which has tools to assistance you lot honor together with induce problems with your code. Related Articles Get your posts correct earlier you lot discover them for all to see What is RSS together with why it matters for your blog Getting the HTML to seat a flick into your blog Putting text together with pictures amongst each other
Read more