Percobaan membuat profile penulis tampil diatas postingan

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? Kodenya sedang saya kembangkan adalah manipulasi dari fitur situs situs besar, 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/>:
<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
Atau lihat DEMO
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


Comments

pilih pola label berikut:

Show more