News!! Displaying A Gadget Exclusively On The Habitation Page - Or Exclusively On A Specific Page
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.
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.
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.
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:
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 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.
The instance higher upwardly looks similar this, when the code has been added:
Save the template changes, too appear at your blog. Check that
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.
Follow just the same approach every bit above.
But instead of
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:
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:
Blogger bring straight off provided an expanded listing of conditional statements - you lot tin uncovering information nigh 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 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
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 != ""'>
<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 != ""'>
<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:
- The back upwardly forum articles nigh tags https://support.google.com/blogger/answer/46995?hl=en
- and nigh expressions: https://support.google.com/blogger/answer/6214580?hl=en
- Blogger Buzz nigh some to a greater extent than extensions: /search?q=setting-what-goes-on-home-page
- Another Blogger Buzz postal service - fifty-fifty to a greater extent than extensions: /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 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
Related Posts :
Just Info Understanding the Follow-by-Email gadget and Feedburner
Just Info Displaying a gadget only on the home page - or only on a specific page
Just Info How to put a gadget above your blog's header
Just Info Getting the HTML code to put a picture into your blog's sidebar, header or footer
Just Info How to center gadgets in Blogger
0 Response to "News!! Displaying A Gadget Exclusively On The Habitation Page - Or Exclusively On A Specific Page"
Post a Comment