Loading
Rujacksalad


Hiding Or Showing Widgets On Blogger Page





In this content Rujacksalad posts about "Hiding Widgets On Blogger Page".

On Blogger you can hide or show some widgets on blogger page for increasing the speed of loading the page or able to beauutfy the interface of the page. There are some codes that can show or hide widgets in the particular page. You can implement the code on the blogger template.

Okay, let's get started to hide or show widgets on Blogger page.


1. In the Blogger dashboard, you can click "Template" to start editing the template code. Click"Edit HTML" to start edit the blogger template or (XML format).

Hiding Or Showing Widgets On Blogger Page

2. Click "Expand Widget Templates" to expand all code of your template. 

The Code To Show Or Hide The Widget

 3. After you expanding the template Click "Ctrl+F" to try finding a code in the template. Find the code like "locked" to search the widget code in the template. then you will find some widget code like the picture below.

Trying Finding The Code To Show Or Hide The Widget

4. For the experiment, you can add the widget "HTML" to start trying. Then you must focus in code like this:


<b:widget id='HTML2' locked='false' title='' type='HTML'>
<b:includable id='main'>
  <!-- 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:includable>
</b:widget>

Then you can add some code like this:

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

Yes, you will see the additional code like

<b:if cond='data:blog.url == data:blog.homepageUrl'>
This is the code
</b:if>


That code is function to show only in the homepage.

There are some code you can use to show or hide in the particular page of Blogger.


1. Homepage


a. Show only in homepage


<b:if cond='data:blog.url == data:blog.homepageUrl'>
This is code or widget to show or hide
</b:if>

b. Hide only in homepage 


<b:if cond='data:blog.url != data:blog.homepageUrl'>
This is code or widget to show or hide
</b:if>

2. Item or this is usually called Article Page.


a. Show only in item (article page)


<b:if cond='data:blog.pageType == "item"'>
This is code or widget to show or hide
</b:if>

b. Hide only in item (article page)


<b:if cond='data:blog.pageType != "item"'>
This is code or widget to show or hide
</b:if>

3. Static Page


a. Show only in static page


<b:if cond='data:blog.pageType == "static_page"'>
This is code or widget to show or hide
</b:if>

b. Hide only in static page


<b:if cond='data:blog.pageType != "static_page"'>
This is code or widget to show or hide
</b:if>

4. Selected Post


a. Show only in selected post


<b:if cond='data:blog.url == "SELECTEDURL (http://www.rujacksalad.com/p/guest-post.html) "'>
This is code or widget to show or hide
</b:if>

b. Hide only in selected post 


<b:if cond='data:blog.url != "SELECTEDURL (http://www.rujacksalad.com/p/guest-post.html) "'>
This is code or widget to show or hide
</b:if>

5. Archive Page


a. Show only in archive page


<b:if cond='data:blog.pageType == "archive"'>
This is code or widget to show or hide
</b:if>

b. Hide only in selected post 


<b:if cond='data:blog.pageType != "archive"'>
This is code or widget to show or hide
</b:if>

6. Index Page (this page is showing to index all post on homepage if you click next then index page will show)


a. Show only in Index Page


<b:if cond='data:blog.pageType == &quot;index&quot;'>
This is code or widget to show or hide
</b:if>

b. Hide only in Index Page


<b:if cond='data:blog.pageType == &quot;index&quot;'>
This is code or widget to show or hide
</b:if>

Technique 2 to make the widget or code hide or show in particular page of Blogger


This technique is one of my favourite because this code is very flexible and fast to implement.

The first thing you must focus the widget code like this then you will meet code "(widget id='HTML2')". you can see I highlight HTML2, yes this code will use in the next step.

<b:widget id='HTML2' locked='false' title='' type='HTML'>
<b:includable id='main'>
  <!-- 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:includable>
</b:widget>

you must create CSS code like this in the head tag.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
#HTML2{display:none;}
</b:if>

Yes, the code above is functio to hide only in the homepage.

You can show the widget only in the homepage.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
#HTML2{display:none;}
</b:if>

I hope you enjoy this tutorial. : )

0 Comment:

Google Plus  Twitter  Youtube  RSS Feedburner

Categories

Computer
Creative
Gadget
Game
Hardware
Internet
Laptop
Movie
Music
Phone
Photography
Software
Tablet