I hereby share a simple HTML/CSS Widget to add responsive author box in websites. This script works in Blogger, WordPress and other platforms.
Since this is a CSS/HTML only script, you can use this as widget below the post or in the sidebar.
Sample Author Widget with Scripts
First, please see the responsive sample author widget below, and find the relevant HTML/CSS script further below.
![[Cheezzz]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwsLGgW27n3g8kXtWtBQbfkEChyBR3_EN-h0JMfGYh-clZw_CudCks5tniv6z1e6wwLqqKOOpUjOfbE71-8oTRegUxaxOp3M5don1cj7YA2rq9Fknos8E0nT45STNTLsxnpJj3uowexVUQWfa2C-V-JLqCZ_85vaMDLRLuJitt2lv20g/s1600/android-chrome-192x192-1%20(1).png)
Step 1: Install forkawesome
You need to install forkawesome icons in Blogger by pasting the code (see below) in meta tag of XML/HTML editor of Blogger theme.
<link crossorigin='anonymous' href='https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css' integrity='sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=' rel='stylesheet'/>
Step 2: Put the HTML code
Please copy the CSS/HTML script below and paste into respective area of your website. You can also paste it as HTML in HTML Editor mode of 'About' page.
<style>.bahiri{background:#fff;margin:10px auto 20px;box-shadow: 0px 0px 6px 0px #b5b5b5;padding:20px;overflow:hidden;border-radius: 10px;}.bhitri-photo{float:left;display: flex;flex-wrap: nowrap;justify-content: center;box-shadow: 0 0 1px rgb(0 0 0 / 20%), 0 0 1px 5px #dee8e6;margin:0 20px 0 0;background: #eee;border-radius:100%;animation: cbvhfiuohiuqhgieurvbureqrioqioertuoeiuoiutiourt 2s infinite;}@keyframes cbvhfiuohiuqhgieurvbureqrioqioertuoeiuoiutiourt{0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(51,217,178,.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(51,217,178,0)}100%{transform:scale(.95);box-shadow:0 0 0 0 rgba(51,217,178,0)}}.bhitri-photo img{width:70px;background-size: cover;height:auto;max-width:100%!important;border-radius:50%;transition:all .3s;}.bhitri-photo img:hover{transform:rotate(-15deg)}.khoikkhoik h4{font-size:18px;font-weight:600;display:block;margin:0;margin-bottom:7px}.khoikkhoik h4 a{color:#333}.khoikkhoik p{margin:0;color:#333;font-size:14px;margin-bottom:4px;line-height:25px;font-weight:400}.hummmm li{list-style:none!important;float:left}.hummmm a{border-bottom:none}.hummmm a:after,.hummmm a:before{content:none!important}.hummmm li a{background:rgba(0,0,0,0.5);color:#fff;font-size:15px;text-align:center;display:inline-block;padding:0;margin:0 10px 0 0;width:40px;height:40px;line-height:40px;border: 3px solid #fff;box-shadow: 0 3px 5px rgb(66 92 219);border-radius:50%}.hummmm li:nth-child(1) a{background:#f2db0f;}.hummmm li a:hover{opacity:.9;color:#fff}/* Multiple Author Box CSS Code*/.hummmm {float: right;}.hguyjiyewetetiuyoiupoiuuiyuytyterwwweety{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;}.hguyjiyewetetiuyoiupoiuuiyuytyterwwweety li{position:absolute;display:block;list-style:none;width:40px;height:40px;background:rgba(255,255,255,0.10);animation:animate 45s linear infinite;-webkit-animation:animate 45s linear infinite;-webkit-transition-timing-function:linear;transition-timing-function:linear;bottom:-160px;}.hguyjiyewetetiuyoiupoiuuiyuytyterwwweety li:nth-child(1){left:25%;width:60px;height:60px;animation-delay:0s}.hguyjiyewetetiuyoiupoiuuiyuytyterwwweety li:nth-child(2){left:10%;width:10px;height:10px;animation-delay:2s;animation-duration:12s}.hguyjiyewetetiuyoiupoiuuiyuytyterwwweety li:nth-child(3){left:70%;width:10px;height:10px;animation-delay:4s}.hguyjiyewetetiuyoiupoiuuiyuytyterwwweety li:nth-child(4){left:40%;width:40px;height:40px;animation-delay:0s;animation-duration:18s}.hguyjiyewetetiuyoiupoiuuiyuytyterwwweety li:nth-child(5){left:65%;width:10px;height:10px;animation-delay:0s}.hguyjiyewetetiuyoiupoiuuiyuytyterwwweety li:nth-child(6){left:75%;width:90px;height:90px;animation-delay:3s}.hguyjiyewetetiuyoiupoiuuiyuytyterwwweety li:nth-child(7){left:35%;width:130px;height:130px;animation-delay:7s}.hguyjiyewetetiuyoiupoiuuiyuytyterwwweety li:nth-child(8){left:50%;width:15px;height:15px;animation-delay:15s;animation-duration:45s}.hguyjiyewetetiuyoiupoiuuiyuytyterwwweety li:nth-child(9){left:20%;width:5px;height:5px;animation-delay:2s;animation-duration:35s}.hguyjiyewetetiuyoiupoiuuiyuytyterwwweety li:nth-child(10){left:85%;width:130px;height:130px;animation-delay:0s;animation-duration:11s}@keyframes animate{0%{transform:translateY(0) rotate(0deg);opacity:1;border-radius:0}100%{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}</style><div class="bahiri"><div class="bichko"><div class="bhitri-photo"><img alt="[Cheezzz]" class="futaa" height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwsLGgW27n3g8kXtWtBQbfkEChyBR3_EN-h0JMfGYh-clZw_CudCks5tniv6z1e6wwLqqKOOpUjOfbE71-8oTRegUxaxOp3M5don1cj7YA2rq9Fknos8E0nT45STNTLsxnpJj3uowexVUQWfa2C-V-JLqCZ_85vaMDLRLuJitt2lv20g/s1600/android-chrome-192x192-1%20(1).png" width="90" /></div><div class="khoikkhoik"><h4>Author <i class="fa fa-check-circle" style="color:rgb(17,143,249);font-size:14px;" title="Verified Author"></i></h4><p>Yaha majjale description halnu hai kinaki author ko authority bhanekai estai widget bata banni ho. Social profile pani halnu. HTML/CSS aaudaina ra service chahiyema hami banaidinxau, hamro service page hernu hola bistrit janakari ko lagi.</p><div class="hummmm"><li><a class="external-link" href="#"><i class="fa fa-buymeacoffee" aria-hidden="true"></i></a></li></div></div></div></div> <li> <a href="https://chat.whatsapp.com/DdJg9SrYVOx9uoFny5S7MA"> <svg fill="none" stroke="currentColor" viewbox="0 0 24 24"><path d="M17 12V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v14l4-4h10a1 1 0 0 0 1-1m4-6h-2v9H6v2a1 1 0 0 0 1 1h11l4 4V7a1 1 0 0 0-1-1Z"></path></svg> <span>Join Community!</span> </a> </li>
Please do not forget to replace the default text, profile image URL social profile with your own identity. You can also add more social profiles like Facebook, Twitter, LinkedIn, Whatsapp, Telegram, Tiktok etc. If possible, please rename default CSS classes with your own. Regarding the social icons, you need to install forkawesome in your theme so that the respective icons load.
