--> How to Show and Hide Widgets in Blogger? | Experience Lab - Online business creation and development guide for bloggers and startups

How to Show and Hide Widgets in Blogger?

Blogger Conditional Statements can be used to control the display of HTML elements on certain pages or to set different styles for different...



show-hide-widgets in bloggerBlogger Conditional Statements can be used to control the display of HTML elements on certain pages or to set different styles for different Pages. Some questions that are most asked are : How to Show blogger widget on homepage only? How can I show widgets only on sub pages? How can I hide widgets on Static pages? How to show widgets on selected pages in blogger? To answer all these questions today's tutorial will be a delicious one. Its really important to control widget Display in Blogger using Blogger Conditional Statements. Some widgets are meant for homepage only while some makes sense when you show it at your Contact Pages, About Me pages or static pages. So how do we actually set the conditional where to display an HTML element or widget and where to hide it? The trick is really simple. You just need to enclose your widgets in few pieces of conditional statements. So lets jump straight on how to manage widgets on different pages in blogger.


UPDATE Now you can use Conditional tags even for Mobile Devices!



Its often the HTML/JavaScript widget that is widely used for adding your customized widgets to Blogger and its mostly this widget that needs to be easily managed. Since you often paste some widget code inside HTML/JavaScript widgets so the only extra thing that you need to do in order to control widget’s display is to enclose that code between two pieces of code as shown in each control codes below,




Note:

  1. Item Pages Include Posts only

  2. Index Pages Include Homepage and Search/Label Pages





How to Show Widgets/HTML Only On Homepages?



Simply enclose the code inside HTML/JavaScript widget between these conditional lines,




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

WIDGET CODE GOES HERE

</b:if>


where WIDGET CODE GOES HERE is the code of the widget you want to show or hide.


How to Hide Widgets On Homepages?


Same procedure here,


<b:if cond='data:blog.pageType == "item"'>

WIDGET CODE GOES HERE

</b:if>




How To Show Widgets Only On Static Pages?



<b:if cond='data:blog.pageType == "static_page"'>

WIDGET CODE GOES HERE

</b:if>


How To Hide Widgets On Static Pages?



<b:if cond='data:blog.pageType != "static_page"'>

WIDGET CODE GOES HERE

</b:if>


How To Show a Widget On a Selected Post Only?



<b:if cond='data:blog.url == "URL OF Selected Post"'>

WIDGET CODE GOES HERE

</b:if>


How To Hide a Widget On a Selected Post?



<b:if cond='data:blog.url != "URL OF Selected Post"'>

WIDGET CODE GOES HERE

</b:if>




How to Show HTML On First Post of Homepage?


If you want to show HTML content on first post of your homepage and not on every post that are displayed on homepage then use the following syntax,


<b:if cond='data:post.isFirstPost'>

WIDGET CODE GOES HERE

</b:if>

Sometimes you would prefer showing a Featured or Latest ribbon image on the first post or you may wish to display some stuff only on first post summary, in that case you can surely enclose the HTML inside the above conditional statement.




How to Show Widget On Index Page?




Index pages include labels/search pages, archive pages and the Homepage.  To show widget or HTML on these pages use the following syntax,


<b:if cond='data:blog.pageType == "index"'>

WIDGET CODE GOES HERE

</b:if>




How to Hide Widget On Index Pages?



Use this code


<b:if cond='data:blog.pageType != "index"'>

WIDGET CODE GOES HERE

</b:if>






How to Show Widget On Search Page?


Search Page in Blogger blogs include all Label Pages and search pages displayed when a user searches a query using the search box.  To show widget or HTML on search pages use the following syntax,


<b:if cond='data:blog.searchLabel'>

WIDGET CODE GOES HERE

</b:if>






How To Control Blogger’s Official Widgets?


The same procedure can be applied to Blogger’s official widgets like About Me, Archives, Poll etc. For controlling that widgets do this,


  1. Go To Blogger > Design > Edit HTML

  2. Backup your template

  3. Check the Expand Widgets Templates Box

  4. Search for the title of the widget you want to control

  5. The code for the widget will look something similar to this one,



<b:widget id='HTML' locked='false' title='WIDGET-TITLE-HERE' type='Profile'>

<b:includable id='main'>

LARGE CHUNK OF WIDGET CODE

</b:includable> </b:widget>

On finding the title in place of WIDGET-TITLE-HERE you will find two similar codes like those I have shown in bolded blue  You just need to add the Controlling codes in the following manner. For example if you wish to show a widget at Homepage only then do this,


<b:widget id='HTML' locked='false' title='WIDGET-TITLE-HERE' type='Profile'>

<b:includable id='main'>

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

LARGE CHUNK OF WIDGET CODE

</b:if>

</b:includable> </b:widget>



That’s it. Do the same for applying any controlling code. I hope this was useful :)


COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: How to Show and Hide Widgets in Blogger?
How to Show and Hide Widgets in Blogger?
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaemeqkYi660KyP1hESWG3LezVKbODyQo73MS75JMe_XPTX7XQcZvr9JzXtwoVPtJyQiupHjMS_iICxBOJ3IhR5osG-xzLx3vhP6dY1sqvdAySU86ebDPE4rJrfF4iThZQN5D5_j579v4/?imgmax=800
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaemeqkYi660KyP1hESWG3LezVKbODyQo73MS75JMe_XPTX7XQcZvr9JzXtwoVPtJyQiupHjMS_iICxBOJ3IhR5osG-xzLx3vhP6dY1sqvdAySU86ebDPE4rJrfF4iThZQN5D5_j579v4/s72-c/?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2011/01/how-to-show-and-hide-widgets-in-blogger.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2011/01/how-to-show-and-hide-widgets-in-blogger.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy