Skip to main content

How to show and hide widget in selected pages





In This article I am going to tell you about, How to show and hide widget in selected pages.

Primarily you have to knowledge ofHow to add widget in blog and How to find location of widget in template HTML Editor.



This article is like one simple experiment. You would done this easily.

Let us start.
I am going to experiment on Label widget. You can experiment on different widgets. For example I am use Label widget here.
You have to go to layout section for find out the location of label widget.

Must read How to find the location of widget.

The main experiment is started.

Find label widget in HTML Edit of template :

The label widget look like in html below. We have to do some small modification in this code for hide and display widget. The modification is add simple two line of code in this widget.





<b:widget id='Label1' locked='false' title='Labels'
type='Label'>


 <b:includable id='main'>
  <b:if
cond='data:title != &quot;&quot;'>

<h2><data:title/></h2>
  </b:if>
  <div
expr:class='&quot;widget-content &quot; + data:display +
&quot;-label-widget-content&quot;'>
    <b:if
cond='data:display == &quot;list&quot;'>
      <ul>
        <b:loop
values='data:labels' var='label'>
          <li>
            <b:if cond='data:blog.url ==
data:label.url'>
              <span
expr:dir='data:blog.languageDirection'><data:label.name/></span>
        
<b:else/>
              <a
expr:dir='data:blog.languageDirection'
expr:href='data:label.url'><data:label.name/></a>
        
</b:if>
            <b:if
cond='data:showFreqNumbers'>
              <span
dir='ltr'>(<data:label.count/>)</span>
        
</b:if>
          </li>
    
</b:loop>
      </ul>
    <b:else/>
      <b:loop
values='data:labels' var='label'>
        <span
expr:class='&quot;label-size label-size-&quot; +
data:label.cssSize'>
          <b:if
cond='data:blog.url == data:label.url'>
            <span
expr:dir='data:blog.languageDirection'><data:label.name/></span>
      
<b:else/>
            <a
expr:dir='data:blog.languageDirection'
expr:href='data:label.url'><data:label.name/></a>
      
</b:if>
          <b:if
cond='data:showFreqNumbers'>
            <span
class='label-count' dir='ltr'>(<data:label.count/>)</span>
      
</b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include
name='quickedit'/>
  </div>
</b:includable>
  </b:widget>




For display widget only on Home page :

modified code by adding a simple two line code. Additional code is highlighted by yellow color.





<b:widget id='Label1' locked='false' title='Labels'
type='Label'>
    <b:includable id='main'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <b:if
cond='data:title != &quot;&quot;'>

<h2><data:title/></h2>
  </b:if>
  <div
expr:class='&quot;widget-content &quot; + data:display +
&quot;-label-widget-content&quot;'>
    <b:if
cond='data:display == &quot;list&quot;'>
      <ul>
        <b:loop
values='data:labels' var='label'>
          <li>
            <b:if cond='data:blog.url ==
data:label.url'>
              <span
expr:dir='data:blog.languageDirection'><data:label.name/></span>
       
<b:else/>
              <a
expr:dir='data:blog.languageDirection'
expr:href='data:label.url'><data:label.name/></a>
        
</b:if>
            <b:if
cond='data:showFreqNumbers'>
              <span
dir='ltr'>(<data:label.count/>)</span>
        
</b:if>
          </li>
    
</b:loop>
      </ul>
    <b:else/>
      <b:loop
values='data:labels' var='label'>
        <span
expr:class='&quot;label-size label-size-&quot; +
data:label.cssSize'>
          <b:if
cond='data:blog.url == data:label.url'>
            <span
expr:dir='data:blog.languageDirection'><data:label.name/></span>
      
<b:else/>
            <a
expr:dir='data:blog.languageDirection'
expr:href='data:label.url'><data:label.name/></a>
      
</b:if>
          <b:if
cond='data:showFreqNumbers'>
            <span
class='label-count' dir='ltr'>(<data:label.count/>)</span>
      
</b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include
name='quickedit'/>
  </div>
</b:if>
</b:includable>
  </b:widget>



Detail:

Add <b:if cond='data:blog.url == data:blog.homepageUrl'>  below the <b:includable id="main">

And

Add </b:if> above the </b:includable></b:widget>

After modify this code save the template. Now label widget only display on the homepage only.

Similarly,

For hide widget only on Homepage:

Add <b:if cond='data:blog.url != data:blog.homepageUrl'>  below the <b:includable id='main'>

And

Add </b:if> above the </b:includable></b:widget>

For show widget only on post pages:

Add <b:if cond='data:blog.pageType == "item"'>  below the <b:includable id='main'>

And

Add </b:if> above the </b:includable></b:widget>

For hide widget only on post pages:

Add <b:if cond='data:blog.pageType != "item"'>  below the <b:includable id='main'>

And

Add </b:if> above the </b:includable></b:widget>

For show widget only on particular page:

Add <b:if cond='data:blog.url == "here put the link of page"'>  below the <b:includable id='main'>

And

Add </b:if> above the </b:includable></b:widget>

For hide widget only on particular page:

Add <b:if cond='data:blog.url != "here put the link of page"'>  below the <b:includable id='main'>

And

Add </b:if> above the </b:includable></b:widget>

Comments

Popular posts from this blog

How to remove "view web version" link in your blog

Blogger.com provided more template for their users. These all templates are mobile friendly. On cell phone you can open your website like desktop version by click on "view web version"  link. This link is located in bottom of blog. But in cell phone the site open like desktop version does not look good. You want to delete "view web version" link then follow this tutorial. Let us start 1) First, you have to go to blogger Dashboard 2) Click on template which you move to template page. You can edit your blog in template by HTML and their customizing tool. 2) In template page you have to go to their customizing to by click on customize button. 3) On their customizing tool click on advanced for modification. The advance section is provided for you can design your blog by adding additional css code.

Facebook-The best way to promote website

There are many paid promotion for your blog is available in the internet world. But there are more free promotion available with little hard work. Facebook is one of them free blog promotion website.

Blogspot blog पर traffic कैसे increase करते हैं.

1) अपने ब्लॉग का content unique होना चाहिए. 2) दुसरे ब्लॉग से सामग्री की नकल मत करो. 3) अपने ब्लॉग को blogger listening में add करे.