Menggunakan Gambar Pertama Postingan Untuk Background

Kadang ada kalanya dalam mendesain template, kita ingin membuat gambar postingan sebagai background. Misalnya kita akan membuat judul postingan di luar postingan dan menggunakan gambar postingan sebagai background dengan menggunakan efek parallax seperti pada postingan sebelumnya.

Untuk itu kita perlu menggunakan tag Blogger untuk gambar pertama postingan untuk digunakan di luar loop atau di luar area postingan.

Jika kita tidak tepat dalam penulisan kodenya, maka template akan error, biasanya halaman akan menjadi blank.

Sebagai demonya silahkan lihat dengan klik tombol demo di bawah ini.


Jika diinspeksi gambar di atas posingan, maka akan terlihat gambar postingan tersebut sebagai background.

Klik gambar untuk memperbesar. Klik Esc di keyboard untuk kembali.

Nah jika kebetulan Anda sedang mencari cara gambar postingan untuk background di luar postingan, silahkan coba kode di bawah ini.


expr:style='"background: url(" + resizeImage(data:blog.postImageUrl,610) + ")"'

Angka 610 adalah kode resize imagenya, sesuaikan dengan lebar tempatnya agar gambar tidak buram.

Untuk kode pada demonya, secara lengkap seperti di bawah ini.


<b:if cond='data:blog.postImageUrl'>
<div class='parallax' expr:style='&quot;background: url(&quot; + resizeImage(data:blog.postImageUrl,610) + &quot;)top center;background-repeat:no-repeat;background-size:cover;&quot;' id='parallax'>
    <h2><data:blog.pageName/></h2>
  </div>
</b:if>

Semoga bermanfaat....

Reactions:
Share this with short URL:

You Might Also Like:

Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser