Cara meletakan gambar profile penulis di atas postingan template viomagz

Oleh: Anissa Auliasari

 Kalian pengguna template Viomagz? Atau Linkmagz? Akhirnya ada juga permintaan seperti ini: 'Bagaimana caranya agar gambar atau profile penulis di munculkan di atas postingan template viomagz buatan Mas Sugeng?' Kan yang ada photo itu tempatnya di bawah setiap postingan. Wel, kalian datang datng di tempat yang benar, kami adalah ahlinya mengutak atik dan memodifikasi template. Editblogtema.

Mari kita membahasnya sekarang, walaupun request di atas cuma satu satunya namun cukup menggoda saya untuk mencobanya. Dan melakukannya tidaklah sulit. Namun pertama saya ingatkan, viomagz itu template populer namun masih mengusung desain layout template versi kedua. Versi lama. Jangan hiraukan itu karena template yang satu ini cukup sakti bagi pengguna yang memasang adsense. Saya mengatakan: Template yang sangat sukses, populer dan telah dipergunakan secara luas hingga melewati batas negara kita Indonesia.

CARA MELETAKAN GAMBAR PROFILE PENULIS DI ATAS POSTINGAN TEMPLATE VIOMAGZ.

Saya melakukan percobaan pada template viomagz versi 3.1. Jangan berfikir editblogtema tidak membelinya, kami membeli berlusin lusin template untuk di uji coba dan dari sana kami bisa membaca pikiran orang yang mendesainnya (lol) Nah untuk menerapkannya sebenarnya cukup dengan menerapkan cara pemasangan profile penulis untuk template default blogger lama, karena struktur template viomagz sangat mirip dengan template bawaan blogger 'simple' atau tema sederhana. Bedanya hanya pada modifikasi berupa pengurangan elemen. penambahan HTML, CSS dan Javascript.

1. Masuk ke pengaturan template blogger template viomagz
2. Pilih tema
3. Pilih edit HTML

Di dalam halaman editor HTML blogger tersebut cari kode </head> dan letakan kode berikut tepat di atasnya:

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

Kalian dapat merobah kedua kode angka 50px menjadi lebih besar atau lebih kecil, lebih besar akan membuat photo profile menjadi lebih besar, sebaliknya lebih kecil akan memperkecil ukuran photo profile. Itu hanya pengaturan melalui CSS. 

Selanjutnya masih di dalam halaman editor HTML blogger, cari kode berikut:

<data:post.body/>

Ada tiga kode yang sama di dalam template viomagz, jadi pilih yang ketiga. Jika kalian telah menemukan kode yang ketiga letakan kode berikut tepat di atas kode tadi.

<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. Selesai.

Lihat DEMO

Keterangan tambahan:

Cara diatas membuat gambar profile penulis jadi otomatis berada di atas setiap postingan namun tentu saja jika kalian telah melengkapi profile blogger kalian dengan gambar, kalau gambarnya hanya avatar kartun maka yang muncul ya avatar tersebut, jika blank ya gambarnya blank juga dong.

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

Share this post