We had a query in the forum on how to make a gadget appear only on mobile home page. So thought of sharing it.
(Note - This post is for Blogger's first generation classic themes and not applicable if you are on a new generation responsive templates)
Also Read: How to make a gadget appear only in Home page or the page you wish?
Also Read: How to make a gadget appear only in Home page or the page you wish?
- Sign in to blogger.
- First Backup your blogger template.
- Go to Layout.
- Add a HTML/Java Script gadget that you want to make appear only in homepage of your blog and title it as homeonly(for qucik reference)
- Go to Dashboard > Template > Edit HTML.
- Press Ctrl + F and find homeonly. You will see a code as follows.
<b:section class='main' id='main' preferred='no'>
<b:widget id='HTML1' locked='false' title='homeonly' 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> - Replace the code highlighted in yellow above, with the following codes respectively.
- <b:if cond='data:blog.pageTitle == data:blog.title and data:blog.isMobile'><data:title/></b:if>
- <b:if cond='data:blog.pageTitle == data:blog.title and data:blog.isMobile'><data:content/></b:if>
- Now add a mobile='yes' as highlighted below so that the gadget actually appears in mobile template and the code in Step 5 will look as below.<b:section class='main' id='main' preferred='no'>
<b:widget id='HTML1' locked='false' title='homeonly' type='HTML' mobile='yes'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><b:if cond='data:blog.pageTitle == data:blog.title and data:blog.isMobile'><data:title/></b:if></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:blog.pageTitle == data:blog.title and data:blog.isMobile'><data:content/></b:if>
</div> - Save Template. You got it!
Nice post
ReplyDeleteThank you.
Delete