• Hide/Display/Show Gadgets on Home/Post/Static/Archive Blogger Pages | BST

    Advertisements


    Sometimes, we need to display / show the widgets or gadgets to the homepage of Blogger, or sometime we need to display the gadgets to the post pages, static or archive pages. However, why we need to show or hide the gadgets on specific pages in blogger? Suppose, you create a featured content gadget that shows the most popular posts of your blog, then it is not necessary to show this gadget to everywhere in your blog. Since, a featured content gadget uses the JavaScript and Jquery codes, and having the high quality images so if you show the featured content gadget to everywhere, then the JavaScript, Jquery and HQ images will be load every time to open any page of your blog, which will increase the loading time, and bandwidth. That is the reason why professional blogs having the featured content gadget to the home page only. Here, I am writing about any gadgets to show or hide on specific pages in Blogger so that you can do it for your right sidebar gadgets, left sidebar gadgets, footer gadgets and featured content gadgets. Therefore, here is how to hide / show gadgets on home, post, static pages in Blogger.

    how to hide show gadgets widgets in blogger
    Show/Hide/Display Gadgets/Widgets in Blogger
    Related Topics:

    Show / Hide Gadgets/Widgets to Home / Posts / Static Pages on Blogger Blogs

    Firstly, go to your Blogger Dashboard --> Template(Under more options) --> Edit HTML(and Proceed) ( Expand Widget Templates). You will see the complete Blogger source code here, now you have to find the peace of code that related to your gadget you want to show or hide. Since, this source code having your all gadgets code so you have to chose the correct one. For that, find the code (using ctrl+F) <b:widget id='HTML that is the common starting code for all of your gadgets. Now, look on the complete line having the above code is like,
    <b:widget id='HTMLx' locked='true' title='Your Title' type='HTML'>

    Where x can be any integer that will be unique for each gadget but that is not sufficient to find the correct gadget's code. Instead, you will see a title field that may be blank or any name like Your Title, which is a title name of your gadget. Therefore, if you don't choose any name of the gadget then it will be blank as title=''. If you want to show or hide any gadget, you have to give it a name for choosing the correct gadget's code, and later you can remove its name. If you have already created a name for it, then don't worry proceed the below steps otherwise go to Blogger gadget's page and give it a name.
    Now, you can easily find your desire gadget's HTML code by it's title name, which will be look like as follows,
    <b:widget id='HTML19' locked='false' title='Temporary name' 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>

    Now, we will add some extra code into the above code to show or hide them on any pages. I am adding only two lines (look at blue color text) in the above code as shown in the following code,
    <b:widget id='HTML19' locked='false' title='Temporary name' type='HTML'>
    <b:includable id='main'>
    MY FIRST LINE CODE
    <!-- 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>

    Now, replace the MY FIRST LINE CODE with the following table value on any cases you want. We have created a simple table for you to choose your requirement by cases, read the want/do list, and copy my first line code.

    Cases Want \ Do Replace MY FIRST LINE CODE with
    1 Display gadget on home page in Blogger. (Hide gadget from static and post pages on blogger.) <b:if cond='data:blog.url == data:blog.homepageUrl'>
    2 Display gadget on index pages, such as homepage, labels page and yearly archive page. <b:if cond='data:blog.pageType == &quot;index&quot;'>
    3 Display gadget on post pages in Blogger. (Hide gadget from homepage and static pages in Blogger.) <b:if cond='data:blog.pageType == &quot;item&quot;'>
    4 Display gadget on static pages in Blogger. (Hide gadgets from homepage and post pages in Blogger.) <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    5 Show gadgets on post and static pages in Blogger.(Hide gadgets from index pages, including homepage, in blogger.) <b:if cond='data:blog.pageType != &quot;index&quot;'>
    6 Show gadgets on homepage and static pages in Blogger. (Hide gadgets from post pages in Blogger.) <b:if cond='data:blog.pageType != &quot;item&quot;'>
    7 Display gadgets on homepage and posts pages in Blogger. (Hide gadgets from static pages in Blogger.) <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    8 Display gadgets only on archive pages in Blogger. <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    9 Display gadgets only on a specific page in Blogger. <b:if cond='data:blog.url == &quot;Your_URL_Here&quot;'>
    10 Display gadgets on anywhere except any one specific page in Blogger. <b:if cond='data:blog.url != &quot;Your_URL_Here&quot;'>

    In 9th case, paste your page URL instead of Your_URL_Here to show your gadget only on that page.
    In 10th case, paste your page URL instead of Your_URL_Here to hide your gadget only on that page.




    Share the Love!

    Did You Like This Post? Get the Latest Blogger & SEO Technology Directly From Your Inbox Just Enter Your Email and Verify it!



2 comments:

  1. noir says:

    this site gives the clearest instruction. thank you, excellent work.

  1. noir says:

    this site gives the clearest instruction. thank you, excellent work.

Leave a Reply