How To Add Stylish Author Box In Your Blog.

Hello There Friend!

In This Post I Am Going To Tell You How To Add Stylish Author Box In Your Blog, A Stylish Author Box Is One The Best Widgets In Your Blog That Can Create A Very Good Visual Experience In Your Blog. Those Friends Who Do Not Know What Is Author Box.

What Is An Author Box?

Author Box Is A Widget In Which You Can  Add Author Bios, Social Media Links, And Custom Gravatars. You Also Have Full Control Over Colors, Typography, Backgrounds, And More. There Is An Option To Display The Author's Email Her Address So That Readers Can Contact The Author Directly.

Why To Add Author Box In Your Blog?

Author Box Can Be Used To Add Your Details About Your Qualification You Can Also Add The Social Media Icons Below The Blogger So That The Users Can Get In Contact With You Directly.

How To Add Author Box In Your Blog?

Step 1: First Of All Go To The Blogger Dashboard.

Step 2: Lgin To  Your Blogger Account And Go To The Layout Section 

Step 3: Add The New HTML Widget To Your Blog

Step 4: Copy The Below Code And Paste It In That Widget

HTML

<div class="aboutAuthor">
    <div class="K2_bio">
      <img alt="About The Cyber Terminal" src="https://blogger.googleusercontent.com/img/a/AVvXsEgWbMp_6DTx-j9wlpuj858lpEqzkizVHK6VDvhHG1WIX_6DxXjcIeeJ0I4Oqe3JLyn8qVGMUb4ZF_dSU06cz-EQnD6_yb15zWaselHSjH9vTLEAIVKUgoPAeNIN0SF6P0wavViVZhix2ZU7phNgBeR9HLgEGzDAe1hSPfKOFKOZimT6JrjAxa3IUjGb">
      
      <h2> About The Cyber Terminal </h2>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pretium augue non orci pharetra, eget dictum ante sagittis. Suspendisse eu nibh justo. Cras scelerisque urna lectus. Praesent rhoncus ut risus quis convallis. Praesent nec lorem eros.</p>
      
      <div class="k2About-bt">
        <a class="button" href="#"><svg class="K2svg" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g><path d="M28.59,4.29a2.23,2.23,0,0,0-2.27-.36L3.41,13.1a1.83,1.83,0,0,0,0,3.38l1.48.61a1,1,0,0,0,1.31-.53,1,1,0,0,0-.54-1.31L4.56,14.8l22.51-9a.22.22,0,0,1,.23,0,.24.24,0,0,1,.08.23L23.27,25.21a.4.4,0,0,1-.26.3.39.39,0,0,1-.39-.06l-8-6.24,7.83-7.91a1,1,0,0,0-1.22-1.56L9.75,16.54a1,1,0,1,0,1,1.72l4.83-2.85L13.23,17.8a2,2,0,0,0,.2,3.08l8,6.15a2.4,2.4,0,0,0,1.47.5,2.47,2.47,0,0,0,.83-.15,2.37,2.37,0,0,0,1.52-1.75L29.33,6.47A2.23,2.23,0,0,0,28.59,4.29Z"></path></g></svg> Join the Community</a>
      </div>
    </div>
  </div>
  <style>
  .aboutAuthor {
      padding: 60px 0 20px 0;
  }
  .aboutAuthor .K2_bio {
      justify-content: center;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
      align-items: center;
      max-width: 95%;
      margin: auto;
      padding: 80px 15px 65px 15px;
      /*background-color: #FFF;*/
      box-shadow: 0 10px 40px rgba(149,157,165,.2);
      border-radius: 20px;
      border: 5px solid #404040;
  }
  .aboutAuthor .K2_bio img {
      background-image: linear-gradient(to top right,#ffffff,#ffa24d);
      box-shadow: 0 5px 20px rgba(0,0,0,.2);
      padding: 0;
      border: 7px solid #ffc2b4;
      width: 120px;
      height: 120px;
      position: absolute;
      border-radius: 50%;
      top: -60px;
      pointer-events: none;
      
  }
     .aboutAuthor .K2_bio h2{
    margin:0px!important;
      padding: 0;
    }
  .aboutAuthor .K2_bio p {
      margin: 1em 0!important;
      text-align: center;
  }
  .aboutAuthor .K2_bio .k2About-bt {
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
  }
  .k2About-bt svg  {
      width: 22px;
      height: 22px;
      fill: #FFF;
    margin-right:3px;
  }  
   .darkmoade .aboutAuthor .K2_bio {
    background-color: var(--dark-bgAlt);
    }
  </style>  

Replace The Credentials According To Your Need Like Image And Name

Step 5: Click On The Save Button And See The Magic.

We Have Added The Stylish Author Box In Our Blog Successfully Hope You Have Like It.

If You Have Any Problem In Adding The Stylish Author Box In Your Blog Tell Me In The Comment Section I Will Fully Try To Resolve It.

Thanks For Reading.