How To Display Widgets On Certain Pages Properly For Optimize

Making dynamic blog is a blogger's dream. One way is to display widgets on certain pages. Many tutorials have explained this issue. However, those tutorials have not discussed the optimization in display widget on certain pages. Therefore, we add the word "properly" on the title of this post.

Why do we need to do optimization?

Previously, we have addressed clearly on posts about Main Steps In Blogging and How To Choose SEO Template, a template that should work fine on all browsers. Unfortunately, many people do not realize that when they hide the widget on a certain page, then the contents of the widget is missing, but the widget space still remains. So you will see a not precious blank space on your template. Especially, when your blog is opened with Internet Explorer. Therefore, you need to optimize it by turning off the empty space. For example, try to open the main page and every page of threelas.

How do I optimize?

Very easy, all you have to do is with give the css code "display:none" with the opposite condition from the condition of widgets to be displayed on certain pages. But before, you should note "id" of the widget. Since the "id" will be used on the css code. Consider the following example, we want to display Adsense widgets only on the main page only, then the widgets code will be

<b:widget id='AdSense2' locked='false' title='' type='AdSense'>

<b:includable id='main'>

<b:if cond='data:blog.url != data:blog.homepageUrl'>    <!--this code for displaying Adsense2 on non homepage-->

  <div class='widget-content'>

    <data:adCode/>

    <b:include name='quickedit'/>

  </div>

</b:if>                                     <!--this code for displaying Adsense2 on non homepage-->

</b:includable>

</b:widget>

Note the "id" widget above, this code will be used on css. This method is very familiar with you, right. However, this step is not finished. So optimization the code by giving the following code before </ head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>   <!--this code to remove widget space of Adsense2-->

<style type='text/css'>

#AdSense2{display:none !important;}

</style>

</b:if>      <!--this code to remove widget space of Adsense2-->

This method is applicable for each widgets you want displayed on certain pages. If you implement this, then your blog will look professional. Although simple, but it is very important for the quality of your blog.