Stylish About Me Blogger Widget

Stylish About Me Blogger Widget

Updated on 18 May - Post a Comment
In this blogger widget we will use jQuery code to make on click animation work and the left of the work will be handled by using CSS.

If you want this widget to be shown on your website then you have to follow the steps which are provided below.


The code of this stylish about me blogger widget was a little bit lengthy but I compress that for you so that it will not affect your website loading time.

At first I decided to make it using blogger conditional codes but then it was somehow difficult for me so I make this widget without blogger conditional tags you can change the things in this widget whatever you want.

Before getting started I have a snapped preview of this widget you can see below.

Snapped preview of stylish about me blogger widget:

Normal Preview:

Preview when user Clicks on contact me button:

I have shown you the preview of this widget and also given you the description now it's time to make it yours if you want to add this widget in your blogger blog you have to follow the steps which are provided below.

Steps to add stylish about me blogger widget:
  1. Go to Blogger Dashboard
  2. Go to Layout Section
  3. Click Add New Widget
  4. Make new widget as HTML/Javascript Widget
    5. Choose location according to your requirements where you want to show this stylish about me blogger widget.
  5. Copy the code provided below and paste it as a widget content.
    6. <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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/256492/_mLIxaKY_400x400.jpg" alt="Profile Image"><aside><h1>M.Muzammil<-e30/h1><p>Hi, I'm Muhammad Muzammil and I'm a Graphic and Web Designer.</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"/></svg></div><div class="content"><h1>Email</h1><span>softwebtuts@gmail.com</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"/></svg></div><div class="content"><h1>Facebook</h1><span>muzammil0011</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"/></svg></div><div class="content"><h1>Twitter</h1><span>@softwebtuts</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<-e30 mark="">'></script>
<script>$('button').click(function(){
  $('button').toggleClass('active');
  $('.title').toggleClass('active');
  $('nav').toggleClass('active');
});</script>
  6. Save Widget
Customizations in the above code:
In the code provided above you have to make some customisation. you have to replace the highlighted text with your own text.

Also make sure to remove the jquery script if you are already having that in your blogger template.
source:softwebtuts.com
Tags:

0 comments for Stylish About Me Blogger Widget

Cancel