Skip to main content
KOMPI AJAIB

follow us

Berbuat khilaf adalah sifat. Meminta maaf adalah kewajiban. Dan kembalinya Fitrah adalah tujuan. Saya, Adhy Suryadi admin blog Kompi Ajaib MEMOHON MAAF LAHIR DAN BATHIN. Minal Aidin Wal Faidzin Taqabalallahu minnaa wa minkum. Selamat hari raya Idul Fitri, 1 Syawal 1439 H.

×

Menggunakan Gambar Pertama Postingan Untuk Background

Baca juga:

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

You Might Also Like:


Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar