Stylish Popup About Us Widget For Blogger

How to add a stylish about us info widget in blogger with popup effect - About us, the page is one of the other important pages for every blog because it helps our readers to know about the blog author. So today I'm going to share with you a new and stylish about us info widget for your blog. This widget is responsive and it comes with popup effect and the best part of this widget is that "It's not just an about us page, it's a dynamic about us widget".

The features of this widget are, it will display the photo of the blog author, it will display the total number of the blog articles, it will display the blog description with social media links. The best part of this social media is that - "Social media can also be a means for visitors to get closer and communicate with the blog owner".

Okay, if you want to install it on your own blog, then follow the below steps and add this dynamic about us info widget on your own blog without having any problem.

First visit to your blogger dashboard, Go to the "Template" section and then click on the "Edit Html" button.

In the template, the editor finds the below code by using "Ctrl + F" key together from your keyboard.

]]></b: skin>

After that copy the below CSS code and paste it just before ]]></b: skin>

/* CSS Widget Info About Us */.boxinner{z-index:99;width:100%;height:600px;position:absolute;left:50%;margin-left:-250px;background-color:#222;top:20px}.contentbox{position:absolute;background-color:#fff;top:30px;right:0;left:0;bottom:0;box-shadow:0 1px 5px rgba(0,0,0,.1)}.circle{float:left;height:7px;width:7px;margin:10px 0 0 10px;border-radius:50%}.circle:first-child,.circle:nth-child(2),.circle:nth-child(3){background:#e74c3c}kepala{background:#de9b31;height:50px;width:100%;position:inherit}#textlogo{background:#f0a734;color:#fff;padding-top:15px;text-align:center;font-weight:700;font-size:15px;position:inherit;height:70%;width:61%;box-sizing:initial;}#left{background:#222;color:#fff;top:50px;bottom:0;right:0;width:250px;position:inherit}#left a{color:#bdc3c7;}#left a:hover{color:#fff;}.taber1,.taber2,.taber3,.taber4,.taber5,.taber6,.taber7{cursor:pointer;font-size:14px;padding:15px 25px;color:#bdc3c7;}.taber1:hover{background:#f88c00;color:#fff}.taber2:hover{background:#e74c3c;color:#fff}.taber3:hover{background:#2980b9;color:#fff}.taber4:hover{background:#27C9E9;color:#fff}.taber5:hover{background:#3ca9d0;color:#fff}.taber6:hover{background:#1abc9c;color:#fff}.taber7:hover{background:#f39c12;color:#fff}#left .taber1:hover a,#left .taber2:hover a,#left .taber3:hover a,#left .taber4:hover a,#left .taber5:hover a,#left .taber6:hover a,#left .taber7:hover a{color:#fff}#aboutus{top:50px;width:59%;padding:10px;color:#444;text-align:left;position:inherit;float:left;line-height:normal;font-size:13px}#aboutus img{margin:10px auto 0 auto;display:table;border-radius:100%;max-width:140px;box-shadow:0 0 0 5px rgba(0,0,0,.03)}.scrollbarbox{overflow:hidden;text-align:justify;margin-top:45px}.scrollbarbox .innerone{height:480px;overflow:auto}}a.popup-link{border-bottom:3px solid #e2e2e2;border-radius:3px;padding:8px 40px!important;background:#fff;color:#555!important;text-align:center;letter-spacing:1px;margin-right:10px}#popup{display:none;}#popup:target{display:block;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999;transition:all .3s}.popup-container{position:relative;margin:0 auto;padding:20px}a.popup-close{position:relative;top:5px;border-radius:50px;float:right;right:5px;margin:0 auto;padding:4px 7px;font-weight:bold;font-size:30px;text-decoration:none;line-height:1;color:#fff}a.popup-close:hover{color:#fff}.totalposts{margin:auto;display:table;text-align:center}.totalposts .totalnumber{display:inline;font-weight:700;font-size:400%;color:#999}.totalposts .totallabel{display:block;text-transform:uppercase;color:#2980b9}li.smartpik{border:0;float:right;list-style:none}li.smartpik a{background:#f39c12;color:#fff;display:block;margin:20px 20px 13px 0;padding:10px 20px;line-height:100%;border-radius:3px;font-size:90%;font-weight:bold;text-transform:uppercase;font-size:15px;font-family:'Roboto Condensed';transition:background-color .3s}i.smartpik a:hover{background:#e67e22;color:#fff;}@media (min-width:768px){.popup-container{width:600px}}@media (max-width:767px){.popup-container{width:100%}}

Once again find the below code with the help of the search box.

</body>

Now copy the below HTML code and paste it just before </body>

<div class='popup-wrapper' id='popup'><div class='popup-container'><div class='boxinner'><div class='circle'/><div class='circle'/><div class='circle'/><div class='contentbox'><kepala><span id='textlogo'><data:blog.title/></span><a class='popup-close' href='#closed' title='Close'>&#215;</a></kepala><br/><div class='scrollbarbox'><div class='innerone'><div id='aboutus'><img expr:alt='data:blog.title' expr:title='data:blog.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdn-jwYTSCwes9n6QoxbTDNjKGBkhH5Yh_YFs_0vOTGoo46MxXLUYH1DsemchYvsWi3VNpvvW4FCmIA-GQFtJdYmzKpnbuhx8MOP-QhI5f3ATF3alM6SBR8rE1W6-cR0tD48NVWli7jlc/s250-Ic42/smartpik_admin.jpg'/><br/><script src='/feeds/posts/default?alt=json-in-script&amp;callback=getposts'/><br/><br/><b>www.smartpik.in</b><br/><br/>Type your blog description here<br/><br/>You can write anything here (According to your need)<br/><br/></div></div></div><div id='left'><div class='taber1'><a expr:title='data:blog.title' href='/' rel='nofollow' target='_blank'><data:blog.title/></a></div><div class='taber2'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Google+'><i class='fa fa-google-plus'/> Google+</a></div><div class='taber3'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Facebook'><i class='fa fa-facebook'/> Facebook</a></div><div class='taber4'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Twitter'><i class='fa fa-twitter'/> Twitter</a></div><div class='taber6'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Codepen'><i class='fa fa-codepen'/> Codepen</a></div><div class='taber7'><a href='#' rel='nofollow' target='_blank' title='Join this blog'><i class='fa fa-envelope-o'/> Join this blog</a></div></div></div></div></div></div>

Note - Replace the highlighted text or link with your own text or links.

Now copy the below JavaScript and paste it just before </head>

<script type='text/javascript'>//<![CDATA[// Total Postsfunction getposts(json){var totalposts=json.feed.openSearch$totalResults.$t;document.write('<div class="totalposts"><span class="totalnumber">'+totalposts+'</span><span class="totallabel">Publish Articles</span></div>');}//]]></script>

And then copy the below HTML code and paste it where you want to show this info widget.

<li class='smartpik'><a class='popup-link' href='#popup'>Info</a></li>

All done, now click on the orange save template button to apply these changes.

That's it! I hope you like this info widget! Stay tuned for more cool widgets! Thanks for reading.