Blog

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
  • 0 Comments

This tutorial for theme using Justified Gallery like my Bloggrid template.

If you want to show only 1 or 2 [etc] images, a summary with a link to “Read More:”
With Jump Breaks you can show just some images like you want.



Add a "Read more" link

  • Sign in to Blogger.
  • Click the blog.
  • Click the post.
  1. In the composer box, place your cursor where you want to put the “Read More” link.
  2. Click Insert jump break .
  • 11 Comments

About Me

My Photo
Uong Jowo was Born In Surabaya, March 1971. I'm A Blogger Templates Designer and a Converter Wp Themes to Blogger Template.

Google+ Badge

Blog Members

Pageviews

Latest Comments