Cara baru Membuat "Fitur Video, Gambar, Audio" Di Halaman Post Blogger

Ok kali ini saya akan share Cara Membuat "Fitur Video, Gambar, Audio" Di Halaman Post Blogger, kalau dulu hal ini belum memungkinkan, tapi kalau sekarang Hal ini sangat mungkin untuk dilakukan diblogger.

Dengan memanfaatkan fitur Tautan Lampiran dari blogger, kita bisa menampilkan Video, Image/Gambar dan Audio pada halaman post kita, seperti fitur wordpress.

Kalau di Wordpress Fitur Image sudah tersedia, tapi diblogger kita harus lebih teliti untuk bisa memanfaatkan fitur-fitur yang dirilisnya.

Area Peletakan Video, gambar, audio

Kita bisa letakan Video, Gambar atau Audio pada postingan di area mana saja yang penting masih area posting, misalnya diatas judul posting seperti ini.

Meletakan fitur gambar audio atau video diatas judul posting

Meletakan fitur gambar audio atau video diatas judul posting

Atau anda bisa letakan dibawah judul posting seperti ini.

Meletakan fitur gambar audio atau video dibawah judul posting

Jadi dengan begini, postingan kita bisa terlihat lebih profesional lagi seperti blog lain.

Kode untuk membuat fitur ini

<b:if cond='data:blog.pageType in {"item","static_page"} or data:view.isPreview'>
<b:loop values='data:post.enclosures' var='fitur'>
    <b:if cond='data:fitur.mimeType in {"image/jpeg", "image/gif","image/png"}'>
    <div class='f-image'><img expr:alt='data:post.title' expr:src='data:fitur.url' expr:title='data:post.title'/></div>
    <b:elseif cond='data:fitur.mimeType in {"video/mp4", "video/x-msvideo","video/quicktime"}'/>
    <div class='f-vid'>&lt;script&gt;document.write("<iframe expr:src='data:fitur.url' frameborder='0' heiht='315' width='100%'/>");&lt;/script&gt;</div>
    <b:elseif cond='data:fitur.mimeType in {"audio/aac", "audio/mpeg","audio/ogg"}'/>
    <div class='f-audio'><audio controls='controls'><source expr:src='data:fitur.url' type='audio/mpeg'/>Your browser does not support the audio element.</audio></div>
  </b:if>
</b:loop>
</b:if>

Jika anda ingin meletakan dibawah judul post cari kode <data:post.body/> dan letakan kode tersebut diatasnya kode <data:post.body/>

Tapi jika ingin di letakan diatas judul post, anda cari terlebih dahulu kode

<b:if cond='data:post.title'>

dan letakan kode tersebut diatas kode

<b:if cond='data:post.title'>

Tentang MimeType

Perhatikan mimeType yang tersedia diatas pada gambar tersedia mimeType

image/jpeg,image/gif,image/png

Pada video tersedia mimeType

video/mp4,video/avi,video/mov

Dan pada Audio tersedia mimeType

audio/aac,audio/mpeg,audio/ogg

Jika url video, gambar atau audio yang anda masukan pada kotak tautan lampiran berakhir dengan ekstensi .jpg, .mp4 atau .mp3 maka mimeType akan otomatis terisi sendiri sesuai dengan ekstensi file anda.

contoh penerapan url dan mimetype

Tapi jika file gambar,video atau audio anda tidak berakhir dengan ekstensi .jpg, .mp4 atau .mp3 anda harus isi mimeType-nya secara manual, sesuai dengan mimeType yang ada pada kode diatas.

Contoh kecil adalah ketika kita ingin memasang video youtube diblog, dan url pada video youtube tersebut tidak mempunyai ekstensi .mp4 karena url video youtube seperti ini.

https://www.youtube.com/embed/--zku6TB5NY

Maka pada bagian mimeType kita harus mengisikan video/mp4 agar url video berubah menjadi sebuah Iframe yang menampilkan sebuah video dari youtube, begitu juga dengan yang lain anda atur saja seperti penjelasan contoh ini.

Alasan menggunakan script pada mimeType Video

Salah satu alasan saya menggunakan script pada mimetype video adalah karena seo, pada website Pengecek SEO Website jika kita menggunakan iframe pada postingan maka nilai seo kita akan kurang, maka dari itu saya menggunakan script, agar html iframe tidak terbaca sebagai iframe secara langsung.

Nah itu dia Cara Membuat "Fitur Video, Gambar, Audio" Di Halaman Post Blogger agar terlihat profesional, ok buat yang masih bingung bisa bertanya lewat kotak komentar dibawah (jika tidak muncul refresh halaman ini)