Percobaan membuat profile penulis tampil diatas postingan

AvatarOleh:
Kalau anda pengguna template bawaan blogger Notable profile penulis berada diatas postingan adalah fitur bawaan template tersebut, akan tetapi bagaimana jika anda ingin agar fitur tersebut ada pada template yang lain selalin notable? Bisakah kita menempatkan profile penulis diatas setiap postingan, misalnya diterapkan pada template SOHO?, ini hanya langkah percobaan, tetapi yang penting ternyata: BISA:
author profile example
author profile example

Sumber kode dibawah ini misalnya saya pasang dibawah di atas kode <data:post.body/>, (kalau tidak ada mungkin sudah di parse menjadi: &lt;data:post.body/&gt;):
<div style="background-color: white; box-sizing: inherit; color: rgba(0, 0, 0, 0.8); font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen, Ubuntu, Cantarell, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif; font-size: medium;"><div class="kd" style="box-sizing: inherit; margin-top: 32px;"><div class="ah ag" style="align-items: center; box-sizing: inherit; display: flex;"><div style="box-sizing: inherit;"><a href="https://www.editblogtema.net/" style="-webkit-tap-highlight-color: transparent; box-sizing: inherit; text-decoration-line: none;"><img alt="Sofyan" class="l fv ke kf" height="48" src="https://4.bp.blogspot.com/-daWqoEe7uDc/XUgAkRpMO8I/AAAAAAAAni4/d-LmOKXWQtYWx7iFWSmMdc0rwtdLwv-gACK4BGAYYCw/s113/IMG_20190805_102151.jpg" style="border-radius: 50%; box-sizing: inherit; display: block; height: 48px; vertical-align: middle; width: 48px;" width="48" /></a></div><div class="kg ac l" style="box-sizing: inherit; margin-left: 12px; width: 620px;"><div class="ag" style="box-sizing: inherit; display: flex;"><div style="box-sizing: inherit; flex: 1 1 0%;"><span class="aw b ax ay az ba l dz ce"    style="box-sizing: inherit; display: block; fill: rgba(0, 0, 0, 0.84); letter-spacing: 0px; line-height: 20px;font-family:,;font-size:15.8px;color:rgba(0 , 0 , 0 , 0.84);"><div class="kh ag ah ki" style="align-items: center; box-sizing: inherit; display: flex; margin-bottom: 2px;"><span class="aw ec ed ay cp kj ef eg kk ei dz"  style="-webkit-box-orient: vertical; -webkit-line-clamp: 1; box-sizing: inherit; display: -webkit-box; line-height: 20px; max-height: 20px; overflow: hidden; text-overflow: ellipsis;font-size:16px;"><a class="dr ds bf bg bh bi bj bk bl bm ji bp bq dv dw" href="https//www.editblogtema.net" style="-webkit-tap-highlight-color: transparent; border: inherit; box-sizing: inherit; fill: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; margin: 0px; padding: 0px; text-decoration-line: none;">sofyan</a></span><div class="kl l au h" style="box-sizing: inherit; flex: 0 0 auto; margin-left: 8px;"><button class="km dz ce bu kn ko kp kq bm dv kr ks kt ku kv kw bx aw b ax kx fq ba by bz af ca cb bp" style="-webkit-tap-highlight-color: transparent; background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px center; background-repeat: initial; background-size: initial; border-color: rgba(0, 0, 0, 0.54); border-radius: 4px; border-style: solid; border-width: 1px; color: rgba(0, 0, 0, 0.84); fill: rgba(0, 0, 0, 0.84); font-family: medium-content-sans-serif-font, &quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, &quot;Lucida Sans&quot;, Geneva, Arial, sans-serif; font-size: 15px; letter-spacing: 0px; line-height: 18px; margin: 0px; overflow: visible; padding: 0px 8px;">Ikuti</button></div></div></span></div></div><span class="aw b ax ay az ba l cf cg"    style="box-sizing: inherit; display: block; fill: rgba(0, 0, 0, 0.54); letter-spacing: 0px; line-height: 20px;font-family:,;font-size:15.8px;color:rgba(0 , 0 , 0 , 0.54);"><span class="aw ec ed ay cp kj ef eg kk ei cf"  style="-webkit-box-orient: vertical; -webkit-line-clamp: 1; box-sizing: inherit; display: -webkit-box; line-height: 20px; max-height: 20px; overflow: hidden; text-overflow: ellipsis;font-size:16px;"><div style="box-sizing: inherit;"><a class="dr ds bf bg bh bi bj bk bl bm ji bp bq dv dw" href="https://www.editblogtema.net/" style="-webkit-tap-highlight-color: transparent; border: inherit; box-sizing: inherit; fill: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; margin: 0px; padding: 0px; text-decoration-line: none;">Aug 16</a> · 2 min read</div><div><br /></div></span></span></div></div></div></div>

Hasilnya seperti gambar jika di terapkan pada template SOHO:
profile pengarang diatas postingan
profile pengarang diatas postingan

Dan tentu saja trik ini dapat diterapkan pada template manapun. Kelihatannya ini adalah alternatif yang bagus buat blog  dengan banyak penulis. Selain gambar profile pengarang atau penulis yang langsung terhubung ke profile blogger, juga terdapat tombol follow atau ikuti yang rencana saya akan dapat di isi dengan link halaman medsos atau Follower blogger
www.editblogtema.net

4 Komentar untuk "Percobaan membuat profile penulis tampil diatas postingan"

  1. aku dah liat demo nya kak. seruuu juga ya kayaknya.boleh dicoba.makasih byk sharingnya

    BalasHapus
    Balasan
    1. Demo kadang tidak berlaku karena penggantian template

      Hapus
  2. Template saya nggak ada kode post.body/>:

    BalasHapus
    Balasan
    1. Mungkin kodenya sudah di parse, coba baca kembali lebih teliti postingan di atas

      Hapus

Silahkan berkomentar sesuai dengan topik kita ya...

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel