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:





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

Info Showing Your Oldest Blog-Post Kickoff - In Addition To The Residual Inward Opposite Order.

Blogger doesn't accept an choice to display your posts inward contrary social club - thence that the oldest postal service is first, as well as the most recent postal service is last.  

But this article describes displaying your posts inward this way past times manipulating their postal service dates.  And it links to an article close around other possible options.



Previously I've discussed the options for giving your spider web log a habitation page.  One choice is to organise the post-date for each of your posts, thence that you lot command the social club posts are displayed in.

This is slow plenty to do, although at that spot are a yoke of risks that you lot take away to live aware of equally discussed below.


Blogger Posts as well as the Post-date

Each Post inward your spider web log has a date-time value, which is called its "post-date".   Normally , this is educate to the date/time when you lot let out the postal service for the outset time.  But you lot tin change the postal service appointment for whatever post, as well as you lot tin practice this either when you lot let out it first, or after on.

The post-date is of import because it controls the social club that posts are shown in:
  • The postal service that appears outset when a reader visits your spider web log is the 1 alongside the most-recent Post-date.
  • If you lot accept to a greater extent than than 1 post-per-screen, thence the next-most-recent postal service is on the concealment underneath the outset one.  And thence the second-next-most-recent, etc.

When a reader is looking at whatever post, as well as they click Newer-Posts or Older-Posts, the post-date is used to determine what posts to exhibit on the adjacent screen.

This way that you tin brand your posts appear inward the social club than you lot wrote them (ie outset postal service first, 2nd postal service second, etc) past times changing the Post-date thence that:
  • your outset postal service has the most-recent post-date, 
  • your 2nd postal service has the next-most-recent-date, 
  • your 3rd postal service has the third-most-recent poste date
  • etc

An alternative approach is to simply make 1 postal service ever appear first, as well as permit the other posts appear inward the social club that you lot posted them.


How to brand your posts appear inward contrary order, using dates

1  Give your outset Post a post-date (eg today), AND remember that date.

2  Give all other posts (even ones that you lot write adjacent week, or adjacent year) a post-date that is before than the post-date you lot picked inward Step 1.
  • If you lot desire your posts is strictly contrary order, you lot take away to plough over each 1 a appointment that is before than whatever existing post.  This is quite easy:  simply expect at the listing of posts inward Posting > Edit Posts as well as scroll to the bottom of the listing to run into the oldest appointment used thence far.
3  Turn off the post-date display on your posts (since the post-date won't brand sense, because you're manipulating the dates).

  • To practice this, become to the Layout tab.  
  • Choose Blog-posts (edit).    
  • Un-tick the appointment nether "Post Page Options".

4  Remember to brand the same appointment alter for every postal service you lot write from forthwith on.

Also, if it mightiness live relevant for your readers to know when you lot wrote a post, brand surely that you lot ever manually pose the appointment into each post.


Risks of this approach

If you lot follow this approach, you lot volition plough over a far-in-the-past appointment to pages that you lot never desire to appear first.  There is a run a jeopardy that Google mightiness convert the information behind older posts at around time.   If your post-dates larn besides far into the past, thence it's possible that they mightiness non larn by good this.   This could live for reasons that seem logical, or because of things that are totally to practice alongside the internal workings of Blogger's database, as well as brand no feel to you lot at all.

Also, live aware that Google mightiness select to strength the post-date to appear on posts at around fourth dimension inward the future.  At the moment, they don't:  it's your choice.   But you lot cannot guarantee that they won't alter their minds close this, 1 day.   (Personally I think they likely won't, as well as I've built a yoke of "real" websites that brand role of the technique described here.   Just recall it's non guaranteed.)


An Alternative Approach

Adam of Too-Clever-by-Half  has suggested a totally dissimilar way to display your posts inward contrary order.   I haven't used it, but think that it has a lot of potential inward around situations, provided you lot are comfortable using Yahoo pipes as well as RSS feeds to display things on your blog.

He has also latterly shared another approach he found, which uses a script to manipulate elements inside Blogger, as well as thence is to a greater extent than robust than his outset approach.




Related Articles

Changing the postal service appointment for whatever post

Giving your spider web log a habitation page

Using a gadget instead of a postal service equally your habitation page
 
Stopping surely pages from ever appearing on the habitation page

Blogs, Blogger as well as blogger, Posts, Pages as well as Screens - agreement how blogger works.

Info How To Non Demo Whatever Posts On Your Blog's Dwelling Page, Using Blogger

You tin compass the sack laid your spider web log upwardly thus that no posts are shown on the principal enshroud - provided y'all receive got used some of the other "home page" approaches to compass readers other ways of getting to your content.


Previously I've explained how to only exhibit 1 postal service on the principal page of your blog.

But some people who desire to give their spider web log a domicile page go farther than that, together with don't exhibit whatsoever posts on the principal enshroud at all.   (Remember, the principal enshroud is where people who navigate to your blog, rather than to posts inside it, go.)

This sounds similar a foreign matter to produce - afterward all, blogs are near posts.

But genuinely it's fine, provided y'all utilization another tools to allow readers motion unopen to the blog.  I've made a 150+ page spider web log this way, together with it industrial plant real nicely because I receive got organised the data together with used some index-pages (containing lists of bus-routes, suburbs, maps etc) alongside tables that link to many other posts.


How to exhibit no (ie zero, 0) posts on the principal screen

Some people desire to produce this, every bit utilization of the procedure of giving their spider web log a domicile page.  It's non possible if your spider web log has a Dynamic thene, but tin compass the sack travel done for blogs alongside Layout themes.

There are at to the lowest degree 2 ways of doing it.

Option 1 - utilization a custom re-direct for your home-page

Make a novel Page (Pages > New Page) together with add together the fabric which y'all desire to exhibit on your principal screen.    Publish this page.

Take a note of the URL of the Page that y'all utilization created.

Go to Settings > Search preferences > Errors together with re-directions > Custom re-directs

Click Edit together with thus New re-direct

In the dialog box which opens:

  • Enter a back-slash (ie   /  )into the outset (From) box.
  • Enter the URL of the page that y'all noted before into the mo (To) box
  • In the To box, take the blog-address, because Blogger already adds that for you.
    Eg if your URL is     http:/www.myBlog.com/p/home.html
    together with thus merely motion into           /p/home.html

    (note that y'all proceed the backslash (/) merely before the P.
Click the Permanent checkbox.

Click Save just nether the entry y'all merely made - it straightaway looks similar this:



Click Save changes.


Job Done!   Anyone who goes to your blog's domicile page volition straightaway instruct automatically to the alternative page y'all made - together with the upshot is that no posts are shown on the domicile page.



Option 2 - utilization the Posts together with Comments setting

Choose the Settings > Posts together with Comments panel from the left sidebar.

Enter cypher (0) into the Show at most field
Click Save Settings in the travel past times correct paw corner of the screen.


    About this method

    The method inward Option 2 works:   no posts are shown on your domicile page.

    But past times default, nothting else is shown, either.    Unless y'all receive got steps to avoid it, your readers volition run into a grayness box proverb "0 Posts" when they hold off at your blog's principal URL.   



    Some of the things y'all tin compass the sack produce to avoid this include hiding the "showing posts alongside label XXX" message, together with creating a gadget that entirely shows on the "home" page.


    Recommended option

    The custom re-direct choice is in all likelihood the best approach - together with is sure as shooting what I've used for my blogs recently:   it's clean, together with doesn't postulate whatsoever exceptional messing unopen to alongside gadgets etc to position content onto the "home" page.

    But at that spot may travel cases where the mo choice is ameliorate - together with I receive got late confirmed that it however works.


    Whichever choice y'all choose

    Remember that y'all postulate to ready another means to allow readers motion from your home-page to run into your other posts - some of the ways to produce this are discussed here.




    Related Articles

    Limiting your spider web log to entirely receive got 1 postal service on the principal page

    Giving your spider web log a home page

    Giving readers alternative ways to run into the posts inward your blog

    What are dynamic thought themes?

    Blogger subject types
    .
    Using tables inward your blog

    Displaying a gadget entirely on the domicile page
    Powered by Blogger.