Pasang Author Box di Bawah Postingan Dengan Social Media Ringan

Pasang Author Box di Bawah Postingan Dengan Social Media Ringan - Banyak cara yang bisa kita lakukan untuk memperindah tampilan blog salah satunya dengan memasang indentitas author (penulis) seperti yang akan saya ulas kali ini.

Kita tidak harus menggunakan Javascript atau saudara-saudaranya yang tentunya dapat menambah beban loading blog. Cukup dengan sentuhan CSS dan Icon SVG kamu sudah bisa membuat tampilan blog terlihat modern.

Author Box di Bawah Postingan yang akan saya bagikan ini cukup ringan serta langsung menyatu dengan social media, sehingga para visitor blog anda dapat mengenal/follow sosmed kalian, cukup menarik bukan?

Untuk contoh author box bisa kalian lihat pada gambar di bawah ini (klik gambar perbesar)

Untuk membuat gaya author box modern seperti itu tidaklah sulit, kamu hanya perlu meletakan CSS berikut ini di atas </style>

.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:#E8EAF6}#aboutme-in{background:#E8EAF6;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%}}

Bila ingin mengganti warna backgroundnya ubah kode yang saya marking kuning.

Langkah selanjutnya letakan kode HTML ini dimana saja anda ingin menampilkan author box profile medsos ini, biasanya diletakan di bawah postingan. Karena tiap template berbeda-beda kalian harus sesuaikan sendiri.

<div class='aboutme-in' id='aboutme-in'><span class='img-about'>
<img alt='author photo' class='img-in lazyload' data-src='//1.bp.blogspot.com/-n0_2qlSijPg/YGaaruBcq1I/AAAAAAAACVk/0d4SSZH7MTYV75a4fdnAH4n-8O94fUvaQCLcBGAsYHQ/s320/rico.png' 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/3982182947896001553' rel='author' title='author profile'><span>Rico</span></a>

<span class='sosmed-about'>
<a href='URL-LINK' 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='URL-LINK' 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='URL LINK' 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='URL-LINK' 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>

Save template dan lihat hasilnya!

Demikianlah Cara Pasang Author Box di Bawah Postingan Dengan Social Media Ringan, selamat mencoba!

Jejak Unik

Kumpulan Informasi Unik Menarik Dari Berbagai Belahan Dunia. www.jejakunik.com

Bagikan Artikel ini