How to make the following code to work in mobile template of blogger


#1

Step- 1 Below </b:skin> pasted the following code-

<b:if cond='data:blog.url !=
&quot;http://yourblog.blogspot.com/search/label/Label&quot;'>
<style>
#Gadgetid{
display: none;
}
</style>
</b:if>

Step-2 Below<b:loop values='data:post.labels' var='label'> pasted the following code:

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<b:if cond='data:label.name == &quot;Label&quot;'>
<style>
#gadgetid{
display: block !important;
}
</style>
</b:if>
</b:if>

#2

Simply Use Media Queries ! They’re The Best -

@media (max-width:728px) {
#Gadgetid {display:none!important;}
}

It Will Work For You ! :sunny:


#3

Where am i suppose to put this @media in the template.


#4

Search For ]]></b:skin> and paste the code above this code :smiley:


#5

Thanks for the reply. But this does not work.:expressionless:

Actually i want label specific widget. Suppose you have a gadget, and you want the gadget to be displayed only on post pages that have a particular label. The gadget won’t be shown in any other pages- this includes your homepage, static pages and other post pages that don’t have the said label. Could you please tell how can this be done?


#6

To achieve what you want, firstly you will need to hide the gadget on all pages and then make it visible only on those which have a specific label

Firstly to hide the gadget on all pages, add the following CSS (To add CSS, go into Template > Customise > Advanced > Add CSS > Paste the following CSS > Apply to Blog )

#GADGETID{
    display: none;
}

After that, to make the gadget visible on the posts which have a specific label, add the following code inside <b:includable id='post' var='post'> block

<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == "YourLabelName"'>
    <style>
        #GADGETID{
            display: block !important;
        }
    </style>
</b:if>
</b:if>
</b:if>

#7

Thank You Prayag For this kind help… Unfortunately this method is working only in Desktop version of Blogspot not in Mobile view. Please Suggest some modification so that same can work for both Mobile as well as Desktop view. Thanks.


#8

Paste the code from the second step above in <b:includable id='post' var='mobile-post'> block as well

Also make sure two more things

Firstly Custom Mobile Blogger template are switched on (To do that, go into Template tab of your dashboard, click on the gear icon beneath the mobile template preview and select the Custom option from the Choose mobile template dropdown.)

Secondly, the widget that you want to display in mobile has a mobile='yes' attribute in its b:widget tag


#9

Its working… Prayag… No words can thank you…You are really my Mentor. Salute!:grinning:


#10

Glad That Your Problem Get Solved ! Keep Asking Such Questions :smiley: