Author profile widget adalah widget untuk menampilkan profil penulis/pengarang di situs web, widget tersebut juga dikenal dengan nama author box atau widget profil yang umumnya berisi photo, biografi dan deskripsi singkat mengenai author tersebut misalnya; keahlian, profesi, atau mungkin juga hobby, tidak jarang pula pada widget profil dicantumkan pula media sosial sang author.
Biasanya widget profil dipasang di sidebar situs, post footer (di bagian bawah postingan) dan bisa juga diletakkan di atas postingan tepatnya setelah judul, mungkin ada juga yang menempatkan widget profil di footer situs tapi itu jarang sekali dilakukan oleh para blogger.
1. Author Profile Widget 4.0
[ads id="ads1"] Author profile widget (widget profil) generasi 4.0 ini saya rancang untuk ditempatkan di sidebar situs, desain widget profil ini hampir mirip dengan widget profil blogger.com tapi dari sisi fitur tentu saja berbeda.Author profile widget generasi 4.0 ini memiliki fitur tombol sosial media, tombol follow blog, job title, deskripsi author dan tidak lupa pula saya tambahkan bingkai photo profil serta nama author.
Aslinya widget profil ini didesain dengan lebar 100%, hanya saja pada live preview widget profil saya membatasi lebarnya, ketika diinstall/pasang lebar widget profil akan mengikuti lebar container (siebar) yang memuatnya.
Kode HTML
<div class="author-profile-widget">
<div class="apw-header">
<img class="apw-img-avatar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizKAYUGTCM3x83ST8eCTm7kEgMgkhJXADmo5c_raEBpRO7qJVaM8SUl7mMRa1J8VhU40OZxgnX2A-fCtqCg68kbkzYYR1xUtI7Hs__OOcyQavJO33ilUAfz4HcdZ3CJMub6H1IFD1XTPz4BMu5rBMrbT_VeWnixKR64pADOXCtYeIwxf58RzJf14ZV/w100-h100/abdul-somad.jpg" loading="lazy" alt="avatar"/>
<div class="apw-author-name">Abdul Somad</div>
<div class="apw-author-jobtitle">SEO Specialist</div>
</div>
<div class="apw-main">
<div class="apw-subtitle">Description</div>
<p class="apw-desc">Berpengalaman lebih dari delapan tahun di bidang blogging dan memiliki keahlian review yang cukup mumpuni</p>
<div class="apw-social-media">
<a class="apw-facebook-icons" href="https://web.facebook.com/profile.php?id=100068896260349" title="Facebook"><svg viewBox="0 0 24 24"><path d="M15.997 3.985h2.191V.169C17.81.117 16.51 0 14.996 0c-3.159 0-5.323 1.987-5.323 5.639V9H6.187v4.266h3.486V24h4.274V13.267h3.345l.531-4.266h-3.877V6.062c.001-1.233.333-2.077 2.051-2.077z"></path></svg></a>
<a class="apw-twitter-icons" href="https://twitter.com/somadsomad39" title="Twitter"><svg viewBox="0 0 24 24"><path d="M.5 18.7c10 6.2 22.7-.7 22.5-13 1-.7 1.9-1.6 2.6-2.7-1 .5-2 .8-3.1.9 1.14-.7 2-1.7 2.4-2.9-1 .6-2 1-3.3 1.3-4.3-4.13-10 .3-8.8 4.7-4.3-.2-8-2.3-10.6-5.4C1 4 1.5 7.1 3.9 8.5 3 8.4 2 8.2 1.5 7.8c0 2.6 1.8 4.6 4.1 5.1-.8.2-1.5.3-2.3.1.6 2 2.6 3.6 4.8 3.6-2 1.6-4.7 2.4-7.6 2.1z"></path></svg></a>
<a class="apw-blogger-icons" href="https://www.blogger.com/profile/03823270409239620867" title="Blogger"><svg viewBox="-2 -2 24 24"><path d="M13.593 19.96c3.48 0 6.307-2.836 6.327-6.297l.039-5.095-.059-.278-.167-.348-.283-.22c-.367-.287-2.228.02-2.729-.435-.355-.324-.41-.91-.518-1.706-.2-1.54-.326-1.62-.568-2.142C14.76 1.585 12.382.193 10.75 0H6.325C2.845 0 0 2.839 0 6.307v7.356c0 3.461 2.845 6.296 6.325 6.296h7.268zM6.406 5.151h3.507c.67 0 1.212.544 1.212 1.205 0 .657-.542 1.206-1.212 1.206H6.406c-.67 0-1.21-.549-1.21-1.206 0-.661.54-1.205 1.21-1.205zm-1.21 8.418c0-.66.54-1.2 1.21-1.2h7.127c.665 0 1.205.54 1.205 1.2 0 .652-.54 1.2-1.205 1.2H6.406c-.67 0-1.21-.548-1.21-1.2z"></path></svg></a>
<a class="apw-follow-buttons" href="https://www.blogger.com/follow.g?blogID=6286909915724512730" title="cordialblogger.com">+ Follow</a>
</div>
</div>
</div>
Kode CSS
.author-profile-widget{width:100%;min-width:250px;position:relative;border-radius:5px;border:1px solid rgba(155,155,155,0.3);box-sizing:border-box}
.apw-header{position:relative;height:180px;width:100%;background:-webkit-linear-gradient(left,#ad39e4 0%,#3f59d7 100%)}
.apw-img-avatar{position:relative;width:90px;height:90px;box-shadow:0 8px 8px rgba(0,0,0,0.2);border-radius:50%;object-position:center;object-fit:cover;left:50%;transform:translateX(-50%)translateY(25px)}
.apw-author-name{position:absolute;bottom:0;color:#fff;text-align:center;white-space:nowrap;transform:translateY(-10px) translateX(-50%);left:50%;letter-spacing:0.7px;margin:1em 0;font-size:17px;font-weight:600}
.apw-author-jobtitle{position:absolute;bottom:3px;font-size:11px;color:#fff;white-space:nowrap;text-transform:uppercase;letter-spacing:1.5px;margin:0;left:50%;transform:translateX(-50%) translateY(-7px)}.apw-main{position:relative;padding:15px 10px}
.apw-subtitle{font-size:11px;opacity:0.7;font-weight:600;margin-bottom:10px;letter-spacing:1px;text-transform:uppercase}.apw-desc{line-height:1.5;color:#636363;font-size:15px;margin:0;font-weight:400}
.apw-social-media{display:flex;align-items:center;margin-top:15px}.apw-social-media svg{fill:#4666d9bd;width:16px;display:block}.apw-social-media a{display:inline-flex;align-items:center;justify-content:center;background-color:rgba(93,133,193,0.10);margin-right:10px;box-shadow:0 1px 1px rgb(0 0 0/20%)}.apw-social-media a:last-child{margin-right:0}.apw-social-media a:hover svg{fill:#31448b}
.apw-blogger-icons,.apw-facebook-icons,.apw-twitter-icons{height:26px;width:26px;border-radius:50%;}
.apw-follow-buttons{width:80px;height:26px;border-radius:26px;font-size:14px;color:#313234;margin-left:auto}
2. Author Profile Widget 4.0.5
Berbeda dengan versi 4.0, author profile widget generasi 4.0.5 ini saya desain untuk ditampilkan di bagian bawah postingan (post footer), dari segi fitur masih sama namun tata letak photo profil, nama author dan job title saya bedakan.Desain widget profil ini kurang-lebih seperti tata letak profil twitter dan profil facebook vesi desktop, desain tata letak widget profil inilah yang menjadi acuan pendapat saya bahwa widget profil ini cocok diletakkan di post footer. Desainnya yang flexible sebenarnya mendukung untuk ditempatkan dibagian mana saja di body situs web, tetapi jika kamu ingin widget profil di tempatkan di bagian bawah postingan maka, widget profil 4.0.5 adalah pilihan yang paling tepat.
Kode HTML
<div class="apw2">
<div class="apw2-header">
<img class="apw2-img-avatar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizKAYUGTCM3x83ST8eCTm7kEgMgkhJXADmo5c_raEBpRO7qJVaM8SUl7mMRa1J8VhU40OZxgnX2A-fCtqCg68kbkzYYR1xUtI7Hs__OOcyQavJO33ilUAfz4HcdZ3CJMub6H1IFD1XTPz4BMu5rBMrbT_VeWnixKR64pADOXCtYeIwxf58RzJf14ZV/w100-h100/abdul-somad.jpg" loading="lazy" alt="avatar"/>
<div class="apw2-author-name">Abdul Somad</div>
<div class="apw2-author-jobtitle">Digital Marketing</div>
</div>
<div class="apw2-main">
<div class="apw2-subtitle">Description</div>
<p class="apw2-desc">Berpengalaman lebih dari delapan tahun di bidang blogging dan memiliki keahlian review yang cukup mumpuni</p>
<div class="apw2-social-media">
<a class="apw2-facebook-icons" href="https://web.facebook.com/profile.php?id=100068896260349" title="Facebook"><svg viewBox="0 0 24 24"><path d="M15.997 3.985h2.191V.169C17.81.117 16.51 0 14.996 0c-3.159 0-5.323 1.987-5.323 5.639V9H6.187v4.266h3.486V24h4.274V13.267h3.345l.531-4.266h-3.877V6.062c.001-1.233.333-2.077 2.051-2.077z"></path></svg></a>
<a class="apw2-twitter-icons" href="https://twitter.com/somadsomad39" title="Twitter"><svg viewBox="0 0 24 24"><path d="M.5 18.7c10 6.2 22.7-.7 22.5-13 1-.7 1.9-1.6 2.6-2.7-1 .5-2 .8-3.1.9 1.14-.7 2-1.7 2.4-2.9-1 .6-2 1-3.3 1.3-4.3-4.13-10 .3-8.8 4.7-4.3-.2-8-2.3-10.6-5.4C1 4 1.5 7.1 3.9 8.5 3 8.4 2 8.2 1.5 7.8c0 2.6 1.8 4.6 4.1 5.1-.8.2-1.5.3-2.3.1.6 2 2.6 3.6 4.8 3.6-2 1.6-4.7 2.4-7.6 2.1z"></path></svg></a>
<a class="apw2-blogger-icons" href="https://www.blogger.com/profile/03823270409239620867" title="Blogger"><svg viewBox="-2 -2 24 24"><path d="M13.593 19.96c3.48 0 6.307-2.836 6.327-6.297l.039-5.095-.059-.278-.167-.348-.283-.22c-.367-.287-2.228.02-2.729-.435-.355-.324-.41-.91-.518-1.706-.2-1.54-.326-1.62-.568-2.142C14.76 1.585 12.382.193 10.75 0H6.325C2.845 0 0 2.839 0 6.307v7.356c0 3.461 2.845 6.296 6.325 6.296h7.268zM6.406 5.151h3.507c.67 0 1.212.544 1.212 1.205 0 .657-.542 1.206-1.212 1.206H6.406c-.67 0-1.21-.549-1.21-1.206 0-.661.54-1.205 1.21-1.205zm-1.21 8.418c0-.66.54-1.2 1.21-1.2h7.127c.665 0 1.205.54 1.205 1.2 0 .652-.54 1.2-1.205 1.2H6.406c-.67 0-1.21-.548-1.21-1.2z"></path></svg></a>
<a class="apw2-follow-buttons" href="https://www.blogger.com/follow.g?blogID=6286909915724512730" title="cordialblogger.com">+ Follow</a>
</div>
</div>
</div>
Kode CSS
.apw2{width:100%;min-width:250px;position:relative;border-radius:5px;border:1px solid rgba(155,155,155,0.3);box-sizing:border-box}
.apw2-header{position:relative;height:120px;width:100%;background:-webkit-linear-gradient(left,#ad39e4 0%,#3f59d7 100%)}
.apw2-img-avatar{position:relative;width:70px;height:70px;left:20px;top:30px;border-radius:50%;object-position:center;object-fit:cover;box-shadow:0 8px 8px rgb(0 0 0/20%)}
.apw2-author-name{position:absolute;left:110px;bottom:35px;margin:1em 0;font-size:17px;font-weight:600;color:#fff;white-space:nowrap;letter-spacing:0.7px}
.apw2-author-jobtitle{position:absolute;left:110px;bottom:35px;font-size:11px;color:#fff;white-space:nowrap;text-transform:uppercase;letter-spacing:1.5px;margin:0}.apw2-main{position:relative;background:-webkit-linear-gradient(left,#ad39e4 0%,#3f59d7 100%);padding-right:20px;padding-left:20px;padding-top:0;padding-bottom:15px}.apw2-main p{color:#fff}
.apw2-subtitle{font-size:11px;color:#fff;font-weight:600;margin-bottom:10px;letter-spacing:1px;text-transform:uppercase}.apw-desc{line-height:1.5;color:#636363;font-size:15px;margin:0;font-weight:400}
.apw2-social-media{display:flex;align-items:center;margin-top:15px}.apw2-social-media svg{fill:#fff;width:16px;display:block}.apw2-social-media a{display:inline-flex;align-items:center;justify-content:center;background-color:rgba(93,133,193,0.10);margin-right:10px;box-shadow:0 1px 1px rgb(0 0 0/20%);border:solid 1px #fff}.apw2-social-media a:last-child{margin-right:0}.apw2-social-media a:hover svg{fill:#31448b}
.apw2-blogger-icons,.apw2-facebook-icons,.apw2-twitter-icons{height:26px;width:26px;border-radius:50%;}
.apw2-follow-buttons{width:80px;height:26px;border-radius:26px;font-size:14px;color:#fff;margin-left:auto}
3. Author Profile Widget 4.0.7
Widget profil yang ketiga adalah kombinasi dari kedua widget profil di atas, tampilan header (photo profil, author name, job title serta tinggi header) pada widget profil generasi 4.0.7 dapat berubah dari tata letak widget profil versi satu ke tata letak widget profil versi yang kedua.Author Profile Widget (APW) generasi 4.0.7 ini spesial untuk ditempatkan di sidebar situs/blog, desain-nya sengaja saya rancang lebih kompleks dari yang sebelumnya karena mengingat sidebar situs tidak selalu berada disamping ketika diakses melalui layar yang lebih kecil.
Soal fleksibilitas tentu saja jangan diragukan karena saya telah mempertimbangkan semua detail dengan sangat teliti sehingga APW3 ini tidak kalah responsive dengan APW2, masing-masing container author profile widget telah disetting ke
width:100% agar dapat mengikuti lebar container yang akan memuatnya.Saat ini saya juga menggunakan widget profil versi 4.0.7, selain keren widget profil ini bisa berubah dari mode portrait ke mode landscape dan tetap responsive di berbagai ukuran layar serta tidak mengganggu performa (pagespeed) website.
Ketika melihat demo, cobalah untuk mengecilkan layar desktop anda untuk melihat perbedaan APW3 (Author Profile Widget 4.0.7) dengan APW2 dan APW1, jika kamu sedang menggunakan smartphone cobalah mengaktifkan fitur situs desktop untuk melihat perubahan tata letak dan desain APW3.
Kode HTML
<div class="apw3">
<div class="apw3-header">
<img class="apw3-img-avatar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizKAYUGTCM3x83ST8eCTm7kEgMgkhJXADmo5c_raEBpRO7qJVaM8SUl7mMRa1J8VhU40OZxgnX2A-fCtqCg68kbkzYYR1xUtI7Hs__OOcyQavJO33ilUAfz4HcdZ3CJMub6H1IFD1XTPz4BMu5rBMrbT_VeWnixKR64pADOXCtYeIwxf58RzJf14ZV/w100-h100/abdul-somad.jpg" loading="lazy" alt="avatar"/>
<div class="apw3-author-name">Abdul Somad</div>
<div class="apw3-author-jobtitle">Content Writer</div>
</div>
<div class="apw3-main">
<div class="apw3-subtitle">Description</div>
<p class="apw3-desc">Berpengalaman lebih dari delapan tahun di bidang blogging dan memiliki keahlian review yang cukup mumpuni</p>
<div class="apw3-social-media">
<a class="apw3-facebook-icons" href="https://web.facebook.com/profile.php?id=100068896260349" title="Facebook"><svg viewBox="0 0 24 24"><path d="M15.997 3.985h2.191V.169C17.81.117 16.51 0 14.996 0c-3.159 0-5.323 1.987-5.323 5.639V9H6.187v4.266h3.486V24h4.274V13.267h3.345l.531-4.266h-3.877V6.062c.001-1.233.333-2.077 2.051-2.077z"></path></svg></a>
<a class="apw3-twitter-icons" href="https://twitter.com/somadsomad39" title="Twitter"><svg viewBox="0 0 24 24"><path d="M.5 18.7c10 6.2 22.7-.7 22.5-13 1-.7 1.9-1.6 2.6-2.7-1 .5-2 .8-3.1.9 1.14-.7 2-1.7 2.4-2.9-1 .6-2 1-3.3 1.3-4.3-4.13-10 .3-8.8 4.7-4.3-.2-8-2.3-10.6-5.4C1 4 1.5 7.1 3.9 8.5 3 8.4 2 8.2 1.5 7.8c0 2.6 1.8 4.6 4.1 5.1-.8.2-1.5.3-2.3.1.6 2 2.6 3.6 4.8 3.6-2 1.6-4.7 2.4-7.6 2.1z"></path></svg></a>
<a class="apw3-blogger-icons" href="https://www.blogger.com/profile/03823270409239620867" title="Blogger"><svg viewBox="-2 -2 24 24"><path d="M13.593 19.96c3.48 0 6.307-2.836 6.327-6.297l.039-5.095-.059-.278-.167-.348-.283-.22c-.367-.287-2.228.02-2.729-.435-.355-.324-.41-.91-.518-1.706-.2-1.54-.326-1.62-.568-2.142C14.76 1.585 12.382.193 10.75 0H6.325C2.845 0 0 2.839 0 6.307v7.356c0 3.461 2.845 6.296 6.325 6.296h7.268zM6.406 5.151h3.507c.67 0 1.212.544 1.212 1.205 0 .657-.542 1.206-1.212 1.206H6.406c-.67 0-1.21-.549-1.21-1.206 0-.661.54-1.205 1.21-1.205zm-1.21 8.418c0-.66.54-1.2 1.21-1.2h7.127c.665 0 1.205.54 1.205 1.2 0 .652-.54 1.2-1.205 1.2H6.406c-.67 0-1.21-.548-1.21-1.2z"></path></svg></a>
<a class="apw3-follow-buttons" href="https://www.blogger.com/follow.g?blogID=6286909915724512730" title="cordialblogger.com">+ Follow</a>
</div>
</div>
</div>
Kode CSS
.apw3{width:100%;min-width:250px;position:relative;border-radius:5px;border:1px solid rgba(155,155,155,0.3);box-sizing:border-box}
.apw3-header{position:relative;height:180px;width:100%;background:-webkit-linear-gradient(left,#ad39e4 0%,#3f59d7 100%)}
.apw3-img-avatar{position:relative;width:90px;height:90px;box-shadow:0 8px 8px rgba(0,0,0,0.2);border-radius:50%;object-position:center;object-fit:cover;left:50%;transform:translateX(-50%)translateY(25px)}
.apw3-author-name{position:absolute;bottom:0;margin:1em 0;font-size:17px;font-weight:600;color:#fff;text-align:center;white-space:nowrap;transform:translateY(-10px) translateX(-50%);left:50%;letter-spacing:0.7px}
.apw3-author-jobtitle{position:absolute;bottom:3px;font-size:11px;color:#fff;white-space:nowrap;text-transform:uppercase;letter-spacing:1.5px;margin:0;left:50%;transform:translateX(-50%) translateY(-7px)}
.apw3-main{position:relative;padding:15px 10px}
.apw3-subtitle{font-size:11px;opacity:0.7;font-weight:600;margin-bottom:10px;letter-spacing:1px;text-transform:uppercase}
.apw3-desc{line-height:1.5;color:#636363;font-size:15px;margin:0;font-weight:400}
.apw3-social-media{display:flex;align-items:center;margin-top:15px}
.apw3-social-media svg{fill:#4666d9bd;width:16px;display:block}
.apw3-social-media a{display:inline-flex;align-items:center;justify-content:center;background-color:rgba(93,133,193,0.10);margin-right:10px;box-shadow:0 1px 1px rgb(0 0 0/20%)}
.apw3-social-media a:last-child{margin-right:0}
.apw3-social-media a:hover svg{fill:#31448b}
.apw3-blogger-icons,.apw3-facebook-icons,.apw3-twitter-icons{height:26px;width:26px;border-radius:50%;}
.apw3-follow-buttons{width:80px;height:26px;border-radius:26px;font-size:14px;color:#313234;margin-left:auto}
@media screen and (max-width:880px){
.apw3-header{height:120px}
.apw3-img-avatar{transform:none;left:20px;width:70px;height:70px;top:30px}
.apw3-main{background:-webkit-linear-gradient(left,#ad39e4 0%,#3f59d7 100%);padding-right:20px;padding-left:20px}
.apw3-author-name,.apw3-author-jobtitle{left:110px;bottom:35px;transform:none}
.apw3-subtitle,.apw3-desc{color:#fff;opacity:1}
.apw3-social-media svg{fill:#fff}
.apw3-social-media a{border:solid 1px #fff}
.apw3-social-media a:hover svg{fill:#3f59d7}
.apw3-follow-buttons{color:#fff}
}
Coba perhatikan css @media screen and (max-width:880px) adalah css conditional situs web saya, ketika diakses memlalui ukuran layar 880px maka sidebar situs saya akan pindah ke bawah kemudian lebar sidebar juga berubah menjadi 100%.Widget profil (author profile widget) juga akan mengikutinya dan merubah tata letak elemen-elemen apw-header (photo profile, author name dan job title) sehingga terlihat lebih pantas dan terlihat lebih keren tentunya.
4. Author Profile Widget 4.0.9
Widget profil 4.0.9 merupakan yang paling mirip dengan profil sosial media twitter, facebook web dan ko-fi.com karena dilengkapi dengan cover image, soal kelangkapan fitur masih sama dengan widget profil yang lainnya, meskipun dilengkapi dengan cover image sama sekali tidak menganggu performa widget profil karena saya menambahkan atributloading="lazy" pada cover image dan profile image.Fleksibilitasnya juga sangat baik, meskipun diakses melalui perangkat dengan ukuran layar berbeda cover image tidak kehilangan dimensi dan aspek rasio karena saya menerapkan css
object-fit:cover; pada cover image.
Kode HTML
<div class="apw4">
<div class="apw4-header">
<div class="apw4-cover"><img class="img-cover" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKT-TWrfTfPrKFUR2i08O78is3_ms0gM35dqhEul2LyfmqtAG4IAs4RORjdVbeGo48BQcp0j31PwdEJsnGkqz6TfAeObv8wqQ15uF7MCRXS2SbGNXFS8pHQ9_EYWDhh_-aRqF3z0OAhZZOl_fcNpWnSjQfsok1CfWad8Tg2OLhXvkScshzzOIsVaMR/s640/aura.jpg" loading="lazy" alt="cover"/></div>
<img class="apw4-img-avatar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizKAYUGTCM3x83ST8eCTm7kEgMgkhJXADmo5c_raEBpRO7qJVaM8SUl7mMRa1J8VhU40OZxgnX2A-fCtqCg68kbkzYYR1xUtI7Hs__OOcyQavJO33ilUAfz4HcdZ3CJMub6H1IFD1XTPz4BMu5rBMrbT_VeWnixKR64pADOXCtYeIwxf58RzJf14ZV/w100-h100/abdul-somad.jpg" loading="lazy" alt="avatar" />
<div class="apw4-name">Abdul Somad</div>
<div class="apw4-jobtitle">CEO & Author</div>
</div>
<div class="apw4-main">
<div class="apw4-subtitle">Description</div>
<p class="apw4-desc">Berpengalaman lebih dari delapan tahun di bidang blogging dan memiliki keahlian review yang sangat terampil.
</p>
<div class="apw4-social-media">
<a class="apw4-facebook-icons" href="https://web.facebook.com/profile.php?id=100068896260349" title="Facebook"><svg viewBox="0 0 24 24"><path d="M15.997 3.985h2.191V.169C17.81.117 16.51 0 14.996 0c-3.159 0-5.323 1.987-5.323 5.639V9H6.187v4.266h3.486V24h4.274V13.267h3.345l.531-4.266h-3.877V6.062c.001-1.233.333-2.077 2.051-2.077z"></path></svg></a>
<a class="apw4-twitter-icons" href="https://twitter.com/somadsomad39" title="Twitter"><svg viewBox="0 0 24 24"><path d="M.5 18.7c10 6.2 22.7-.7 22.5-13 1-.7 1.9-1.6 2.6-2.7-1 .5-2 .8-3.1.9 1.14-.7 2-1.7 2.4-2.9-1 .6-2 1-3.3 1.3-4.3-4.13-10 .3-8.8 4.7-4.3-.2-8-2.3-10.6-5.4C1 4 1.5 7.1 3.9 8.5 3 8.4 2 8.2 1.5 7.8c0 2.6 1.8 4.6 4.1 5.1-.8.2-1.5.3-2.3.1.6 2 2.6 3.6 4.8 3.6-2 1.6-4.7 2.4-7.6 2.1z"></path></svg></a>
<a class="apw4-blogger-icons" href="https://www.cordialblogger.com/" title="Blogger"><svg viewBox="-2 -2 24 24"><path d="M13.593 19.96c3.48 0 6.307-2.836 6.327-6.297l.039-5.095-.059-.278-.167-.348-.283-.22c-.367-.287-2.228.02-2.729-.435-.355-.324-.41-.91-.518-1.706-.2-1.54-.326-1.62-.568-2.142C14.76 1.585 12.382.193 10.75 0H6.325C2.845 0 0 2.839 0 6.307v7.356c0 3.461 2.845 6.296 6.325 6.296h7.268zM6.406 5.151h3.507c.67 0 1.212.544 1.212 1.205 0 .657-.542 1.206-1.212 1.206H6.406c-.67 0-1.21-.549-1.21-1.206 0-.661.54-1.205 1.21-1.205zm-1.21 8.418c0-.66.54-1.2 1.21-1.2h7.127c.665 0 1.205.54 1.205 1.2 0 .652-.54 1.2-1.205 1.2H6.406c-.67 0-1.21-.548-1.21-1.2z"></path></svg></a>
<a class="apw4-follow-buttons" href="https://www.blogger.com/follow.g?blogID=6286909915724512730" title="cordialblogger.com">+ Follow</a>
</div>
</div>
</div>
Kode CSS
.apw4{width:100%;position:relative;border-radius:5px;border:1px solid rgba(155,155,155,0.3);box-sizing: border-box}
.apw4-header{position:relative;height:170px;width:100%}
.apw4-cover{position:relative;width:100%;height:100px;box-shadow: 0 5px 5px rgb(0 0 0 / 20%);}
.img-cover{width:100%;height:100px;object-fit:cover;}
.apw4-img-avatar{width:80px;height:80px;left:20px;bottom:30px;position:relative;box-shadow:0 8px 8px rgb(0 0 0 / 20%);border:solid 3px #fff;border-radius:50%;object-position:center;object-fit:cover;}
.apw4-name{position:absolute;margin:1em 0;left:120px;top:90px;font-size:17px;font-weight:600;color:#1f2024;white-space:nowrap;letter-spacing:0.7px;}
.apw4-jobtitle{position: absolute;left:120px;top:130px;font-size:11px;color:#1f2024;white-space:nowrap;text-transform:uppercase;letter-spacing:1.5px;margin:0}
.apw4-main{position:relative;padding:15px 20px}
.apw4-subtitle{font-size:11px;opacity:0.7;font-weight:600;margin-bottom:10px;letter-spacing:1px;text-transform:uppercase}
.apw4-desc{line-height:1.5;color:#636b6f;font-size:15px;margin:0;font-weight:400}
.apw4-social-media{display:flex;align-items:center;margin-top:15px}
.apw4-social-media svg{fill:#4666d9bd;width:16px;display:block}
.apw4-social-media a{display:inline-flex;align-items:center;justify-content:center;background-color:rgba(93,133,193,0.10);margin-right:10px;box-shadow:0 1px 1px rgb(0 0 0/20%)}
.apw4-social-media a:last-child{margin-right:0}
.apw4-social-media a:hover svg{fill:#31448b}
.apw4-blogger-icons,.apw4-facebook-icons,.apw4-twitter-icons{height:26px;width:26px;border-radius:50%;}
.apw4-follow-buttons{width:80px;height:26px;border-radius:26px;font-size:14px;color:#313234;text-decoration: none;margin-left:auto}
5. Author Profile Widget 5.0
Author profile widget (widget profil) generasi 5.0 adalah yang paling kompleks dan paling keren dari semua widget profil yang telah saya rilis, dilengkapi dengan tiga tab yaitu; About Me, Listingan (daftar postingan terbaik dari sang author) dan contact person.Tidak lupa pula efek transisi saya tambahkan pada tab tersebut sehingga menjadikan widget profil ini semakin keren, bisa dibilang widget ini merupakan kombinasi antara widget profil dan widget posts.
Kode HTML
<div class="author-card" data-state="#about">
<div class="author-card-header">
<img class="author-img-avatar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizKAYUGTCM3x83ST8eCTm7kEgMgkhJXADmo5c_raEBpRO7qJVaM8SUl7mMRa1J8VhU40OZxgnX2A-fCtqCg68kbkzYYR1xUtI7Hs__OOcyQavJO33ilUAfz4HcdZ3CJMub6H1IFD1XTPz4BMu5rBMrbT_VeWnixKR64pADOXCtYeIwxf58RzJf14ZV/w100-h100/abdul-somad.jpg" loading="lazy" alt="avatar"/>
<div class="author-name">Abdul Somad</div>
<div class="author-jobtitle">CEO & Author</div>
</div>
<div class="card-main-wrap">
<div class="card-main">
<div class="author-section is-active" id="about">
<div class="content-section">
<div class="author-tab">Description</div>
<p class="card-desc">Berpengalaman lebih dari delapan tahun di bidang blogging dan memiliki keahlian review yang cukup mumpuni.</p>
<div class="social-media">
<a class="facebook-icons" href="https://web.facebook.com/profile.php?id=100068896260349" title="Facebook"><svg viewBox="0 0 24 24"><path d="M15.997 3.985h2.191V.169C17.81.117 16.51 0 14.996 0c-3.159 0-5.323 1.987-5.323 5.639V9H6.187v4.266h3.486V24h4.274V13.267h3.345l.531-4.266h-3.877V6.062c.001-1.233.333-2.077 2.051-2.077z"></path></svg></a>
<a class="twitter-icons" href="https://twitter.com/somadsomad39" title="Twitter"><svg viewBox="0 0 24 24"><path d="M.5 18.7c10 6.2 22.7-.7 22.5-13 1-.7 1.9-1.6 2.6-2.7-1 .5-2 .8-3.1.9 1.14-.7 2-1.7 2.4-2.9-1 .6-2 1-3.3 1.3-4.3-4.13-10 .3-8.8 4.7-4.3-.2-8-2.3-10.6-5.4C1 4 1.5 7.1 3.9 8.5 3 8.4 2 8.2 1.5 7.8c0 2.6 1.8 4.6 4.1 5.1-.8.2-1.5.3-2.3.1.6 2 2.6 3.6 4.8 3.6-2 1.6-4.7 2.4-7.6 2.1z"></path></svg></a>
<a class="blogger-icons" href="https://www.blogger.com/profile/03823270409239620867" title="Blogger"><svg viewBox="-2 -2 24 24"><path d="M13.593 19.96c3.48 0 6.307-2.836 6.327-6.297l.039-5.095-.059-.278-.167-.348-.283-.22c-.367-.287-2.228.02-2.729-.435-.355-.324-.41-.91-.518-1.706-.2-1.54-.326-1.62-.568-2.142C14.76 1.585 12.382.193 10.75 0H6.325C2.845 0 0 2.839 0 6.307v7.356c0 3.461 2.845 6.296 6.325 6.296h7.268zM6.406 5.151h3.507c.67 0 1.212.544 1.212 1.205 0 .657-.542 1.206-1.212 1.206H6.406c-.67 0-1.21-.549-1.21-1.206 0-.661.54-1.205 1.21-1.205zm-1.21 8.418c0-.66.54-1.2 1.21-1.2h7.127c.665 0 1.205.54 1.205 1.2 0 .652-.54 1.2-1.205 1.2H6.406c-.67 0-1.21-.548-1.21-1.2z"></path></svg></a>
<a class="follow-buttons" href="https://www.blogger.com/follow.g?blogID=6286909915724512730" title="cordialblogger.com">+ Follow</a>
</div>
</div>
</div>
<div class="author-section" id="mylist">
<div class="content-section">
<div class="author-tab">Best of me</div>
<div class="best-list">
<div class="best-list-title"><span>1</span><a href="#">The Most Effective Way To Increase Blog Traffic</a></div>
<div class="best-list-title"><span>2</span><a href="#">E.A.T (Expertise, Authoritativeness, and Trustworthiness)</a></div>
<div class="best-list-title"><span>3</span><a href="#">8 Most Effective Tips To Increase Website Authority</a></div>
<div class="best-list-title"><span>4</span><a href="#">Tips and Strategies for Overcoming Surge Bouce Rate</a></div>
<div class="best-list-title"><span>5</span><a href="#">Page Speed Optimization</a></div>
</div>
</div>
</div>
<div class="author-section" id="contact">
<div class="content-section">
<div class="author-tab">Contact</div>
<div class="author-contact">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
<circle cx="12" cy="10" r="3" /></svg>
Batam, Kepulauan Riau, Indonesia
</div>
<div class="author-contact">
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z" /></svg>082181000605</div>
<div class="author-contact">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
<path d="M22 6l-10 7L2 6" /></svg>
cordialblogger@gmail.com
</div>
</div>
</div>
</div>
<div class="tab-buttons">
<button data-section="#about" class="is-active">About</button>
<button data-section="#mylist">Listings</button>
<button data-section="#contact">Contact</button>
</div>
</div>
</div>
Kode CSS
.author-card{width:100%;min-width:250px;position:relative;border-radius:5px;border:1px solid rgba(155,155,155,0.3);box-sizing:border-box;margin:0 auto;margin-top:25px;}.author-card-header{position:relative;height:180px;width:100%;background:-webkit-linear-gradient(left,#ad39e4 0%,#3f59d7 100%)}
.author-img-avatar{position:relative;width:90px;height:90px;box-shadow:0 8px 8px rgba(0,0,0,0.2);border-radius:50%;object-position:center;object-fit:cover;left:50%;transform:translateX(-50%)translateY(25px)}
.author-name{position:absolute;bottom:0;color:#fff;font-weight:600;text-align:center;margin:1em 0;white-space:nowrap;transform:translateY(-10px) translateX(-50%);left:50%;letter-spacing:0.7px}
.author-jobtitle{position:absolute;bottom:0;font-size:11px;color:#fff;white-space:nowrap;text-transform:uppercase;letter-spacing:1.5px;margin:0;left:50%;transform:translateX(-50%) translateY(-7px)}
.card-main{position:relative;padding:15px 10px}.author-tab{font-size:11px;opacity:0.7;font-weight:600;margin-bottom:10px;letter-spacing:1px;text-transform:uppercase}.card-desc{line-height:1.5;color:#636363;font-size:15px;margin:0;font-weight:400}.social-media{display:flex;align-items:center;margin-top:15px}.social-media svg{fill:#4666d9bd;width:16px;display:block}.social-media a{display:inline-flex;align-items:center;justify-content:center;background-color:rgba(93,133,193,0.10);margin-right:10px;box-shadow:0 1px 1px rgb(0 0 0/20%)}.social-media a:last-child{margin-right:0}.social-media a:hover svg{fill:#31448b}.blogger-icons,.facebook-icons,.twitter-icons{height:26px;width:26px;border-radius:50%;}.follow-buttons{width:80px;height:26px;border-radius:26px;font-size:14px;color:#313234;margin-left:auto}
@keyframes fadeIn{0%{opacity:0;transform:translatey(40px)}100%{opacity:1}}
.author-section.is-active{display:block;animation:fadeIn 0.6s both}.author-section{display:none}.author-contact{margin-top:15px;margin-bottom:15px;display:flex;align-items:center;color:#6f6f7b}.author-contact svg{flex-shrink:0;width:18px;height:18px;margin-right:12px;padding-right:12px;border-right:1px solid #dfe2ec}
.tab-buttons{display:flex;position:sticky;bottom:0;left:0}.tab-buttons button{flex:1 1 auto;background-color:transparent;color:#3367d6;font-size:15px;padding:10px 5px;border:0;outline:0}.tab-buttons button.is-active,.tab-buttons button:hover{border-bottom:3px solid #4957d9;background:linear-gradient(to bottom, rgba(127, 199, 231, 0) 0%, rgba(207, 204, 255, 0.2) 44%, rgba(211, 226, 255, 0.4) 100%)}.best-list-title{display:flex;margin-top:12px;margin-bottom:12px;align-items:center}
.best-list-title a{padding-left:15px;color:#636363;}.best-list-title span{border-right:2px solid #dfe2ec;padding-right:15px;padding-left:10px}
@media screen and (max-width: 880px){.author-card-header{height:120px}.author-img-avatar{transform:none;left:20px;width:70px;height:70px;top:30px}.card-main{padding-right:20px;padding-left:20px}.author-name,.author-jobtitle{left:110px;bottom:35px;transform:none}.author-tab,.card-desc{color:#fff;opacity:1}.social-media svg{fill:#fff}.social-media a{border:solid 1px #fff;color:#fff}.social-media a:hover svg{fill:#3f59d7}.card-main-wrap{background:-webkit-linear-gradient(left,#ad39e4 0%,#3f59d7 100%);border-bottom-left-radius:5px;border-bottom-right-radius:5px}.author-contact svg{stroke:#fff}.card-main p,.tab-buttons button,.tab-buttons button.is-active,.author-contact,.best-list a{color:#fff}.best-list-title span{padding-left:0;color:#fff}}
Script Tab
<script type='text/javascript'>//<![CDATA[
const buttons = document.querySelectorAll(".tab-buttons button");
const sections = document.querySelectorAll(".author-section");
const card = document.querySelector(".author-card");
const handleButtonClick = e => {
const targetSection = e.target.getAttribute("data-section");
const section = document.querySelector(targetSection);
targetSection !== "#about" ?
card.classList.add("is-active") :
card.classList.remove("is-active");
card.setAttribute("data-state", targetSection);
sections.forEach(s => s.classList.remove("is-active"));
buttons.forEach(b => b.classList.remove("is-active"));
e.target.classList.add("is-active");
section.classList.add("is-active");
};
buttons.forEach(btn => {
btn.addEventListener("click", handleButtonClick);
});
//]]></script>
Jika kamu tetarik untuk menggunakan widget profil versi 5.0 silahkan saja copy kodenya dan install/pasang di website kamu, semua widget profil di website cordialblogger.com 100% gratis.Kamu hanya perlu mengikuti (follow) blog cordialblogger.com sebagai tanda dukungan kepada author karena dukunganmu sangat berarti bagi author agar tetap semangat membuat konten dan mendesain widget-widget yang dibutuhkan para blogger profesional seperti kamu.