How to make Blogger widgets to show different content between desktop and mobile view

Content of widgets can be customized between desktop and mobile view. This can be achieved by using a boolean variable of "data:blog.isMobile".

The example below demonstrate how a widget would shows different contents between desktop and mobile view by depending on the conditional value of "data:isMobile" variable.

<div class="widget-content">
  <b:if cond="data:blog.isMobile">
    <!-- Show a text link in mobile view.-->
    <a href="http://www.blogger.com">
      Powered By Blogger
    </a>
  <b:else/>
    <!-- Show an image link in desktop view.-->
    <a href="http://www.blogger.com">
      <img expr:src="data:fullButton" alt="Powered By Blogger"/>
    </a>
  </b:if>
</div>

References or Credits:
http://code.blogger.com/2011/11/introducing-custom-mobile-templates.html