-->

Stylish About Me Blogger Widget in 2021 - Antarnomi Creations

Welcome to Antarnomi Creations, You can also display different types of information widgets on different blogs. But they all have a unique design. So it's also a distinctive type of About Me widget. In it, you can put your information along with your photo, which can be your social media account ID. It makes it look pretty attractive.


Stylish About Me Blogger Widget in 2021 - Antarnomi Creations


How to add Stylish About Widget

  • Go to your Blogger dashboard.
  • Go to the Layout section.
  • Click Add New Widget.
  • Create a new widget as an HTML / JavaScript widget.
  • Copy the code and paste it into the widget content.

<style>
    .contact{font-family:roboto}.contact main .title p,.contact main button{letter-spacing:.5px;text-transform:uppercase}.contact *,.contact :after,.contact :before{margin:0;padding:0;box-sizing:border-box}.contact-area{width:100%;height:100vh;position:relative}.contact{position:relative;max-width:420px;padding:40px 20px;overflow:hidden;margin:0 auto}@media (min-width:1024px){.contact{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}}.contact main,.contact main section .content{width:100%;position:relative;float:left}.contact main section{border-radius:5px;float:left;width:100%;background-color:#eb524a}.contact main section .content{padding:20px 30px 50px;text-align:center}.contact main section .content img{display:inline-block;width:140px;border-radius:50%}@media (min-width:414px){.contact main section .content{text-align:left}.contact main section .content img{float:left;width:30%;margin-right:10%}}.contact main section .content aside{float:left;width:100%;color:#fff;margin-top:10px}@media (min-width:414px){.contact main section .content aside{width:60%}}.contact main section .content aside h1{font-weight:100;font-size:22px;margin-bottom:10px}.contact main section .content aside p{font-size:14px;letter-spacing:.5px;line-height:160%}.contact main .title{float:left;width:100%;background-color:#c63535;max-height:0;border-bottom-left-radius:5px;border-bottom-right-radius:5px;overflow:hidden;-webkit-transition:all .55s;-moz-transition:all .55s;-o-transition:all .55s;transition:all .55s}.contact main .title.active{max-height:100px;-webkit-transition:all 1.3s;-moz-transition:all 1.3s;-o-transition:all 1.3s;transition:all 1.3s}.contact main .title.active p{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);transition-delay:.2s}.contact main .title p{padding:15px 30px;color:#fff;font-size:16px;display:inline-block;font-weight:500;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0)}.contact main button{position:absolute;bottom:0;right:50%;background-color:#ffbe44;color:#c63535;border:0;width:200px;height:48px;text-align:center;border-radius:30px;font-size:16px;margin-bottom:-24px;margin-right:-100px;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s;transition-delay:.1s;outline:0;overflow:hidden;z-index:10;font-family:inherit}.contact main button span{opacity:1;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s;transition-delay:.4s;display:block;width:200px;float:left;padding:15px 0}.contact main button svg{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:0;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.contact main button svg path{fill:#c63535}.contact main button.active{margin-right:0;right:20px;width:65px;height:65px;margin-bottom:-32.5px;text-indent:100%;white-space:nowrap;overflow:hidden;border-radius:65px;box-shadow:0 3px 15px rgba(0,0,0,.2)}.contact main button.active span{opacity:0;transition-delay:0s;width:200px}.contact main button.active svg{opacity:1;transition-delay:.5s}.contact nav{float:left;width:100%;overflow:hidden;max-height:0;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s}.contact nav.active{max-height:600px;-webkit-transition:all 1s;-moz-transition:all 1s;-o-transition:all 1s;transition:all 1s}.contact nav.active a{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);-webkit-transition:all .7s;-moz-transition:all .7s;-o-transition:all .7s;transition:all .7s}.contact nav.active a:nth-of-type(1){transition-delay:.5s}.contact nav.active a:nth-of-type(2){transition-delay:.7s}.contact nav.active a:nth-of-type(3){transition-delay:.9s}.contact nav a{float:left;width:100%;margin-top:18px;background-color:#fff;border:1px solid #ccc;padding:18px 20px;border-radius:5px;text-decoration:none;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s;opacity:0;-webkit-transform:translateY(-10px);-moz-transform:translateY(-10px);-ms-transform:translateY(-10px);-o-transform:translateY(-10px);transform:translateY(-10px);position:relative}@media (min-width:414px){.contact nav a{padding:18px 30px}}.contact nav a .arrow{position:absolute;right:15px;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%)}.contact nav a .arrow path{fill:#e6e6e6}.contact nav a.gmail .icon svg{background-color:#d14836}.contact nav a.gmail .content h1{color:#d14836}.contact nav a.facebook .icon svg{background-color:#3b5998}.contact nav a.facebook .content h1{color:#3b5998}.contact nav a.twitter .icon svg{background-color:#1da1f2}.contact nav a.twitter .content h1{color:#1da1f2}.contact nav a .icon{float:left;width:50px;height:50px;border-radius:50%;overflow:hidden;margin-right:20px}.contact nav a .icon svg{width:100%;height:100%;padding:14px}.contact nav a .icon svg path{fill:#fff}.contact nav a .content h1{font-size:20px;font-weight:400;line-height:160%;letter-spacing:.4px}.contact nav a .content span{font-size:14px;color:#b3b3b3;display:block;letter-spacing:.4px}
    </style>
    <div class="contact-area"><div class="contact"><main><section><div class="content"><img src="enter image url" alt="Profile Image" /><aside><h1>enter your name</h1><p>enter your details</p></aside><button><span>Contact Me</span><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewbox="0 0 48 48"><g class="nc-icon-wrapper" fill="#444444"><path d="M14.83 30.83L24 21.66l9.17 9.17L36 28 24 16 12 28z"></path></g></svg></button></div><div class="title"><p>Contact Me</p></div></section></main><nav><a href="#" class="gmail"><div class="icon"><svg viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M16 3v10c0 .567-.433 1-1 1h-1V4.925L8 9.233 2 4.925V14H1c-.567 0-1-.433-1-1V3c0-.283.108-.533.287-.712C.467 2.107.718 2 1 2h.333L8 6.833 14.667 2H15c.283 0 .533.108.713.288.179.179.287.429.287.712z" fill-rule="evenodd"/></path></svg></div><div class="content"><h1>Email</h1><span>enter your email</span></div><svg class="arrow" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewbox="0 0 48 48"><g class="nc-icon-wrapper" fill="#444444"><path d="M17.17 32.92l9.17-9.17-9.17-9.17L20 11.75l12 12-12 12z"></path></g></svg></a><a href="#" class="facebook"><div class="icon"><svg viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M15.117 0H.883C.395 0 0 .395 0 .883v14.234c0 .488.395.883.883.883h7.663V9.804H6.46V7.39h2.086V5.607c0-2.066 1.262-3.19 3.106-3.19.883 0 1.642.064 1.863.094v2.16h-1.28c-1 0-1.195.48-1.195 1.18v1.54h2.39l-.31 2.42h-2.08V16h4.077c.488 0 .883-.395.883-.883V.883C16 .395 15.605 0 15.117 0" fill-rule="nonzero"/></path></svg></div><div class="content"><h1>Facebook</h1><span>enter fb id</span></div><svg class="arrow" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewbox="0 0 48 48"><g class="nc-icon-wrapper" fill="#444444"><path d="M17.17 32.92l9.17-9.17-9.17-9.17L20 11.75l12 12-12 12z"></path></g></svg></a><a href="#" class="twitter"><div class="icon"><svg viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.37-1.337.64-2.085.79-.598-.64-1.45-1.04-2.396-1.04-1.812 0-3.282 1.47-3.282 3.28 0 .26.03.51.085.75-2.728-.13-5.147-1.44-6.766-3.42C.83 2.58.67 3.14.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.41-.02-.61-.058.42 1.304 1.63 2.253 3.07 2.28-1.12.88-2.54 1.404-4.07 1.404-.26 0-.52-.015-.78-.045 1.46.93 3.18 1.474 5.04 1.474 6.04 0 9.34-5 9.34-9.33 0-.14 0-.28-.01-.42.64-.46 1.2-1.04 1.64-1.7z" fill-rule="nonzero"/></path></svg></div><div class="content"><h1>Twitter</h1><span>enter twiter id</span></div><svg class="arrow" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewbox="0 0 48 48"><g class="nc-icon-wrapper" fill="#444444"><path d="M17.17 32.92l9.17-9.17-9.17-9.17L20 11.75l12 12-12 12z"></path></g></svg></a></nav></div></div>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
    <script>$('button').click(function(){
      $('button').toggleClass('active');
      $('.title').toggleClass('active');
      $('nav').toggleClass('active');
    });</script>


Customization this Code

There is no information about this code. The easiest way is to prepare the format. To upload the information, open this code in Notepad. Now keep the information it wrote in the access.