Now you can Subscribe using RSS

Submit your Email

Thursday, December 25, 2014

How to display widget only On Page Post or Homepage

Irvan Dev
How you can display your widget within posts or maybe Homepage. Dev Blog Tutorial subsequent is tips on how to display your widget for the post pages, the home-page or for the page that you want, one example is, we only wish to display it for the post pages or for the homepage. Maybe you 've been see different blogs and discover where the widget is only displayed in certain pages, perhaps because the blog owner's wants or asks from other people who would like to install the widget [for example advertisements widget ].
Follow the steps below

1. Login to your blogger panel admin
2. Click On Template » Edit HTML
3. Then Search widget that you want to change which will display. For example, I just wanted to show my widget Popular Post only on the post pages . Put the following code before the HTML element like this screenshot.

Popular post
Screenshot 1 images:acebangsam.us
4. Widget only appear on pages of posts <b:if cond='data:blog.pageType == &quot;item&quot;'> YOUR WIDGET CODE HERE </b:if>

Example 1

<b:section class='sidebar' id='tab1-popular-posts' showaddelement='yes'>
   <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
     <b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
     </div>
</b:if>
</b:includable>
   </b:widget>
 </b:section>

5. Widget only appear on the home page  <b:if cond='data:blog.url == data:blog.homepageUrl'> YOUR WIDGET CODE HERE </b:if>
  more details, see the screenshot below.

Widget only appear on hompage
Screenshot 2 images: acebangsam.us

Example 2

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
     <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div>
   </div>
</b:if>
</b:includable>


Click save and see the results, good luck


Irvan Dev / Author & Editor

I am Irvandev, I m a fairly easy blogger and it's, untill today My spouse and i still love writing and submitting articles for blog site "Blog Irvandev".

0 comments:

Post a Comment

Coprights @ 2016, Blogger Templates