Blogger Blogspot image header1 différente pour Mobile à partir du bureau

Question

Vous cherchez à afficher une image de fond différente sur mon thème de modèle de mobile par rapport au thème de bureau sur blogger/blogspot blog.

Actuellement, il affiche la même image téléchargée pour le thème de bureau dans Layout/Header1 Widget.

L'extrait de code ci-dessous montre le widget Header1. Je voudrais A: Utiliser une image pour remplacer le titre et la description du blog; et B: utilisez une image différente pour le mobile par rapport au bureau.

Je regarde le - Afficher l'image Seulement zone et ne savent pas comment ajouter un si: données: blog.isMobile

<header> 
 
    <div class='header-outer'> 
 
    <div class='header-cap-top cap-top'> 
 
     <div class='cap-left'/> 
 
     <div class='cap-right'/> 
 
    </div> 
 
    <div class='fauxborder-left header-fauxborder-left'> 
 
    <div class='fauxborder-right header-fauxborder-right'/> 
 
    <div class='region-inner header-inner'> 
 
     <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
 
     <b:widget id='Header1' locked='true' title='Wisconsin Explorer (Header)' type='Header'> 
 
      <b:widget-settings> 
 
      <b:widget-setting name='displayUrl'>http://1.bp.blogspot.com/-2Pq9AO4eOJY/Wa30DFl96xI/AAAAAAAAIBs/QaONXMPNVS8ww6IjNgrn7jNUtAEkgQeeQCK4BGAYYCw/s1600/desktop%2Blogo.png</b:widget-setting> 
 
      <b:widget-setting name='displayHeight'>225</b:widget-setting> 
 
      <b:widget-setting name='sectionWidth'>752</b:widget-setting> 
 
      <b:widget-setting name='useImage'>true</b:widget-setting> 
 
      <b:widget-setting name='shrinkToFit'>false</b:widget-setting> 
 
      <b:widget-setting name='imagePlacement'>REPLACE</b:widget-setting> 
 
      <b:widget-setting name='displayWidth'>1100</b:widget-setting> 
 
      </b:widget-settings> 
 
      <b:includable id='main'> 
 

 
    <b:if cond='data:useImage'> 
 
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'> 
 
     <!-- 
 
     Show image as background to text. You can't really calculate the width 
 
     reliably in JS because margins are not taken into account by any of 
 
     clientWidth, offsetWidth or scrollWidth, so we don't force a minimum 
 
     width if the user is using shrink to fit. 
 
     This results in a margin-width's worth of pixels being cropped. If the 
 
     user is not using shrink to fit then we expand the header. 
 
     --> 
 
     <b:if cond='data:mobile'> 
 
     <div id='header-inner'> 
 
      <div class='titlewrapper' style='background: transparent'> 
 
      <h1 class='title' style='background: transparent; border-width: 0px'> 
 
       <b:include name='title'/> 
 
      </h1> 
 
      </div> 
 
      <b:include name='description'/> 
 
     </div> 
 
     <b:else/> 
 
     <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;      + &quot;background-position: &quot;      + data:backgroundPositionStyleStr + &quot;; &quot;      + data:widthStyleStr      + &quot;min-height: &quot; + data:height      + &quot;_height: &quot; + data:height      + &quot;background-repeat: no-repeat; &quot;' id='header-inner'> 
 
      <div class='titlewrapper' style='background: transparent'> 
 
      <h1 class='title' style='background: transparent; border-width: 0px'> 
 
       <b:include name='title'/> 
 
      </h1> 
 
      </div> 
 
      <b:include name='description'/> 
 
     </div> 
 
     </b:if> 
 
    <b:else/> 
 
     <!--Show the image only--> 
 
     <div id='header-inner'> 
 
     <a expr:href='data:blog.homepageUrl' style='display: block'> 
 
      <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> 
 
     </a> 
 
     <!--Show the description--> 
 
     <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'> 
 
      <b:include name='description'/> 
 
     </b:if> 
 
     </div> 
 
    </b:if> 
 
    <b:else/> 
 
    <!--No header image --> 
 
    <div id='header-inner'> 
 
     <div class='titlewrapper'> 
 
     <h1 class='title'> 
 
      <b:include name='title'/> 
 
     </h1> 
 
     </div> 
 
     <b:include name='description'/> 
 
    </div> 
 
    </b:if> 
 
</b:includable> 
 
      <b:includable id='description'> 
 
    <div class='descriptionwrapper'> 
 
    <p class='description'><span><data:description/></span></p> 
 
    </div> 
 
</b:includable> 
 
      <b:includable id='title'> 
 
    <b:tag cond='data:blog.url != data:blog.homepageUrl' expr:href='data:blog.homepageUrl' name='a'> 
 
    <data:title/> 
 
    </b:tag> 
 
</b:includable> 
 
     </b:widget> 
 
     </b:section> 
 
    </div> 
 
    </div> 
 
    <div class='header-cap-bottom cap-bottom'> 
 
     <div class='cap-left'/> 
 
     <div class='cap-right'/> 
 
    </div> 
 
    </div> 
 

 
    </header>

Answer 1

Utilisation data:blog.isMobileRequest au lieu de data:mobile

<b:if cond='data:blog.isMobileRequest'> 
    <div style='background-image: url(
https://4.bp.blogspot.com/-fTbhFqMEXwQ/WaYHi3JaowI/AAAAAAAAH9c/Xc1iTWjGzvQSMNutcKvrud3s8bk2b4ijwCKgBGAs/mobile 
%2Blogo.png);background-position:left ; min-height:400px ;_height:400px ;background-repeat: no-repeat;&quot;' id='header-inner'> 
    <div class='titlewrapper' style='background: transparent'> 
     <h1 class='title' style='background: transparent; border-width: 0px'> 
     <b:include name='title'/> 
     </h1> 
    </div> 
    <b:include name='description'/> 
    </div> 
<b:else/> 
    <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;      + &quot;background-position: &quot; + data:backgroundPositionStyleStr + &quot;; &quot; + data:widthStyleStr + &quot;min-height: &quot; + data:height + &quot;_height: &quot; + data:height + &quot;background-repeat: no-repeat; &quot;' id='header-inner'> 
    <div class='titlewrapper' style='background: transparent'> 
     <h1 class='title' style='background: transparent; border-width: 0px'> 
     <b:include name='title'/> 
     </h1> 
    </div> 
    <b:include name='description'/> 
    </div> 
</b:if>