Blogger is wonder platform which can modified according to our needs. You can easily do any thing with Blogger blogs. Today I’m going to write a tutorial on How to Show/Hide Blogger Widget/Gadgets on different pages. As you know Blogger Widgets are displayed on all pages of your blog. But this can annoying to some users. Or may be you want to show some thing only on a single page. Or any widget only on Homepage and not on other pages. For the purpose of engaging readers more into your blog, you can adjust widgets according to their needs. So basically I’m going to write how you can Hide or Show any Blogger widget on any Page. Having all widgets all pages will cause blog to load slowly. So this tutorial will help you in many cases.
Hide/Show Widgets in Blogger
For hiding any widget from any specific place, first of all you need to find the code of that widget in your blogger template code. Then we will use conditional tags to achieve the result.
1. Go to Blogger Dashboard >> Layout >> Now, give Unique name to that widget which you want to Hide/Show. In my case, I have named it “BloggerjinFacebook”. Doing this will help us to easily find its code in the template code and then we can add conditional tags around it. So, after you named it, save the widget.
2. Go to Blogger Dashboard >> Template [Backup Template] >> Edit HTML >> check the “Expand Widget Template” box >> Now, search for the Unique name of Widget you have given in Step 1. In my case it was “BloggerjinFacebook”. When I searched this, I get below code. This is actually the code of that widget. Your Widget code will be almost similar to this. (Remember I’m using the HTML/Javascript widget, so there may be some difference if you are using any other).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<b:widget id='HTML2' locked='false' title='BloggerjinFacebook' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> |
This is the code which makes your widget. Now, what we need to do is to add Conditional tags according to our requirements. If you want to show this widget only on Homepage, Post pages, static pages, Archives or any page, there will be little changing in conditional tags according to needs. Now, just add these two lines of code which are highlighted in below codes. Place them exactly where they are. After adding this one line at the top and second at the bottom, your widget will do exactly same according to the conditional tags you choose from below 8 examples.
1. To Show Blogger Widget Only on Homepage
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<b:widget id='HTML2' locked='false' title='BloggerjinFacebook' 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 != ""'> <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> |
2. To Show Blogger Widget Only on Post Pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<b:widget id='HTML2' locked='false' title='BloggerjinFacebook' 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 != ""'> <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> |
3. To Show Blogger Widget on a Specific Page
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<b:widget id='HTML2' locked='false' title='BloggerjinFacebook' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.url == "URL of the page"'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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> |
Note: Replace “URL of the Page” with the URL of the page where you want this widget to appear.
4. To Hide Blogger Widget Only on a Particular Page
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<b:widget id='HTML2' locked='false' title='BloggerjinFacebook' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.url != "URL of the page"'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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> |
5. To Show Blogger Widget Only on Static Pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<b:widget id='HTML2' locked='false' title='BloggerjinFacebook' 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 != ""'> <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> |
6. To Hide Blogger Widgets on Static Pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<b:widget id='HTML2' locked='false' title='BloggerjinFacebook' 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 != ""'> <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> |
7. To Show Blogger Widget Only on Archive Pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<b:widget id='HTML2' locked='false' title='BloggerjinFacebook' 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 != ""'> <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> |
8. To Hide Widget Only on Archive Pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<b:widget id='HTML2' locked='false' title='BloggerjinFacebook' 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 != ""'> <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> |
You can choose what you want to do with your widget. Almost 8 examples I have given above. You can play with these Conditional tags on other places and get more knowledge about Blogger. I will suggest you to always play with Blogger code. But not on your original blog. Create a test blog and do all experiments on that blog first. Hope this post will help you a lot in Hiding or Showing Blogger Widget or Gadgets on different places in Blogger. Have a nice day!
Pingback: Top Sticky Bar with Share Buttons for Blogger - Bloggerjin