Cara meletakan gambar profile penulis di atas setiap postingan template blogger lama

Sedikit berbeda dengan cara penempatan photo profile secara otomatis untuk template baru pada template template lama deklarasinya dalam HTML template lama seperti template sederhana, perjalanan, jendela gambar (kami sedang menerapkannya pada template jendela gambar) memang beda. Pengaturan CSS untuk border dapat di tambahkan dengan mudah pada template template terbaru tanpa perlu membuat ID baru. Sedangkan pada templat bawaan blogger yang lebih lama kita harus membuatnya. 

Oleh karena Triks ini hanya bisa diterapkan pada kalian yang telah terlanjur menggunakan template lama dan tidak akan berlaku apabila di terapkan pada template template terbaru blogger seperti: Contempo, Emporio dan SOHO, maka jika ingin menerapkannya pada template template terbaru, maka kalian harus membaca triknya pada postingan kami yang telah lalu :

CARA MELETAKAN PHOTO PROFILE DI ATAS SETIAP POSTINGAN BLOGGER -CARA OTOMATIS

Untuk menerapkan trik ini kalian harus masuk kepengaturan blogger:

1. Pilih Tema
2. Pilih Edit HTML

Pada template lama cari kode:

<data:post.body/> ada 2 atau 3 kode yang sama pilih yang kedua atau yang ketiga.

Letakan kode berikut tepat diatasnya:

<b:if cond='data:post.authorPhoto.url'>
<img alt='Avatar' class='avatar' expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/>Oleh: 
</b:if>

<a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
<span itemprop='name'><justify><data:post.author/></justify></span>
</a>
<div class='post-header-container container'/>

Catatan: kode <data:post.body/> bisa berjumlah lebih banyak jika kalian telah menambahkan elemen baru seperti 'Related Posts'. Jadi jika template kalian telah memiliki related posts, maka kalian harus meletakan kode tersebut di atas kode yang ke 3

Langkah selanjutnya adalah : 

Cari kode </head> di dalam halaman editor HTML template dan letakan kode CSS style berikut tepat di atasnya:

<style> .avatar {
vertical-align: middle;
width: 50px;
height: 50px;
border-radius: 50%;
}</style>

Save template.

Perbedaan penempatan gambar profile di atas setiap postingan blogger ini antara template lama dan template terbaru adalah pada pemasangan dimensi gambar : Untuk menghasilkan frame bulat pada template lama dimensi ukuran gambar harus benar benar bujur sangkar misalnya jika tinggi 60, maka lebar juga harus 60. 

Ukuran gambar tinggi dan lebar tidak sama akan menghasilkan bentuk frame lonjong. Sementara template terbaru bisa meng'crop' sendiri.

Catatan: Tampilan ini hanya dapat di tampilkan pada layar besar seperti laptop dan dekstop. 

Beberapa widget tidak dapat tampil pada opsi tampilan hape (mobile) jika setting tampilannya adalah hape. Karena model model template bawaan blogger yang lebih tuaan lebih di desain untuk tampilan layar besar seperti PC Dekstop dan Laptop, maka jika ingin tampilannya menjadi responsif kalian harus merobah pengaturan CSS dan @mediascreen-nya melalui custom di halaman Editor HTML blogger. 

Ini akan bahas secara terpisah nantinya.

 Lihat DEMO pada tampilan template default blogger (bawaan simple atau 'sederhana')

APAKAH KALIAN MENGGUNAKAN TEMPLATE VIOMAGZ DARI MAS SUGENG?

Trik ini dapat di terapkan ke template viomagz buatan Mas Sugeng karena viomagz dibuat berdasarkan template default lama (layout versi 2). Cara penerapannya:

1. Masuk ke pengaturan template viomagz
2. Pilih Tema
3. Pilih Edit HTML

Cari kode: </head> dan letakan CSS style berikut tepat di atasnya:

<style> .avatar {
vertical-align: middle;
width: 50px;
height: 50px;
border-radius: 50%;
}</style>

Selanjutnya masih di dalam pengaturan template viomagz, yakni di dalam editor HTMLnya cari kode <data:post.body/> di dalam template viomagz terdapat 3 kode yang sama, maka pilih yang ke tiga. Dan letakan kode berikut tepat di atasnya:

<b:if cond='data:post.authorPhoto.url'><img alt='Avatar' class='avatar' expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/>Oleh:
</b:if>

<a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
<span itemprop='name'><justify><data:post.author/></justify></span>
</a>
<div class='post-header-container container'/>

Save template viomagz kalian.

Lihat DEMO

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini!