Showing a Widget Only on Homepage in Blogger


Tip Abstraction:
        This blogger tutorials shows how to show a widget or content only on homepage in Blogger sites.

You may need to show some content or widget only on blog homepage made by Blogger.
These are some examples to show specific content only on homepage:
  • Showing some ads only on homepage
  • Showing authors’ details on homepage only. Because, it is not good to showing all authors’ details in all your blog pages.
  • Showing index or contents of your blog on homepage
  • Displaying welcome image only on homepage
  • Displaying a set of links or articles list on homepage.
  • If your template or design is dynamic or responsive, then homepage is not same as other pages.
  • If you hide all posts or article from home page, then you may include some other contents on homepage.
  • Special header, footer, or sidebar widget on homepage
For any other purpose, you may want to show some widget on homepage only, here this article describes how to show a content or a widget homepage only.
  • Edit HTML
Blogger Edit Theme HTML

  • Now come to the widget that you want to show only on homepage.
    You can use this option to jump directly to specified widget. You may expand widgets codes by using left black arrow icon.
Jump to widget in blogger HTML editor

Example:

Here I am going to show a widget of link list on homepage only.
So I came to the position of link list widget in HTML editor
<b: widget ………. Is the starting and </b:widget> is the end of every widget.


 <b:widget id='LinkList1' locked='false' title='Learn C Step by Step Methods' type='LinkList'>
              <b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target' ><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
            </b:widget>

In the widget code, add this code after <b:includable id ='main'> (the id may change)

                <b:if cond='data:blog.url == data:blog.homepageUrl'>              

Also write corresponding tag for if statement before </b:includable>

              </b:if>             

After successful addition, widget’s final code becomes:


 <b:widget id='LinkList2' locked='false' title='Learn C Step by Step Methods' type='LinkList'>
              <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'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target' ><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
                </b:if>
</b:includable>
            </b:widget>

How to show a widget on homepage only blogger

Now if you open your blog homepage you should see the edit widget on homepage and you can’t see on other pages. Like this, you can add this code to any widget that you want to display only on homepage.

Blogger Add Widget window contains many types of widgets like link list, picture list, text content, image gallery, etc including third party of HTML/JavaScript codes.

Tips:
  • Backup your template before editing by opening backup/restore option in template page
  • If you face any error message, then press ‘Ctrl’ + ‘Z’ to get back previous code, and retry until success.






No comments:

Post a Comment

Your Support Is Our Motivation