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.

DEMO

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....