Skip to main content

How to add a widget that to be displayed only on mobile version a blogger website?

How to put a widget on blogger web layout that to be displayed only on mobile version a blogger / blogspot website?

Here are the steps for adding a custome widget to blogger site layout which is to be shown only on Mobile version of the blogger web page. Please make sure that you take a copy of Blogger template code before editing it.

Step1: Go to Admin area of your Blogger (Blogspot) website

Step2: Open the Layout of your blog

Step3: Click on "Add a Gadget" to add a new Gadget of type "HTML/JavaScript"
     -- Enter a Title to identify your new gadget
     -- Enter gadget content in the "Content" box
     -- Save the widget



Step4: Now take the Template section of the blog and click on "Edit template" button

Step5: Search for the text you given as the title for your new Gadget, You can find your new gadget code similar to the one given below:

<b:widget id='HTML1' locked='false' title='YOUR_NEW_GADGET_TITLE' 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>
<b:if cond='data:blog.pageType == "index"'>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

please note : the text "YOUR_NEW_GADGET_TITLE" will be your gadget title.


Step6: Add the attribute mobile='only' to the "b:widget" tag, like the one given below

<b:widget id='HTML1' locked='false' mobile='only' title='YOUR_NEW_GADGET_TITLE' 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>
<b:if cond='data:blog.pageType == "index"'>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

if you dont want to display your gadget name to the user, then change the code like this:

<b:widget id='HTML1' locked='false' mobile='only' title='YOUR_NEW_GADGET_TITLE' 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>
-->
<b:if cond='data:blog.pageType == "index"'>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Step7: Save template and check the Layout page. You will not be able to see your new gadget there.

Step8: Now take your blog on browser in the mobile mode ie, http://www.yourblogname.blogspot.com/?m=1




ANOTHER OPTION

Another option to display mobile specific contents is to use the Blogger IF condition statement.

Here you will check blogger variable "data:blog.isMobile". if it is "true", then site is in mobile mode.
If you want to place Javascript Codes ( like Adsense code or FB plugin codes) inside the blogger conditional statement, then you have to escape the JS script by using an HTMl escape tool.


<b:if cond='data:blog.isMobile'>
----------
----------
----------
Your code comes here
----------
----------
----------
</b:if>

Now take the Template section of the blog and click on "Edit template" button. Put the code in the area where you wish to show the new mobile specific gadget content.

Related Topics

Popular posts from this blog

Payback Points - How to redeem - How to merge multiple payback accounts - Block Payback card - Payback customer care

Your SBI Debit card ending with XX0000 is deactivated only for Internet txn.

SBI account holders may have received an SMS with following message, supposed to be from State Bank of India (SBI).

Your SBI Debit card ending with XX0000  is deactivated only for Internet txn. To activate send SMS "SWON ECOM 0000" to 09223966666. No change for ATM/POS usage
** Replace the four Zeros with last 4 digits of your debit card number

Recently many of the SBI account holder has losed their money due to a hi-tech ATM robbery which happened in Thiruvananthapuram, capital city of Kerala.

How to turn off BSNL Buzz services - Steps to deactivate BSNL Buzz messages

BSNL Buzz is a service from BSNL for mobile customers, in which when your phone is in idle mode, teasers or small buzz messages related to topics like entertainment, lifestyle, sports, business, fun, polls, daily news updates are delivered to your mobile. When you activate a BSNL SIM card, through which BSNL BUZZ is available, you automatically accept the terms and conditions for teaser delivery.

Recently, I bought a new BSNL SIM card. After the activation, when ever I unlock the phone, I was getting lots of buzz message one after another. I have to click on cancel / back button multiple time to view the home screen. Some times when some call arrives, it was difficult to attend calls due to this teaser popups. So I decided to deactivate the BSNL buzz. Here are the steps to Deactivate or Turn Off BSNL Buzz.


Urgent Openings for PHP trainees, Andriod / IOS developers and PHP developers in Kochi Trivandrum Calicut and Bangalore. Please Send Your updated resumes to recruit.vo@gmail.com   Read more »
Member
Search This Blog