Skip to main content

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

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:

PrivacySitemap
©2021 KOMPI AJAIB