How To Add Responsive POP UP About Me Widget In Blogger

0
How To Add Responsive POP UP About us author info about me Widget In Blogger template
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 */
.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%}}
Step 7. Now Search for the opening <body> tag and copy the below code snippet and paste just after/below <body> tag.
<div class='popup-wrapper' id='popup'>
<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&amp;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>
Customization: 
  • 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.
Step 8. Now search for </head> tag and copy the below java script and paste it before/above the </head> tag.
<script type='text/javascript'>
//<![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>
Step 9. Now To add popup widget in your navigation menu just add the following HTML code into your menu nav.
<li class='bloggersstandinfo'><a class='popup-link' href='#popup'>About Us</a></li> 
Step 10. Now Save your template..Done ! 
Learn trick to install add create author info box,bio about me popup box widget plugin for blogger template,Tutorial for creating installing adding best unique beautiful popup widget about me box gadget in blogspot website.
Are you using any About us Widget in your blogger template ? Any Info Plugin which display inf...
SUMMARY

Learn trick to install add create author info box,bio about me popup box widget plugin for blogger template,Tutorial for creating installing adding best unique beautiful popup widget about me box gadget in blogspot website.

You Might Also Like:

We hope this article helped you to learn How To Add Responsive POP UP About Me Widget In Blogger. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "How To Add Responsive POP UP About Me Widget In Blogger" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand