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

Labels:

Popular posts from this blog

Sachin Tendulkar's emotional farewell Speech at Wankhede Stadium, Mumbai - Full Text and Video

Full Text and Video of Sachin Tendulkar's emotional farewell Speech on Nov 16, 2014 On November 16, 2013 - Sachin Ramesh Tendulkar played his last international cricket match against West-Indies at the at Wankhede Stadium, Mumbai. After the match he gave an emotional farewell speech. No one would be able forget the speech. The eyes of the gathered people were tearfull. Through out the speech Sachin thanked each and everyone who supported and encouraged him to build up his glorius career which spanned 24 years.
Read more

How to loop through the items in a select box using Javascript?

Looping through the items in a select box using JS Use the code given below to parse through the options in a select box and alert the Text and Value of each options. you can alter the function as per your need. sample code is given below: <form> <select id="test" name="test"> <option value="First Value" >First Text</option> <option value="Second Value" >Second Text</option> <option value="Third Value" >Third Text</option> <option value="Fourth Value" >Fourth Text</option> <option value="Fifth Value" >Fifth Text</option> </select> <input type="button" value="Check" onclick="loopSelectBox('test')" > </form> <script> function loopSelectBox(selectBoxId){ var obj=document.getElementById(selectBoxId); for(i=0; i < obj.options.length ;i++){ alert("Value :...
Post a Comment
Read more

Autobiography by Cricket legend Sachin Tendulkar "Sachin Tendulkar - Playing it My Way : My Autobiography"

Autobiography by Cricket legend Sachin Tendulkar Cricket batting legend Sachin Ramesh Tendulkar's  autobiography was released on November 5, 2014 in a high profile launch function in Mumbai. . Earlier  on his Twitter page Sachin has announced the release date of his Autobiography " Sachin Tendulkar - Playing it My Way : My Autobiography "   as November 6th 2014 , but the book was released a day earlier. It took three years to write this book which he says as the Second innings of his life. Sachin Ramesh Tendulkar, the all time Genius of World Cricket was born on April 24, 1973 at Bombay (now Mumbai) in Maharashtra. He hold the record for scoring most runs and hundreds in Tests and ODIs. He scored a total of more than 34000 runs from One day Internationals (ODI's) and tests. He was part of the World cup winning team of 2011. He was a great all rounder. His  debut match was against    Pakistan  at Karachi during Nov 15-20, 1989. He played h...
Read more


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