Cara pasang Author image di Template Essential / Contempo

Saya sempat kebingungan bagaimana cara menampilkan gambar Avatar atau Author image di Template Essential maupun Contempo karena kode bawaan dari kedua tema tersebut tampaknya tidak bekerja.

Setelah mencoba mengambil kode dari Template Notable dan memasangnya pada kedua template tersebut barulah gambar avatarnya mau muncul. Berikut ini kodenya:

<b:include data='{image: data:post.author.authorPhoto.image,imageRatio: &quot;1:1&quot;,imageSizes: [50],sourceSizes: &quot;50px&quot;,imageClass: &quot;author-image&quot;}' name='responsiveImage'/>

Hasilnya akan seperti gambar dibawah ini.

Cara pasang Author image di Template Essential / Contempo

Kode tersebut dapat dipasang dimana saja apakah diatas postingan disebelah nama dan tanggal ataupun diakhir postingan.

Namun lebih afdolnya pasang dalam area <b:includable id='postFooterAuthorProfile' var='post'> yang nantinya akan muncul diakhir postingan. Lihat gambar dibawah ini.

Pada aslinya susunannya memang begitu jadi saya yakin tidak sulit menemukan area itu dalam Template dan jika sudah ketemu kita hanya perlu menambahkan kode berikut saja disana.

<b:include data='{image: data:post.author.authorPhoto.image,imageRatio: &quot;1:1&quot;,imageSizes: [50],sourceSizes: &quot;50px&quot;,imageClass: &quot;author-image&quot;}' name='responsiveImage'/>

Baca juga: Cara Tambahkan CSS dan HTML di Template Blogger

Setelah kode tersebut terpasang dalam Template dan seperti biasa kita bisa menampilkannya atau tidak melalui halaman Tata Letak > Gadget Blog > Edit (ikon pensil) > Conteng Tampilkan Profile Pengarang Dibawah Pos > Simpan > Selesai.

Jika belum mau muncul juga, kemungkinan karena <b:includable id='postFooterAuthorProfile' var='post'> belum di include.

Jika memang belum maka silakan di include dulu dengan kode berikut kedalam <b:includable id='postFooter' var='post'>.

<b:include cond='data:widget.type == &quot;Blog&quot;' data='post' name='postFooterAuthorProfile'/>

Baca juga: Tentang Include dan Includable di Template Blogger

Seperti contoh gambar dibawah ini.

Jika belum mau muncul juga, sungguh terlalu, yang jelas di Template yang saya pakai mau kok muncul.

Sekalian saya sertakan contoh css dibawah ini, barangkali dibutuhkan, dengan catatan sesuaikan kode warnanya "posts.boxshadow.color" dengan Template Anda, kalau tidak maka akan error.

.author-profile{

-webkit-box-flex:0;

flex:0 0 auto;

-webkit-box-ordinal-group:5;

order:4;

border:1px solid $(posts.boxshadow.color);

border-radius:2px;

margin:0;

padding:7px 16px

}

.author-profile .author-about{

text-align:left

}

.author-profile .author-image{

float:left;

margin-right:10px

}

.author-profile .author-image img{

height:50x;

width:50px;

border-radius:50%;

border:1px solid $(posts.boxshadow.color)

}

.author-profile .author-name{

padding:7px;

border:1px solid $(posts.boxshadow.color);

border-radius:2px

}

.author-profile .author-desc{

line-height:1.6em

}