Cara Membuat Author Box di Bawah Postingan yang Simpel dan Ringan

Secara garis besar fungsi author box ini selain untuk estetika juga supaya blog tampil lebih profesional. Jika kamu pernah berkunjung ke website kelas atas, rata-rata mereka menampilkan profil author ini. Oleh karena itu tidak heran apabila terkadang ada beberapa orang yang kurang pas apabila profil author tidak ditampilkan diblog.

Profil author box yang akan saya jelaskan pada artikel ini sangat simpel. Profil ini hanya terdiri dari nama penulis dan juga sosial media seperti facebook, instagram, twitter, youtube dll. Namun meski simpel, profil ini tetap elegan.

Sebenarnya sudah banyak blogger lain yang membuat tutorial serupa. Cara ini juga saya modifikasi dari tutorial yang sudah ada tersebut. Profil author ini tidak hanya ringan tapi juga sangat responsif diberbagai ukuran layar. Contoh penampakannya seperti ini:

Buat kamu yang membuat author box seperti gambar di atas silahkan ikuti langkah-langkahnya berikut:

1. Copy CSS di bawah ini di style halaman post kamu. Jika bingung letakkan saja di atas </style>

/* Meta post author */
.aboutfull,.img-about{float:left;z-index:1}
.authorikon{fill:#fff;margin:8px 10px 0 0;width:24px;height:24px;background:#1c2331;border-radius:20%}
.authorikon:hover{fill:#005af0;background:#efefef}
#aboutme-in{background:#fff;margin:20px 0 10px;display:block;position:relative;padding:5px;overflow:hidden}
#aboutme-in:before{content:'';display:block;width:100%;height:35px;position:absolute;top:0;left:0;right:0;z-index:0}
.aboutfull,.img-about{position:relative;display:inline-block}
.img-in{border:1px solid #1c2331;width:65px;height:65px;border-radius:100%;z-index:1;vertical-align:middle;margin:2px 30px 0 2px}
.aboutfull a{color:#1c2331;font-weight:700}
.aboutfull{padding:5px 0 0;width:calc(100% - 155px);color:#1c2331}
.aboutfull a:hover{color:#005af0}
.aname,.sosmed-about{display:block}
.aname{color:#fff;font-size:15px;font-weight:500;padding:0;margin:10px 0;text-transform:uppercase}
@media screen and (max-width:480px){.aboutfull,.aboutfull a{color:#000}
#aboutme-in{text-align:center}
.img-about{float:none}
.img-in{margin:0}
.aboutfull{width:100%}
}

2. Kemudian simpan kode HTML berikut dimana saja kamu ingin menampilkan profil author tersebut. Misal diakhir postingan blog yaitu tepat di atas tombol share atau dibawah iklan bawah post.

<div class='aboutme-in' id='aboutme-in'>
<span class='img-about'>
<img alt='author photo' class='img-in lazyload' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1w-iE68UB2Wx1oR1mBMz-UXUBqFXamjs3UROOy9aYS6KMO7GjKlOVLfgsLNLJ4FisAb34nrBgXxZAfsu3PpO-5qI4-vZP2zEDRcyRCx7CYKJLJCBcmYclDrIfKnD5WsUO1SOyFhyphenhyphenJr3oW/w40/author.jpg' height='40' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' title='Author Photo'/>
</span>
<span class='aboutfull'>
By:
<a class='g-profile' href='https://www.blogger.com/profile/17195151981500818409' rel='author' title='author profile'>
<span>Tedi Eka</span>
</a>
<span class='sosmed-about'>
<a href='https://www.facebook.com/tediekaii' rel='nofollow noopener' target='_blank' title='Link to Facebook'><svg class='authorikon' height='34' viewBox='0 0 24 24' width='34' xmlns='http://www.w3.org/2000/svg'><title>Facebook</title><path d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z'/></svg></a>
<a href='https://www.instagram.com/tediekaa' rel='nofollow noopener' target='_blank' title='Link to Instagram'><svg class='authorikon' height='34' viewBox='0 0 24 24' width='34' xmlns='http://www.w3.org/2000/svg'><title>instagram</title><path d='M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z'/></svg></a>
<a href='https://twitter.com/tedieka07' rel='nofollow noopener' target='_blank' title='Link to Twitter'><svg class='authorikon' height='34' viewBox='0 0 24 24' width='34' xmlns='http://www.w3.org/2000/svg'><title>Twitter</title><path d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33Z'/></svg></a>
<a href='https://www.youtube.com/channel/UCKzo4ibqdiUMIhLd0RNkknA' rel='nofollow noopener' target='_blank' title='Link to Youtube'><svg class='authorikon' height='34' viewBox='0 0 24 24' width='34' xmlns='http://www.w3.org/2000/svg'><title>Youtube</title><path d='M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z'/></svg></a>
<a expr:href='&quot;https://www.blogger.com/follow.g?view=FOLLOW&amp;blogID=&quot; + data:blog.blogId' rel='nofollow noopener' target='_blank' title='Link to Blogger'><svg class='authorikon' height='34' viewBox='0 0 24 24' width='34' xmlns='http://www.w3.org/2000/svg'><title>Blogger</title><path d='M14,13H9.95A1,1 0 0,0 8.95,14A1,1 0 0,0 9.95,15H14A1,1 0 0,0 15,14A1,1 0 0,0 14,13M9.95,10H12.55A1,1 0 0,0 13.55,9A1,1 0 0,0 12.55,8H9.95A1,1 0 0,0 8.95,9A1,1 0 0,0 9.95,10M16,9V10A1,1 0 0,0 17,11A1,1 0 0,1 18,12V15A3,3 0 0,1 15,18H9A3,3 0 0,1 6,15V8A3,3 0 0,1 9,5H13A3,3 0 0,1 16,8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z'/></svg></a>
</span>
</span>
</div>

Untuk mempermudah cari kodenya silahkan inspect element blognya. Misal seperti gambar dibawah ini saya ingin meletakkan author boxnya setelah iklan bawah post. Maka kode HTML di atas akan saya paste setelah kode <div class="iklan-bawahpost"> ... </div>.

Silahkan sesuaikan dengan blog dan selera kamu masing-masing. Jika ada yang kurang jelas silahkan tinggalkan komentar.