Saturday 2 May 2015

How to Show and Hide widgets in Blogger

Tags

As seen in many heart touching blogger templates, widgets are shown according to the type of page. In many blogs I've seen different widgets for different posts and even no widgets on static pages. This is fucking strange but is the matter of creativity how you manage widgets on your blog to attain the maximum optimization of web blog design. A Perfect Blog layout is the result of successful widget placement.

This would be like a hide and seek game and you ought to be very brainy in order to use these tricks.

Show and Hide widgets

Now I've brought this tutorial for my friends using blogger and having problems in widget placement.


Advantages of Hiding widgets on some specific Pages

There are so may landing pages where a kind of widget is not suitable. As you should be aware of the Google AdSense program policy that, you're not allowed to visualize advertisements on your privacy policy, term and condition and disclosure and disclaimer pages. Now you will be very afraid of hearing this if were yet unaware with this fact. Relax! I've solution.


How to Show/Hide Widgets in Blogger

You're invited to come and get your hands dirty in this fucking coding. Now I am thinking, "WordPress is better than Blogger." Ok Leave it and let's start.

Find the title of that widget on the template HTML of your blog and then anticipate whether to show it or hide it. If it has to be shown, then on which page. If it is a specific page, post or should be a type of page there.


A Example Code Snippet of a Widget

<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>


Above code is for a RECENT POST WIDGET and HTML1 is the ID and Type HTML says that it's a HTML/JAVA script widget.

Now hope your understood this coding and let's begin now.


 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 B Widget only in Posts

<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>

Hide Widget in Post Page

<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>

 Show that widget only in Specific Page/post

<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>
Make sure to change the URL of the page with the desired page URL where you want to show that widget.

To Show widget in Static Pages Only

<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 it 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>

Make sure to use it with due diligence.

Hope this article helped you. 

Hi There, I’m Vashishtha! Just another tech-savvy blogger on the plannet with a super power of troubleshooting.


EmoticonEmoticon