Blogger Blogspot來自桌面的移動版的其他header1圖片

Question

正在尋找在我的移動模板主題上顯示不同的背景圖片與博客/博客博客上的桌面主題。

目前它正在顯示爲Layout/Header1 Widget中的桌面主題上傳的相同圖像。

下面的代碼片段顯示了Header1 Widget。我想A：用圖片來替換博客的標題和描述;和B：爲移動設備和桌面設備使用不同的圖像。

我看 - 顯示僅圖像區域和不確定如何添加一個如果：數據：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

使用data:blog.isMobileRequest代替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>