This article is almost how to laid a gadget / widget inwards Blogger thus that it is alone visible on the maiden off identify that a reader sees when they see your spider web log (often called the "home page"). It is ane of a serial of articles almost 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 reveal of reasons why you lot mightiness desire to seat a gadget alone the cover that shows when a visitor maiden off navigates to your blog's abode page.
You may desire to demonstrate a welcome message, or a topic-index page, or to laissez passer a sentiment of your recent tweets or another RSS feed.
You may desire to demonstrate a welcome message, or a topic-index page, or to laissez passer a sentiment of your recent tweets or another RSS feed.
No affair what the reason, the procedure is really similar:
How to brand a gadget alone appear on the maiden off page
Note: in Blogger, the words "gadget", "widget", together with fifty-fifty "page-element" all hateful the same thing. I by together with large move "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.
A pop identify for a gadget that is going to appear similar a "home page" would move inwards the Body section, simply inwards a higher identify the Blog Posts gadget, where "Test Gadget" is inwards this example:
3 Find the Gadget-ID in the usual way.
Edit your template.
Click inwards the search box within the template editor, together with appear for the widget mention that you lot noted inwards measuring 3. Once you've flora it, notice what comes after it. In this example, it's the job for Blog1:
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:
And to avoid leaving blank infinite where the gadget would accept gone, you lot necessitate to update a "hide" pedagogy to apply it to the gadget-id you lot noted inwards measuring 3.
The code to move is this - except seat the gadget-id instead of the XXX.
The instance inwards a higher identify looks similar this, when the code has been added:
Save the template changes, together with appear at your blog. Check that
If anything is incorrect amongst how your spider web log is working, larn dorsum to the template editor (Layout > Edit HTML), together with upload from the re-create of your template that you lot made at the offset of measuring 1. This volition allow you lot spider web log piece of work properly, spell you lot figure out what went wrong.
Follow precisely the same approach equally above.
But instead of
Make the conditional arguing based on something else.
This tin sack move a dissimilar condition, or a specific page URL. For instance to display a gadget alone on a specific page, move this code, together with seat the address of the page instead of POST-URL:
Note: for the address of the page, if your spider web log does non accept a custom domain, thus move careful to move the "blogspot.com" version of the address, non ane amongst a country-level mention (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 grade followed past times an equal sign (!=). For example:
Blogger accept straightaway provided an expanded listing of conditional statements - you lot tin sack notice information almost it:
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 seat a film into your blog
Making a gadget that looks similar a posthttps://wildswann.blogspot.com//search?q=setting-what-goes-on-home-page
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 inwards a totally dissimilar place.A pop identify for a gadget that is going to appear similar a "home page" would move inwards the Body section, simply inwards 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, together with appear for the widget mention that you lot noted inwards measuring 3. Once you've flora it, notice what comes after it. In this example, it's the 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 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'>
<!-- alone display championship if it's non-empty -->
<b:if cond='data:title != ""'>
<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 necessitate to seat 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 subsequently inwards measuring 4)And to avoid leaving blank infinite where the gadget would accept gone, you lot necessitate to update a "hide" pedagogy to apply it to the gadget-id you lot noted inwards measuring 3.
The code to move is this - except seat 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 inwards 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'> <!-- alone display championship if it's non-empty -->
<b:if cond='data:title != ""'>
<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 salve the changes: cheque that the the widget is visible.Save the template changes, together with appear at your blog. Check that
- The widget is on the maiden off page
- The widget is non seen when you lot appear at an older page (eg ane from your archive)
- The other elements of your spider web log (other widgets, spider web log transportation service titles, dates together with contents) are all equally you lot appear them - on the maiden off screen, together with 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), together with upload from the re-create of your template that you lot made at the offset of measuring 1. This volition allow you lot spider web log piece of work properly, spell you lot figure out what went wrong.
How to display a gadget alone on a specific transportation service or page
Follow precisely the same approach equally above.
But instead of
<b:if cond='data:blog.canonicalUrl == data:blog.homepageUrl'>
Make the conditional arguing based on something else.
This tin sack move a dissimilar condition, or a specific page URL. For instance to display a gadget alone on a specific page, move this code, together with seat 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 accept a custom domain, thus move careful to move the "blogspot.com" version of the address, non ane amongst a country-level mention (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 grade followed past times an equal sign (!=). For example:
<b:if cond='data:blog.canonicalUrl != data:blog.homepageUrl'>
Blogger accept straightaway provided an expanded listing of conditional statements - you lot tin sack notice information almost it:
- The back upwards forum articles almost tags https://support.google.com/blogger/answer/46995?hl=en
- and almost expressions: https://support.google.com/blogger/answer/6214580?hl=en
- Blogger Buzz almost some to a greater extent than extensions: https://wildswann.blogspot.com//search?q=setting-what-goes-on-home-page
- Another Blogger Buzz transportation service - fifty-fifty to a greater extent than extensions: https://wildswann.blogspot.com//search?q=setting-what-goes-on-home-page
Where to larn to a greater extent than information
Controlling what goes on the homepageAdding 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 seat a film into your blog
Making a gadget that looks similar a posthttps://wildswann.blogspot.com//search?q=setting-what-goes-on-home-page