Are you lot using whatsoever About us Widget inwards your blogger template? Any Info Plugin which display data close your website or you lot inwards a unique agency ? If non in addition to thence don't worry today nosotros are going to explicate How to Add Popup About us Widget Plugin for blogger template.In Popup information box gadget you lot tin dismiss Share close yourself (Author/Admin/Team) in addition to also add together your social media profiles.Popup information/Intro widget comes alongside v social media networks i.e Pinterest,Google Plus, Facebook , Twitter, Tumblr etc. in addition to i blogger website follow/Join our website tab also included.you tin dismiss also add together novel social media profiles also past times customizing it.
However popup close me box widget is really unique inwards it's ain agency it also heighten the spider web log or website niche.You tin dismiss add together widget inwards overstep navigation tab in addition to nosotros recommend overstep nav place.This close me box volition display equally a navigation special on your card similar it volition demonstrate Whatever you lot desire to laid the scream of this popup box similar Info/About Us/About Team Anything in addition to when you lot click on the push widget volition popup infront of the readers in addition to they tin dismiss read close you lot in addition to if they desire they tin dismiss also bring together you lot on your social media profiles fan page.In the correct side nosotros accept provided cross push to unopen the popup box thence simply elementary click on the push in addition to box volition close.Popup close us widget is totally responsive in addition to industrial plant perfectly alongside whatsoever shroud size.So to see 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 inwards to your Blogger account in addition to Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. First Search for <head> past times Pressing Ctrl+F keys.
Step 4.Copy the below Font Awesome Icons stylesheet in addition to glue it simply below the <head> tag.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>If you lot are already using Fontawesome Stylesheet CSS in addition to thence skip the inwards a higher house 2 steps.
Step 5. Now Search for ]]></b:skin> or </style> past times Pressing Ctrl+F keys.
Step 6. Copy the below CSS code in addition to paste it simply earlier the ]]></b:skin> or </style> tag.
/* Author About Us past times www..Com */Step 7. Now Search for the opening <body> tag in addition to re-create the below code snippet in addition to glue simply 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 automobile 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 / close website supervene upon the inwards a higher house highlighted text inwards red color.
- Replace Bloggersstand.Com | Empowering Bloggers for your championship of popup close me box.
- Replace highlighted light-green color alongside your ikon url.
- Change Bloggersstand alongside your username.
- Change Blog id alongside your Blog id.
- Replace Bloggersstand.com for Post count alongside your spider web log or website url.
<script type='text/javascript'>Step 9. Now To add together popup widget inwards your navigation card simply add together the next HTML code into your card nav.
//<![CDATA[
// Total Posts fob past times www.bloggersstand.com
business office 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 !
No comments:
Post a Comment