Wednesday, June 13, 2012

How to Display and Hide Widgets on Specific Pages

  No comments
Show or hide the widget on certain pages, of course, in addition to efficiency will also make the blog look more dynamic and certainly nice to look at. So how?? please follow the steps below:







As always login to your blog and go directly to the Edit HTML

1. Displays widget only the front page only
For example, here I will take a sample profile widget that will only be displayed on the front page alone. Once entered into the Edit HTML search widget code "Profile" use Ctrl + F to facilitate the search.


<b:widget id='HTML2' locked='false' title='Profile' 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 != &quot;&quot;'>
<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:
Blue code is the code that must be inserted in the widget to appear only on the front page alone.

2. Display the widget only on post pages
Widget code below (Related article) is a widget that I use in my blog sidebar, which will only appear on post pages.

<b:widget id='HTML4' locked='false' title='Related Article' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<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:
Such a way that the above code blue is the code that is inserted in the widget to appear only on post pages.

NOTE:
For those who struggle to find the widget code, please observe the following steps:

  • Go to the Layout, select the edit on the widget you want to search
  • Look at the end of the URL in the edit page widget, consider the figure below,
written in blue block, that is code that can be used to petrify find the widget code 
that you want to search.




No comments :

Post a Comment