Friday, 26 May 2017

[Blogger Tutorial] How to show or hide widget on a page on blogger

[Blogger Tutorial] How to show or hide widget on a page on blogger

Hey guys! Welcome to another 360GpTech tutorial.
Today, we're gonna be giving you guys an amazing trick on how to show or hide widget on a page on your blogger site.

We know fully well that some of you might have been wondering or searching for ways on how to do this, and might end up concluding that there's its impossible. we're here today to announce to you guys that there's always a way.

Firstly, to achieve this, kindly follow the steps below without panic and see yourself achieving this.

- Go to Blogger Dashboard > Layout > Add a Gadget > Html/java Script.
- Go to Template and Click on Edit HTML
- Find the name of the widget by using CTRL+F.  
Let’s take a widget that name is (Popular Posts ) > After searching this name > You find a similar code like this.
<b:widget id='HTML5' locked='false' title='Popular 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>
</b:widget>
 
After you find code add the following conditional tags marked with orange just below and above to hide the widget from specific pages or posts in Blogger.

To show the widget only in Homepage 

 <b:widget id='HTML1' locked='false' title='Popular 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>
</b:widget>
 To show Blogger widget only in post pages

 <b:widget id='HTML1' locked='false' title='Popular 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>
</b:widget>

To show the widget in a specific page   

 <b:widget id='HTML1' locked='false' title='Popular Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "URL of the page"'><!-- 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>
</b:widget>

Note: Replace the URL of the page with your website link .


To hide a widget only in a particular page   


 <b:widget id='HTML1' locked='false' title='Popular Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != "URL of the page"'><!-- 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>
</b:widget>

To show widgets only in static pages  


 <b:widget id='HTML1' locked='false' title='Popular Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'><!-- 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>
</b:widget>

To hide widgets in Static Pages  


 <b:widget id='HTML1' locked='false' title='Popular Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'><!-- 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>
</b:widget>


To show widgets only in Archive Pages  

 <b:widget id='HTML1' locked='false' title='Popular Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'><!-- 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>
</b:widget>
After adding any of these conditional tags in your desired widget, Save your Template and View your Blog. The widget must definitely show/hide the things you've commanded it to do.


Thats all guys!!

If you encounters any error while making use of this tutorial, kindly make use of the comment box below.

REMEMBER: Always visit for more interesting topics.

No comments:

Post a Comment


About Us | Contact Us | Disclaimer | Terms And Conditions
All Rights Reserved 360GpTech
© 2017