• Posted by Uong Jowo
  • October 01, 2017
  • 3 Comments
Assalamu'alaikum, friends...
Need change firstimg to background image..?


You can add some code like my template Blogsletter and Photosout to your blog.

1.Go to Edit Template HTML.

2.Find <b:includable id='post' var='post'>

3. After this <b:if cond='data:blog.pageType == &quot;item&quot;'> adding like below

<b:if cond='data:blog.pageType == &quot;item&quot;'>               
<div id='myimage' style='display:none;'>
<b:if cond='data:post.firstImageUrl'>
 <img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' width='100%'/>
 <b:else/>
  <img src='...your-other-image.jpg' width='100%'/>
  </b:if>
</div>

4. Add script below, before </body>
<script style='text/javascript'>
 //<![CDATA[
var getImageSrc = $('#myimage img').attr('src');
//
$('#BgImg').css('background-image', 'url(' + getImageSrc + ')').style.background = 'no-repeat center';
//]]>
</script>

5. Place it below ,where you want.
<div id='BgImg'/>

7. Add css below before ]]></b:skin>

#BgImg{background-position:top center;background-size:cover;position:relative;}

8. About Position, you can choose: relative or absolute,like you want.

9. Save
«
Next
Newer Post
»
Prev
Older Post

3 komentar:

if you want a template from me ? make sure that you entered your email address !