Okay.. bloggers. this time i will give you a tutorial how to set display of blog widget on only specific pages. surely, it is so useful for you that install many widgets on blog. your widgets can you manage where it is display and where it is not displayed. if you use many widgets on blog but you don’t set it, but you display it on all pages of your blog, your blog will be seen complicated and messy. in addition, it is will enlarge the size of your blog and make it heavy loaded. well, maybe, sometimes you want a widget display only on static pages, or only on homepage, or only on post pages. now, after you finish read this article, you can set it by easy.
this way actually is very simple. it is use conditional tag (<b:if>), a XML tag that maybe ever you hear. this tag will determine a object on your blog to shown on one page but hide on other pages.
okay.. let see and follow the steps below guys :
1. determine and know widget id.
before you set a widget, you must determine and know the ID of widget you specify. to know it, just go to “layout/page elements” menu > choose and edit the widget you set -then a pop up window will appear – > look at the address bar -see the image below- > find the id.
remember that id, because that is the widget id will we set. example. the id that will used is HTML4
tips: set a widget that really suitable to show or hide. prioritize most important and useful.
2. Edit HTML
after you have been determine and know widget id, Go to “template” menu > edit HTML > proceed. then, check “expand widget HTML”.
find the html code of HTML4 -press ctrl + f, type HTML4 and you will find it-.
after that, put the red code like below :
*for show widget on homepage and hide on other pages.
<b:widget id=’HTML4′ locked=’false’ title=” type=’HTML’>
<b:if cond=’data:blog.url == data:blog.HomepageUrl’>
<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:if>
</b:widget>
*for show widget on Post pages and hide on other pages.
<b:widget id=’HTML4′ locked=’false’ title=” type=’HTML’>
<b:if cond=’data:blog.PageType’==”item”’>
<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:if>
</b:widget>
*for show widget on static pages and hide on other pages.
<b:widget id=’HTML4′ locked=’false’ title=” type=’HTML’>
<b:if cond=’data:blog.PageType != “static_page”’>
<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:if>
</b:widget>
*for show widget on archive page and hide on other pages.
<b:widget id=’HTML4′ locked=’false’ title=” type=’HTML’>
<b:if cond=’data:blog.PageType == “archive”’>
<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:if>
</b:widget>
*for show widget on special page (based URL) and hide on other pages.
<b:widget id=’HTML4′ locked=’false’ title=” type=’HTML’>
<b:if cond=’data:blog.PageType == “Your Page URL Here”’>
<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:if>
</b:widget>
*tips : before you edit html, get used to backup your template first. it in order when you do an error, you can back your template like before.
you can choose which match with your requirement.
3. if you have finish edit and set. don’t forget to save it.
that’s it. just practice it. if you have any questions and error when edit HTML, you can ask me by leave the comments below. i waiting for your response.
hope useful and Happy Blogging 🙂
