Hi guys. We are going to discus one important trick today! Once you add any widget, in your blog, it will be displayed in all the pages by default, including your homepage.
But sometimes, we do want to show some widgets only on Homepage or only for the individual posts pages, or only in a specific page, the coding is quite simple, but you need to customize the widget through the "Edit HTML" link in your "Layout" section.
Steps To Display Gadgets Home Page And Post Pages
If the gadget you want is not already on your blog add it first.For this example i am using a test blog and i am going to use the same recent posts widget.I have already added it to the blogs sidebar.
Name The Gadget - You will later have to find the gadget in your blogs template so to make this easy make sure the gadget has a name or title, i am looking for my recent posts gadget so it has the title recent posts if the gadget you want to move does not have a title just give it the title xxxxx and you can remove it when finished.
Step 1 - In your dashboard Click 'Layout' > 'Edit Html' > Tick the 'Expand widget templates' box
1. Log in to your blogger account
2. Go to Design>>>Edit HTML>>>
3. Thick "Expand Widget Templates"
Step 2 - Now you want to find the gadget in your template so i looked for 'Recent Posts' you look for the title of your gadget or xxxxx if you used that name.
The easiest way to do this is to click 'CTRL and F' for a search bar to help find the code - for more info on this click the extra help link at the top of the post.
You want to find a section of code similar to the one below :
<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<!-- only display title 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>
For Some Gadgets like ur Archivethe section will be larger but you want every thing between :
<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
And
</b:includable>
Adding a gadget to your blog Home pages only
Step 3 - Now we have the code for the gadget we have to add two pieces of code to make it display on the home page only.You can see the two pieces of code i added to make this happen in red below :
<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title 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:if>
</b:includable>
Copy the code in red and add in place for your gadget.
Take you time and make sure you have it added correctly, once your sure you can save your template.
Adding a gadget to your blog post pages only
To make a gadget display on the
post pages only follow the same steps to find the gadget in your template.The only difference is the code added.This time you use the two piece of code shown below :
<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title 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:if>
</b:includable>
To make a gadget display on the
Label Pages & Home Pages only follow the same steps to find the gadget in your template.The only difference is the code added.This time you use the two piece of code shown below
Adding a gadget to your blog Label& Home pages only
<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "item"'>
<!-- only display title 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:if>
</b:includable>
Once again copy the code in red and put it in place for your gadget.
When your sure the code is added properly save your template and your done.
You can do this with as many items in your sidebars as you like and with any gadgets, if you need extra help you only need ask in the comments.
Drop Your Comments And Questions Below.
