Cara menampilkan avatar penulis di atas setiap postingan template notable

Quality Templates. Template atau tema Notable adalah salah satu dari empat varian template terbaru blogger, yakni:

1. Contempo
2. SOHO
3. Emporio



gambar profile penulis di atas setiap postingan template

4. Notable

Berada paling bontot pada urutan ke empat ternyata Notable memiliki sebuah fitur dan ke istemewaan yang dapat kita modifikasi melalui pengaturan CSS-nya. Yakni penampil gambar penulis di atas setiap postingan yang di terbitkan melalui templat ini.

Baca juga: CARA MENAMPILKAN AVATAR ATAU PHOTO PROFILE DI ATAS POSTINGAN BLOGGER TEMPLATE CONTEMPO

Namun secara default (bawaan) tentu saja bentuknya persegi dan tampak tidak proporsional nah cara membuat tampilannya menjadi keren adalah dengan cara merobah latar warna header template notable ini melalui dasbor blogger pada opsi theme designer. Lalu kalian bisa merobah ukuran avatar atau gambar profile tersebut dan membuatnya menjadi bulat. Caranya:

Login ke Blogger.

Pilih blog untuk diperbarui.
Di menu sebelah kiri, klik Tema.
Di samping kanan agak ke atas cari tanda titik tiga, klik Edit HTML.
Cari kode berikut di halaman editor HTML blogger notable:

body.item-view .Blog .post-author-profile-pic{
max-height:100%
}

Tambahkan kode berikut dibawah 100%:

border: solid;border-radius: 50px;

Kodenya akan terlihat menjadi:

body.item-view .Blog .post-author-profile-pic{
max-height:100%
border: solid;border-radius: 50px;}

Untuk memperbesar avatar atau photo profile tersebut kalian bisa memodifikasi kode tersebut menjadi:

body.item-view .Blog .post-author-profile-pic{
max-height:100%
border: solid;border-radius: 50px;
height: 80px;
width: auto;
} 

Yakni dengan cara menambahkan perintah CSS

height: 80px;width: auto; 

Seperti di atas. Trik ini yang sekarang kami terapkan pada template editblogtema yang sekarang.

Pengaturan selanjutnya adalah:

• Masuk ke pengaturan atau dasbor blogger
• Pilih tataletak atau layout
• Klik edit 'Blog Posts' dengan mengklik tanda pensil.

  

  blog post

• Setelah itu akan muncul konfigurasi seperti gambar berikut dan pastikan memberikan centang pada dua poin yang telah saya beri tanda merah:

  

  konfigurasi blog posts

Jika kalian menyentuh gambar profile dengan kursor mouse maupun dengan cara menyentuhnya dan profile bergerak, untuk mengaktifkannya cukup dengan menambahkan kode CSS berikut di atas kode </head>:

<style>img:hover {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}</style>

Save tema.

Tolong di share ya..