Cara agar gambar utama blog berada di atas judul

Jauh sebelum saya menerbitkan postingan ini banyak blogger kreatif yang lebih dahulu membuat postingan seperti ini, dan tutorial cara menampilkan gambar utama di atas judul ini sudah saya terapkan sejak saya membuat blog pertama saya. namun waktu itu saya sangat tidak mengerti sama sekali mengenai struktur CSS dan HTML jadi tampilan nya kalo udah gitu yah gitu ajah tanpa modifikasi tambahan.

Untung saja saya menemukan kembali tutorial serupa namun lebih unik. ya saya menemukan tutorial ini dari blog www.catatandroid.com yang memberikan sedikit tambahan modifikasi sehingga tampilannya jadi lebih cantik. oke langsung saja jika kamu tertarik juga dengan tutorial cara cara menampilkan gambar diatas judul ini kamu bisa ikuti step by step nya disini atau di sumbernya.

DEMO

Membuat Gambar Utama Diatas Judul

Pertama-tama buka dashboard > Tema > Edit HTML dan simpan script CSS berikut ini di atas ]]></b:skin> .

CSS / doble click to select

img.firstimage{ position:relative; width:100%; min-width:-webkit-fill-available; } .coverImage{ position:relative; transition: all .3s; min-height:200px; margin: 0 0 1rem; }

Kemudian cari secript berikut <h1 class='post-title entry-title'> mungkin akan ada 2 atau lebih dan jaraknya berdekatan lalu kamu pilih yang pertama, blok semua tag h1 sampai penutup tag /h1 yang pertama tadi dan ganti dengan script berikut .

HTML / doble click to select

<b:if cond='data:blog.pageType == "item"'> <div class='coverImage'> <b:if cond='data:post.firstImageUrl'> <img class='firstimage' expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 400, "16:9")' height='225' width='400'/> <b:else/> <img class='firstimage' expr:alt='data:blog.pageName' expr:src='data:blog.postImageUrl' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIKdocH80Y4wMusuANOL8maNvkGMEpLmjXSTOmqmoXKjSfrgK0wMrOAIqRzsrGfgbW42T_QXy0TG9yymG8MO2D2LqKzHFz-O8SQ0GP1DzFByG6vdPF57D1y1q6I23kOkykUrGC8JyIfbs/s1600-rw/no-image.jpg'/> </b:if> </div> <h1 class='post-title entry-title'> <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'> <a expr:href='data:post.link ?: data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h1></b:if>

Nah sampai sini sebenarnya gambar pertama udah bisa tampil diatas judul tapi gambarnya nanti akan double maka kamu membutuhkan script berikut untuk menyembunyikan gambar aslinya.

Simpan script berikut diatas tag </body> biasanya letaknya di paling akhir template.

JavaScript / doble click to select

<script>//<![CDATA[ $(function(){$(".separator:first").remove(),$(".post-body > img:first").remove()}); //]]></script>

Kemudian masukan script berikut di atas </head> tapi jika kamu pernah memasangnya lewati saja.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>

Coba simpan template dan lihat hasilnya, pasti tampilannya masih biasa saja seperti yang saya terapkan pada blog ini dan tentunya belum 100% dari tutorial kali ini.

Membuat gambar Lebih Lebar

Lanjut sekarang kita akan membuat gambarnya menjadi lebar (full width) tentunya jika kamu suka dengan tampilan widt dan jika tidak suka kamu bisa lewati tahap ini. Tambahkan script berikut pada CSS sebelumnya tepatnya satukan dengan baris css img.firstimage{--disini--}.

CSS / doble click to select

margin:0 -36px; object-fit:cover;

Kemudian tambahkan ini di atas tag ]]></b:skin> tujuannya adalah agar tampilanya tetap responsif pada mode mobile.

CSS / doble click to select

@media screen and (max-width:480px){ img.firstimage{margin:0 -22px} }

Kemudian kamu bisa save dulu dan lihat perubahannya.

Menambahkan Animasi

Selanjutnya menambahkan transisi agau efek animasi pada saat gambar muncul pertama kali dan saat gambar di hover. scriptnya cukup sederhana dan kamu tinggal menambahkan lagi script berikut didalam baris css img.firstimage{--disini--}

CSS / doble click to select

-moz-animation:covernaik 3s; -webkit-animation:covernaik 3s; animation:covernaik 3s;

Kemudian tambahkan lagi script berikut di atas tag ]]></b:skin>

CSS / doble click to select

.coverImage:hover{ transform: translate(0,-20px); } @-webkit-keyframes covernaik{ from{transform:translate(0,200px)}to{transform:translate(0,0)} } @keyframes covernaik{ from{transform:translate(0,200px)}to{transform:translate(0,0)} }

Memberikan Efek Judul Menumpuk Pada Gambar

Terakhir kamu bisa menambahkan efek judul menumpuk atau menindih gambar sehingga tampilannya lebih menarik. tambahkan CSS berikut di atas ]]></b:skin>

CSS / doble click to select

#content-wrap .content-single .post-outer-single .post-title{ font-size: 32px; font-size: 2rem; background:#fff none repeat scroll 0 0; margin:-60px -10px 0 -10px; padding:15px 20px; box-shadow:0 -18px 20px 0 rgba(0,0,0,.1); text-align:left; box-sizing:border-box; position:relative; width:auto; -moz-animation:naik 1s; -webkit-animation:naik 1s; animation:naik 1s; border-radius: 10px 10px 0 0; }

Selesai dan simpan temlate, sekarang blog kamu udah lebih cantik.

Jadi total keseluruhan CSS yang kamu terapkan pada template blog kamu jika digabungkan akan menjadi seperti berikut.

CSS / doble click to select

img.firstimage{ position:relative; width:100%; min-width:-webkit-fill-available; margin:0 -36px; object-fit:cover; -moz-animation:covernaik 3s; -webkit-animation:covernaik 3s; animation:covernaik 3s; } .coverImage{ position:relative; transition: all .3s; min-height:200px; margin: 0 0 1rem; } @media screen and (max-width:480px){ img.firstimage{margin:0 -22px} } .coverImage:hover{ transform: translate(0,-20px); } @-webkit-keyframes covernaik{ from{transform:translate(0,200px)}to{transform:translate(0,0)} } @keyframes covernaik{ from{transform:translate(0,200px)}to{transform:translate(0,0)} } #content-wrap .content-single .post-outer-single .post-title{ font-size: 32px; font-size: 2rem; background:#fff none repeat scroll 0 0; margin:-60px -10px 0 -10px; padding:15px 20px; box-shadow:0 -18px 20px 0 rgba(0,0,0,.1); text-align:left; box-sizing:border-box; position:relative; width:auto; -moz-animation:naik 1s; -webkit-animation:naik 1s; animation:naik 1s; border-radius: 10px 10px 0 0; }

Sampai tahap akhir ini saya harap kamu paham dengan penjelasan yang saya uraikan diatas, dan jika masih ada yang kurang jelas pada artikel kali ini silahkan tanyakan di kolom komentar. sekian tutorial kali ini terimakasih telah berkunjung.