Thursday, May 26, 2016

How to Hide Or Show Widgets in Home/post/static/archive pages in Blogger (Part-11)

Sometimes we desire to show some widgets or html / javascript  on few parts of our website, so it unnecessarily does not decrease the speed of other pages. Blogger/BlogSpot users always complain that they cannot display widgets or html / javascript  on the specific part of their website i.e. Homepages, Post Pages and Static pages etc, but now it is extremely straightforward to restrict some widgets or html / javascript  on certain pages.

There are numberless reasons why a person wants to show gadget on certain pages because it could be anything. Consider a person created a featured content slider widget but he wants to display it only on the homepage. Therefore, those who are anxiously looking for a method of restricting widgets on specific pages then, today in this article, we will learn How to Show and Hide Blogger Widgets on Specific Pages?

 
  • To do so Follow these steps:

Step 1. Go to Blogger.com
Step 2. Go to Dashboard >Layout
Name the HTML/Javascript gadget to identify it easily while working the widgets.
Step 3. Go to Template and click on Edit HTML


Step 4. Click anywhere inside the code area and press the CTRL+F.


The search box will be appeared.

Step 5. Find the HTML of your widget by typing the widget's name in the search box > Press Enter.

For Example my widget is "Recent Posts" then after searching the widget's name i will get a similar code in  template:

<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>
</b:widget> 

 This code in red is the widget/gadget that we added in the layout.

Step 6. After finding the widget code ,add following conditional tags marked with red just below and above to hide the widget from specific pages or posts in Blogger according to your needs:
  • To show the widget only in homepage:

<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>
</b:widget>
  • To show the widget only in post pages:

<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>
</b:widget>
  • To hide Blogger widget in post pages:

<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>
</b:widget>
  • To show widget in a specific page:

<b:widget id='HTML1' locked='false' title='Recent 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 hide widget in particular page:

<b:widget id='HTML1' locked='false' title='Recent 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 widget only in static pages:

<b:widget id='HTML1' locked='false' title='Recent 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 widget in static pages:

<b:widget id='HTML1' locked='false' title='Recent 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 widget only in Archive pages:

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

Conclusion

That's it. After you have added the conditional Tags, Save the Template and veiws your blog. If problems, you can comment me in bellow comment box or face book.

Previous Post
Next Post

0 comments: Post Yours! Read Comment Policy ▼
লক্ষ্য করুনঃ
পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

Post a Comment

 
Copyright © Poisa Click Registered Surf. Modified: PC Team, Server Hosted: GSE