Hello friends! Welcome to your CJ Flare blog. So today we have created a new category in this CJ Flare Blog, which is called Widgets. Yes, you heard it right. Let me tell you that in this blog you will find blogging related articles, as well as Updates and tricks, are also found. So in this widgets category, I will tell about the widgets related to Blogger. So today in this blog post we are going to talk about Stylish About Me Dedicate how can implement it in your blogger.
 |
| Stylish About Me Blogger Widget |
Stylish About Me Blogger Widget
You may have seen different types of About Widgets in different blogs at times. But they all have different designs. So it is also a different type of About Me Widget. In this you can share your details with your photos and It will be your social media account ID. Which makes it look quite attractive.
Also Read-Install Adblock Killer In Blogger
Also Read-Add Floating Ad Box In Blogger
Also Read-Meta Tag Generator Tool For Blogger
Now we will learn how we can put this Stylish About Me Widget in your Blogger. So you have given all the steps below. Follow these steps.
Steps To Add Stylish About Me Blogger Widget
- Go to Blogger Dashboard
- Go to Layout Section
- Click Add New Widget
- Make New Widget as HTML/JavaScript Widget
- Copy The Code and Paste in 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>
- Save Widget
Customizations In The Code
There are no details in this code, only the layout is ready. To add your details, open this code in Notepad. Now where in the entry you have written, save your details.
Last word - So you just know about Stylish About Me Blogger Widget. So how do you like this Widget? Surely tell by commenting below.
Post a Comment