Formatting: Post Cover

Tentang

Formatting Post Cover adalah fitur baru yang ditambahkan pada versi 3.0.0 yang memungkinkan anda untuk menampilkan gambar layar penuh dibagian atas postingan atau laman blog - (Demo).



Spesifikasi




Konfigurasi



Keterangan

src
URL Gambar yang akan digunakan. URL Gambar ini akan digunakan pada semua view mode ketika konfigurasi light_src dan dark_src tidak didefinisikan.
light_src
URL gambar yang akan digunakan khusus untuk view mode terang. Ketika konfigurasi ini terpilih, konfigurasi dark_src wajib didefinisikan

dark_src
URL gambar yang akan digunakan khusus untuk view mode dark. Ketika konfigurasi ini terpilih, konfigurasi light_src wajib didefinisikan

shadow
Mengaktifkan bayangan pada bagian bawah gambar.

always_display
Secara default sistem akan selalu menampilkan gambar tidak peduli apakah lebar gambar mencukupi atau tidak. Set nilai ke no Jika anda menginginkan untuk hanya menampilkan gambar ketika lebar gambar mencukupi (sesuai lebar layar).




Penggunaan

  1. Upload gambar ke post atau laman editor blogger. Anda akan mendapatkan format HTML gambar lengkap dengan data-original-width dan data-original-height. Kedua atribut tersebut bersifat wajib.

    Pada saat menambahkan gambar di blogger, anda akan mendapatkan beberapa elemen HTML yang secara otomatis ditambahkan selain elemen img - (Lihat). Hapus semua elemen-elemen tersebut dan cukup ambil elemen <img .../> saja - (Lihat). HTML image ini bisa diletakkan bagian manapun.

  2. Tambahkan atribut id="w-post-cover" pada elemen img. Atribut ini bersifat wajib.

  3. Tambahkan konfigurasi yang dikehendaki dengan cara menambahkan atribut data-nama-konfigurasi='Nilai' pada elemen img. Berikut adalah beberapa contoh HTML img dengan konfigurasi:

    Contoh penggunaan satu URL gambar yang akan digunakan pada semua mode view:
          	
<img id="w-post-cover" 
  alt="NEOS Blogger Theme" 
  data-original-height="647" 
  data-original-width="1348" 
  data-src="url-gambar.jpg"
  data-shadow='no'/>


    Contoh penggunaan URL gambar berdasarkan view mode:
          	
<img id="w-post-cover"   
  alt="NEOS Blogger Theme"  
  data-original-height="647" 
  data-original-width="1348" 
  data-light-src="url-gambar.jpg" 
  data-dark-src='url-gambar.jpg'
  data-shadow='no'/>


  4. PENTING...! Formatting ini hanya mendukung gambar yang diuplod di blogger. Pastikan juga dimensi (lebar dan tinggi) gambar untuk konfigurasi light_src dan dark_src adalah sama.
Komentar