Home » » How to Display Widget Only in Homepage / Page Posts

How to Display Widget Only in Homepage / Page Posts

When setting up the blog design , sometimes we are constrained by the number of widgets displayed , so the widget looks crammed and pages to be so long . In other cases , sometimes we just want certain widgets only appear on specific pages , either the homepage , static pages , as well as post pages only. I used to talk about how to hide sidebar in Blogger particular page , by using conditional tags and CSS ( display ) , and if you want only to hide one or more widgets , then certainly less precise when applied . So , on this occasion , I would like to share about bagamana show or hide one or more widgets in a particular page , and other pages menampikannya on the type .

Concept Hack Displays Widgets On Specific Pages
This method is still the same as the previous article I mentioned , which use conditional tags ( if b ) , one of the Blogger XML tags , to give the order for the elements shown on the part / certain pages and hide it in the / another page . Conditional ( if ) is also known as its use in PHP , and is also known in English ( if clause , a conditional sentence ) hehehehe ..... The difference with the previous method , which means I have to offer is not going to use CSS , but using conditional tags directly on element to be given command , which in this case is the widget elements .

The steps Showing Widgets On Specific Pages

1 . Seeking ID Widget
Before giving conditional tags , you must know the widget ID to be displayed on any given page . How to look for it is very easy :

a. There are two ways to access the editor widget ( actually there are three , namely through the edit HTML , but how it will be more complicated :

- If you are in a state Blogger login , you can directly access the " quickedit " directly from the blog page , quickedit is a tool for editing widget directly , are typically located at the bottom right corner of the widget , a screwdriver and a key icon ( screwdriver and wrench ) . Click the icon on the widget you want and it will appear a pop - up window where you can edit the content widget .

- Or access the page via the widget editor " Layout " , then click the " edit " in one part of the widget . This will bring up a pop - up window .

b . Look at the URL / address in a browser window pop up on the page . The layout of the widget ID is at the end of the URL ( the URL slider to the right ) . Consider the example shown below:
garlandtheme.blogspot.com

d . Id save the widget , for example, from the above example , Id widgets that I want to edit is " HTML11 " .

2 . Gives Conditional Tags In Element Widget
To display the widget on a particular page , you must add the conditional tags ( if cond b ) the elements of the desired widget . Accordance with the following steps to add the widget example already mentioned above :

a. Go to the page template ( Dashboard > Template )
b . Click the " Edit HTML " > Proceed .
c . Do not forget to click / check " Expand Widget Templates " to display all the elements of a widget in the editor .

d . Press CTRL + F , enter the desired widget ID that previously had been sought and prepared . In this example I will use the widget id " HTML11 " as an example and follows more or less elements buddy widget :

e. Then add the conditional tags after <b:includable id='main'> and closing tag before </ b: includable>. The following conditional tags based on page types and how to add it, note the red tag and that is what should be added:

How to Display Widgets only on Home / Index (Homepage)


<b:widget id='HTML11' 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>

How to Display Widget in Post Pages Only

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

How to Display Widgets only in Static Pages

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


How to Display Widgets only on Home Archives (Archive)

<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
  <!-- 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>



How to Display Widget Only on One Page (by URL)

<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "Replace the URL page here"'>
  <!-- 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>

f. After conditional tags are added, save the template. 

If you want to do the same thing on some widgets, you have to perform and repeat the same manner as above: ID search widget, the widget to find the element ID in the edit HTML, and insert conditional tags based on the type of page to the widget element. Save and Done. 

Hopefully useful and have a nice Blogging.
Share this article :

0 Comments:

Posting Komentar

Ada Masukan? Sampaikan Yuk....



                                                                                              Donni Antonius Sinaga






 
Support : Your Link | Your Link | Your Link
Copyright © 2013. Teras Mimpi - Erek Erek dalam Buku Mimpi Lengkap dengan Abjad Bergambar Dan Kode Alam - All Rights Reserved
Responsive by Mas Yadi Template Created by Creating Website
Proudly powered by Blogger