EDITBLOG-VLOGGER: CARA MENAMPILKAN GAMBAR AVATAR OTOMATIS KE BAGIAN ATAS SETIAP POSTINGAN SEMUA TEMPLATE BLOGGER TERBARU


. CSS style:

  • Hanya gunakan salah satu template template Blogger yang kita sebutkan di atas untuk percobaan. 
  • Masuk ke pengaturan/dasbor blogger
  • Pilih Tema
  • Pilih Edit HTML
Cari kode penutup </head> (tekan CTRL+F dan masukan </head> ke kolom yang muncul di bagian atas halaman editor HTML) lalu letakan kode CSS berikut tepat di atasnya:
<style> .post-author-profile-pic{
vertical-align: middle;
width: 35px;
height: 35px;
border-radius: 50%;
}</style>
Save Tema 

2. HTML:
Masih di dalam halaman Editor HTML cari kode berikut <data:post.body/> dan letakan kode berikut di bawah tepat di atasnya:
<b:if cond='data:view.isSingleItem and data:widgets.Blog.first.allBylineItems.author and data:post.author.authorPhoto.image and data:widget.type != &quot;PopularPosts&quot;'>
<div class='post-author-profile-pic-container'><font color='grey'>By:</font>
<b:include data='{ image: data:post.author.authorPhoto.image, imageRatio: &quot;1:1&quot;, imageSizes: [84, 168], sourceSizes: &quot;84px&quot;, imageClass: &quot;post-author-profile-pic&quot; }' name='responsiveImage'/><span><font color='grey'><data:post.author.name/></font></span>
</div>
</b:if> </div>
<div class='post-header-container container'>
Save Template 

3. PENGATURAN TAMBAHAN
Agar setting maksimal masuk ke dasbor/pengaturan blogger:
Pilih tataletak
Klik badan Halaman, klik ikon pensil untuk mengedit, maka akan keluar menu seperti pada gambar berikut:
pengaturan blogger untuk setting profile bergambar


Keterangan: Pada gambar di atas kolom boleh di kosongkan atau di centang, kalian bisa melakukan eksprimen. Namun dibagian bawah judul posting harus kosong, jika ada bisa di ddrag ke bagian bawah menggunakan mouse.

Dan harus di ingat ini adalah satu satunya tutorial yang memberikan tips, triks dan hacks cara menempatkan gambar penulis atau author profile image di atas setiap postingan di blogger, kalau kalian cari kata pencarian cara 'menampilkan gambar penulis di atas setiap postingan blogger' atau ketikan saja how to add/show profile/author image on top of each blog's post?' hasilnya akan keluar tutorial ginian:
  • Cara meletakan gambar profile penulis di bawah setiap postingan blogegr
  • How to add author image in blogger posts (isinya sama dengan tutorial diatas)
  • Dan lain lain

BERDASARKAN LABEL