Cara Membuat Frist Image di Atas Judul Postingan yang Keren
Agustus 21, 2020
Hallo sobat blogger, kamu pasti sudah tahu kan Gambar First Image atau gambar cover di atas judul postingan sepertinya jadi trend template blog saat ini untuk kelihatan lebih cantik. Tapi tidak semua blog populer menggunakan frist image. Nah, pada kesempatan kali ini saya akan berbagi sedikit tutorial cara membuat frist image diatas judul postingan.
Untuk membuat gambar di atas judul artikel, kita harus mengedit atau menambahkan beberapa baris html, css dan javascript ke dalam template melalui Edit HTML.
Cara Membuat Frist Image di Atas Judul Postingan
Saya terapkan di template VioMagz. Berikut langkah-langkah membuat gambar di atas judul artikel pada blog.
1. Kalian masuk ke Blogger
2. Pilih menu Tema dan klik Edit HTML
3. Cari kode seperti ini <h1 class='post-title entry-title'>. Letakan code diwabah ini tepat di atas kode <h1 class='post-title entry-title'>.
<div id='first-blanter'>
<img class='first-image' expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl,600)' expr:title='data:post.title'/>
<div class='card-author vcard'>
<b:if cond='data:top.showAuthor'>
<b:if cond='data:post.authorProfileUrl'>
<div class='fn' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<img class='photo-wrap' expr:src='resizeImage(data:post.authorPhoto.url,100)' itemprop='image'/>
Posted by <a expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span></a>
</div><b:else/><span class='fn' itemprop='name'><data:post.author/></span></b:if></b:if></div>
<div class='card-time'>
<abbr class='published updated timeago' expr:title='data:post.timestampISO8601' itemprop='datePublished dateModified'><data:post.dateHeader/></abbr>
</div>
</div>
4. Selanjutnya cari kode ]]></b:skin>. Kemudian tambahkan CSS dibawah ini tepat di atas kode tersebut.
/* First Image */
#first-blanter{background:#fff;border-radius:10px;overflow:hidden;position:relative;padding-bottom:60px;margin-bottom:10px}
img.first-image{width:100%;height:auto;max-height:480px}
.card-author.vcard{position:absolute;bottom:-10px;left:40px;z-index:9;font-size:13px}
img.photo-wrap{width:70px;height:70px;border-radius:100%;float:left;border:4px solid #fff;margin-right:10px}
.card-author a{line-height:9!important;font-weight:700;color:#222}
.card-time{position:absolute;top:-10px;right:-10px;background:#5d5d5d;color:#fff;line-height:1.8;font-size:13px;padding:5px 10px;margin-right:10px;margin-top:10px;border-radius:5px 10px 5px 5px}
.card-time abbr{color:#fff;text-transform:none;font-style:none;text-decoration:none!important;border-bottom:0!important}
}
5. Klik Simpan Tema. Dan lihat hasilnya seharunya gambar sudah muncul di templete VioMagz
Itulah cara membuat frist image di atas judul postinga. Jika artikel ini bermanfaat jangan lupa share ke teman kalian siapa tahu juga membutuhkan agar kelihatan cantik blognya. Selamat mencoba.
