Are you using any About us Widget in your blogger template? Any Info Plugin which display information about your website or you in a unique way ? If not then don't worry today we are going to explain How to Add Popup About us Widget Plugin for blogger template.In Popup info box gadget you can Share about yourself (Author/Admin/Team) and also add your social media profiles.Popup information/Intro widget comes with five social media networks i.e Pinterest,Google Plus, Facebook , Twitter, Tumblr etc. and one blogger website follow/Join our website tab also included.you can also add new social media profiles too by customizing it.
However popup about me box widget is very unique in it's own way it also enhance the blog or website niche.You can add widget in top navigation tab and we recommend top nav place.This about me box will display as a navigation item on your menu like it will show Whatever you want to set the name of this popup box like Info/About Us/About Team Anything and when you click on the button widget will popup infront of the readers and they can read about you and if they want they can also join you on your social media profiles fan page.In the right side we have provided cross button to close the popup box so just simple click on the button and box will close.Popup about us widget is totally responsive and works perfectly with any screen size.So to grab responsive popup box follow the steps mentioned below.For The Demo Check Our About us Page.
How To Create Responsive Popup About Us Widget In Blogger Template
Installation Steps:
Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. First Search for <head> by Pressing Ctrl+F keys.
Step 4.Copy the below Font Awesome Icons stylesheet and paste it just below the <head> tag.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>If you are already using Fontawesome Stylesheet CSS then skip the above 2 steps.
Step 5. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.
Step 6. Copy the below CSS code and paste it just before the ]]></b:skin> or </style> tag.
/* Author About Us by www.BloggersStand.Com */Step 7. Now Search for the opening <body> tag and copy the below code snippet and paste just after/below <body> tag.
.bsdboxinner{z-index:99;width:100%;height:575px;position:absolute;left:50%;margin-left:-310px;top:70px}
.contentboxbsd{position:absolute;background-color:#fff;top:30px;right:0;left:0;bottom:0;box-shadow:0 1px 5px rgba(0,0,0,.1)}
topstyle{background:#ff675c;height:70px;width:100%;position:inherit}
#logotext{background-color:#666;color:#fff;line-height:70px;text-align:center;font-size:150%;position:inherit;width:68.5%;box-sizing:initial}
#left{background:#fff;color:#666;top:70px;bottom:0;right:0;padding:20px 0 0 0;width:200px;position:inherit}
#left a{color:#888;transition:initial;}#left a:hover{color:#fff;}
#left i {margin:0 10px 0 0}
.tabelbsd1,.tabelbsd2,.tabelbsd3,.tabelbsd4,.tabelbsd5,.tabelbsd6,.tabelbsd7{cursor:pointer;padding:15px;color:#888;}
.tabelbsd1:hover{background:#cb2027;color:#fff}.tabelbsd2:hover{background:#e74c3c;color:#fff}.tabelbsd3:hover{background:#2980b9;color:#fff}.tabelbsd4:hover{background:#27C9E9;color:#fff}.tabelbsd5:hover{background:#3ca9d0;color:#fff}
.tabelbsd6:hover{background:#32506d;color:#fff}.tabelbsd7:hover{background:#f39c12;color:#fff}
#left .tabelbsd1:hover a,#left .tabelbsd2:hover a,#left .tabelbsd3:hover a,#left .tabelbsd4:hover a,#left .tabelbsd5:hover a,#left .tabelbsd6:hover a,#left .tabelbsd7:hover a{color:#fff}
#aboutbsd{background:#fafafa;width:62.2%;padding:20px 20px 40px 20px;color:#444;text-align:left;position:inherit;float:left;line-height:normal}
#aboutbsd 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)}
.scrollbarboxbsd{overflow:hidden;text-align:justify;margin:55px 0 0 0}
.scrollbarboxbsd .innerbox{height:480px;overflow:auto}
#popup{display:none;opacity:0;visibility:hidden;transform:scale(1.1);-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;z-index:1003;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s,visibility .3s}
#popup:target{display:block;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999;opacity:1;visibility:visible;margin:auto;transform:scale(1.0);}
.popup-container{position:relative;margin:0 auto;padding:20px}
a.popup-close{position:absolute;border-radius:50px;right:20px;line-height:50px;margin:0 auto;font-size:16px;text-decoration:none;color:rgba(0,0,0,0.2);font-family:fontawesome}
a.popup-close:hover{color:rgba(0,0,0,0.6);}
.totalposts{margin:auto;display:table;text-align:center}
.totalposts .totalnumber{display:inline;font-weight:700;font-size:300%;color:#aaa}
.totalposts .totallabel{display:block;color:#aaa;font-weight:700}
li.bloggersstandinfo{border:0;}
li.bloggersstandinfo a{background:#000;color:#fff;display:block;font-size:90%;font-weight:700;transition:background-color .3s}
li.bloggersstandinfo a:hover{background:#000;color:#ff4400;}
@media (min-width:768px){.popup-container{width:600px}}
@media (max-width:767px){.popup-container{width:100%}}
<div class='popup-wrapper' id='popup'>Customization:
<div class='popup-container'>
<div class='bsdboxinner'>
<div class='contentboxbsd'>
<topstyle><span id='logotext'>Bloggersstand.Com | Empowering Bloggers</span>
<a class='popup-close' href='#closed' title='Close'><i class='fa fa-times'></i></a>
</topstyle>
<br/>
<div class='scrollbarboxbsd'>
<div class='innerbox'>
<div id='aboutbsd'>
<img alt='Shekhar Singh' height='140' src='http://lh5.googleusercontent.com/-jjffSYMrIe0/AAAAAAAAAAI/AAAAAAAACaE/nOLbYgELjwE/s80-c/photo.jpg' title='Bloggersstand' width='140'/><br/>
<script src='http://www.bloggersstand.com/feeds/posts/default?alt=json-in-script&callback=getposts'/></script>
About us / About Author / About Team / About Me / Information </div></div></div>
<div id='left'>
<div class='tabelbsd1'><a href='https://www.pinterest.com/bloggersstand' target='_blank' title='Follow Us On Pinterest'><i class='fa fa-pinterest fa-fw'></i> Pinterest</a></div>
<div class='tabelbsd2'><a href='https://plus.google.com/115587840274121878323' rel='nofollow' target='_blank' title='Follow Us On Google Plus'><i class='fa fa-google-plus fa-fw'></i> Google Plus</a></div>
<div class='tabelbsd3'><a href='https://www.facebook.com/bloggersstand' rel='nofollow' target='_blank' title='Follow Us On Facebook'><i class='fa fa-facebook fa-fw'></i> Facebook</a></div>
<div class='tabelbsd4'><a href='https://twitter.com/bloggersstand' rel='nofollow' target='_blank' title='Follow Us On Twitter'><i class='fa fa-twitter fa-fw'></i> Twitter</a>
</div>
<div class='tabelbsd6'><a href='http://bloggersstand.tumblr.com' rel='nofollow' target='_blank' title='Follow Us On Tumblr'><i class='fa fa-tumblr fa-fw'></i> Tumblr</a></div>
<div class='tabelbsd7'><a href='https://www.blogger.com/follow-blog.g?blogID=8771880403313863692' rel='nofollow' target='_blank' title='Join Us'><i class='fa fa-users fa-fw'></i>Join Our Website</a></div>
</div></div></div></div></div>
- To Write Description about me / about website replace the above highlighted text in red color.
- Replace Bloggersstand.Com | Empowering Bloggers for your title of popup about me box.
- Replace highlighted green color with your image url.
- Change Bloggersstand with your username.
- Change Blog id with your Blog id.
- Replace Bloggersstand.com for Post count with your blog or website url.
<script type='text/javascript'>Step 9. Now To add popup widget in your navigation menu just add the following HTML code into your menu nav.
//<![CDATA[
// Total Posts trick by www.bloggersstand.com
function getposts(json){var totalposts=json.feed.openSearch$totalResults.$t;document.write('<div class="totalposts"><span class="totalnumber">'+totalposts+'</span><span class="totallabel">Published Article</span></div>');}
//]]>
</script>
<li class='bloggersstandinfo'><a class='popup-link' href='#popup'>About Us</a></li>Step 10. Now Save your template..Done !