Popup Effect About Us Info Widget For Blogger

How to add a stylish about us info widget in blogger with popup effect - About us page is one of the other important page 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 a 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".

So before you add this widget on your own blog make sure to take a look of this widget by clicking on the below demo button.

Demo

Okay, if you like this widget and 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.

How To Install Popup Effect About Us Info Widget?

First visit to your blogger dashboard  - Visit

Go to the "Template" section and then click on the "Edit Html" button.

In template editor find the below code (Any one) by using "Ctrl + F" key together from your keyboard.

]]></b:skin> Or </style>

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

Or </style>.

/* 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.askwithloud{border:0;float:right;list-style:none}
li.askwithloud 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-family:'Roboto Condensed';transition:background-color .3s}
i.askwithloud 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 (Any one) with the help of the search box.

<body> Or <body

Now copy the below html code and paste it just after <body Or <body>.

<div class='popup-wrapper' id='popup'>
<div class='popup-container'>
<div class='boxinner'>
<div class='circle'></div>
<div class='circle'></div>
<div class='circle'></div>
<div class='contentbox'>
<kepala><span id='textlogo'><data:blog.title/></span>
<a class='popup-close' href='#closed' title='Close'>×</a>
</kepala>
<br/>
<div class='scrollbarbox'>
<div class='innerone'>
<div id='aboutus'>
<img expr:alt='data:blog.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgInOOwu2nsfnbYzWO02rCtVpU-_0j1iRmv317ESMDb_sl7QuVY066hNjglyorrunMIw-kENiKnZXixksyKQ_rEKqjT0BaiZQlpyOSMrt1JJhQig7hai07WYW3CZ7twy3UDst9-rvgLQ9Ns/s1600/Askwithloud.com.jpg' expr:title='data:blog.title'/><br/>
<script src='/feeds/posts/default?alt=json-in-script&amp;callback=getposts'></script><br/><br/>
<b>Askwithloud.com</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 href='/' rel='nofollow' target='_blank' expr:title='data:blog.title'><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 Posts
function 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='askwithloud'><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 @Prince.

Share this

Tweet

Share

Share

Share

Share

RELATED ARTICLES