Jul 16, 2016

AllInOne Admin/Author Box with Social Buttons & Subscription Box

data:blog.title
Now a days everyone want some special and unique widgets for their blogs. There are a lots of widgets for wordpress but not for blogger platform and for blogger users and our team always curious to provide some awesome and pro looking widgets. So today, Once again we are here with a special and unique widget for your blogger blog. Below we are going to attach a demo screenshot and also a live demo link. If you want to see a live demo then click on demo link.

AllinOne, Admi Bio Box Widget for Blogger with Social Media Buttons and Subscription Box


Live Demo


Hope you like the widget and want to add it on your blogger sidebar or to the below of your every post. But, before add it you must have to know features of this Blogger Widget. Now, We are going to share some features of this widget.

Features

  1. Professional Look
  2. Use of Font Awesome Icons.
  3. Lobster Fonts.
  4. 100% Responsivity
  5. Fully Customized with CSS & HTML Language.
  6. Final, This is All In One Widget because its include Admin Bio, Subscription box & Social Media Following Section too.
Hope, now you want to add it on your blogger blog and also you like above all features which we have used in this AllInOne Bloger Widget. Now if you want to add it on blogger then read and follow below steps one by one carefully.

How To Add This Widget on Blogger?


Note : Before doing any customization download a backup copy of your Blogger Template.
  • Go To Blogger >> Template >> Edit HTML.
  • Now paste below code just below of <head> section.

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css' rel='stylesheet'/>
<link href='https://fonts.googleapis.com/css?family=Oswald|Lobster:400' rel='stylesheet' type='text/css'/>

  • Now search for ]]</b:skin> tag and paste below code just above of this tag.

 #mbg-allinone{margin-top:-65px; }
#mbg-allinone1{ }
div#mbg-allinone .wrap-me {
margin-bottom:-44px;
display: block;
border-radius:5px;
box-shadow: 2px 4px 2px 2px #444444;
border-top: 65px solid #111;
background: #0000ff url('' )no-repeat 0px 0px;
padding: 10px 5px 10px 5px;
clear: both;
text-align: center;
display: block;
height: auto;
bottom:-42px;
}
#mbg-allinone:before{
content: "  \f007  ";
border-radius:5px 5px 0px 5px;
background: #111;
color:#9ff9ef;
font-family: Lobster, FontAwesome;
padding: 17px 10px 19px 10px;
position: relative;
top:65px;
float:left;
left:-115px;
z-index:3;
}
div#mbg-allinone1:before {
content: "About Admin  ";
border-radius: 5px 5px 5px 5px;
background: #ff4c00;
color:#111;
font-family: Lobster, FontAwesome;
padding: 17px 10px 18px 10px;
position: relative;
overflow: hidden;
bottom:-65px;
float:left;
left:35px
}
.mbg-allinone-about-pic{
margin:2px 120px 0px 0px; padding:2px;
border-radius: 50px;
border:4px solid #00f0ff;
cursor:pointer;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-o-border-radius: 50px;
}
#mbg-allinone-aboutpic-opacity {opacity: 0.8;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
margin-right:5px;
}
#mbg-allinone-aboutpic-opacity:hover{
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(-360deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}
.mbg-allinone-Text {
text-shadow: 2px 2px 2px #444343;
text-align: center;
color: #9ff9ef;
font-size: 20px;
font-family: Lobster, FontAwesome;
line-height: 1.5em;
margin-top: 7px;
margin-bottom: 4px;
}
.mbg-allinone-link-contact { background:#111;
color:#FF0000;
padding: 7px 5px 7px 5px;
border-radius:5px;
font-family: Lobster, FontAwesome;
}
.mbg-allinone-Emailform{
border-top:40px solid #111;
border-radius:5px;}
.mbg-allinone-Emailform:before {
content: "\f14c  ";
border-radius: 5px 5px 5px 5px;
background:#111;
color:#FF0000;
font-family: Lobster, FontAwesome;
padding: 5px 5px 5px 10px;
position: relative;
overflow: hidden;
bottom: 39px;
float:left;
right:-7px;
transition: .5s;
}
.mbg-allinone-Emailform:after {
content: "   Subscribe Us   ";
float:left;
border-radius: 5px 5px 5px 5px;
border:5px solid #ff4c00;
background: #ff4c00;
color:#111;
font-family: Lobster, FontAwesome;
padding: px 5px 5px 5px;
position: relative;
overflow: hidden;
bottom: 130px;
left: 37px;
transition: .5s;
}
.mbg-allinone-Enter-Email {
color: #444242;
float:auto;
width: 180px;
height: 40px;
background: #fff url(https://lh4.googleusercontent.com/-dPJx9mWYWPw/UtV5aN-6mRI/AAAAAAAAAJs/ibo7iZsN4nw/h120/MAIL.png) no-repeat 15px 12px;
padding: 5px 0px 5px 38px;
border-radius: 10px;
border: 1px solid #000;
margin-top:-10px;
margin-bottom:-10px;
}
.mbg-allinone-Button {
width:120px;
float:center;
background: #ff4c00;
font-family: Lobster, FontAwesome;
cursor: pointer;
color: #111;
font-weight: bold;
text-shadow: 2px 2px 2px #444343;
border: 2px solid #111;
border-radius: 50px;
font-size: 20px;
padding: 3px 19px 3px 19px;
margin-right:70px;
margin-top:-1px;
}
.mbg-allinone-Button:hover {
background: #111;
border: 2px solid #ff4c00;
color:#ff4c00;
border-radius:50px;
}
#mbg-allinone .social_profiles {
line-height: 1.2em;
display: table;
float: auto;
margin: 0px auto;
text-align: center;
min-width: 140px;
padding: 5px 5px 5px 5px;
border-top:40px solid #111;
border-radius:5px;
}
#mbg-allinone .social_profiles:before {
content: "\f14c  ";
border-radius: 5px 5px 5px 5px;
background: #111;
color:#FF0000;
font-family: Lobster, FontAwesome;
padding: 5px 5px 5px 10px;
position: relative;
overflow: hidden;
bottom: 37px;
right: 180px;
transition: .5s;
}
#mbg-allinone .social_profiles:after {
content: "   Follow Us   ";
border-radius: 5px 5px 5px 5px;
border:5px solid #ff4c00;
background: #ff4c00;
color:#111;
font-family: Lobster, FontAwesome;
padding: px 5px 5px 5px;
position: relative;
overflow: hidden;
bottom: 36.5px;
left: -180px;
transition: .5s;
}
#mbg-allinone .social_profiles a:hover {
color: #00f0ff;
background-color: #ff4c00;
border-color: #00f0ff;
-moz-transform: rotate(190deg);
-o-transform: rotate(160deg);
-webkit-transform: rotate(160deg);
-ms-transform: rotate(160deg);
transform: rotate(-360deg);
}
#mbg-allinone .social_profiles a {
color: #ff4c00;
margin: 0 5px;
text-align: center;
float: left;
display: table;
padding: 4px 5px;
background-color: #111;
border-radius: 50px;
border: 2px solid #ff4c00;
width: 20px;
height: 20px;
line-height: 0;
font-size: 20px;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.mbg-allinone-Credit {
float:right;
background:#111;
color: #fff;
font-size: 10px;
padding:5px 5px 5px 5px;
border-radius:5px;
font-family: Lobster, FontAwesome;
margin-right: 15px;
margin-top:-2px;
}
@media screen and (max-width: 420px){
  #mbg-allinone .social_profiles {
min-width: 170px;
}
#mbg-allinone .social_profiles:before {
bottom: 38px;
right: 192px;
}
#mbg-allinone .social_profiles:after {
content: "Follow";
bottom:60px;
left: -150px;
}
.mbg-allinone-Emailform:before {
bottom: 39px;
float:left;
right:-2px;
}
.mbg-allinone-Emailform:after {
content: "   Subscribe Us   ";
float:left;
bottom: 160px;
}
.mbg-allinone-Enter-Email {
width: 160px;
height: 30px;
margin-left:-30px;
}
.mbg-allinone-Button {
margin-left:60px;}
.mbg-allinone-Credit{margin-right:2px;}
}

Note : As we have mentioned above you can use this AllInOne Admin Box Widget on Blogger Sidebar & Post's footer too. So, now we are going to share guide about adding it on blogger sidebar. If you want to add it on Each Blogger Post's Footer then read below after this step.

How To Add it On Blogger Sidebar?

  • Go To Blogger >> Layout >> Add A Gadget.
  • Now Select HTML/JavaScript from Popup window and paste below code in it.
Note : Before Pasting Change All Yellow Highlighted Colors into your's.
 <div id="mbg-allinone"><div class="wrap-me">
<img align='left' class='mbg-allinone-about-pic' height='100px' id='mbg-allinone-aboutpic-opacity' src='http://2.gravatar.com/avatar/36385217f6c2ea9f4d3751db14bf8c3d?s=320' width='100px'/><div id='about'></div>
<div class="mbg-allinone-Text">I&#39;m Paramjot singh, a young addicted Blogger  &amp; Author at My Blogger Guides Blog. I&#39;m from Lucknow, Uttar Pradesh, India. I&#39;ve good knowledge of CSS &amp; HTML. I always love to share my Blogger resources and will continue to add my two cents that might be helpful in your Blogging journey. Have any query <a class="mbg-allinone-link-contact" href="http://contact.mybloggerguides.com/" target="_blank"> <i class="fa fa-external-link"> Ask</i></a></div>
<br/>
<form action="http://feedburner.google.com/fb/a/mailverify" class="mbg-allinone-Emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MyBloggerGuides', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" value="MyBloggerGuides" type="hidden" /> <input name="loc" value="en_US" type="hidden" /><br/> <input class="mbg-allinone-Enter-Email" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" required="" value="Enter your email..." type="text"/><br/><br/>
<input class="mbg-allinone-Button" title="Subscribe Us. We Promise, We'll never spam you!" value="Subscribe" type="submit"/></form>
<br/>
<div class="social_profiles">
   <a href="http://www.facebook.com/MyBloggerGuides" target='_blank' rel='nofollow' title="Join on Facebook"><i class="fa fa-facebook"></i></a>
   <a href="http://www.twitter.com/MyBloggerGuides" target='_blank' rel='nofollow' title="Follow on Twitter"><i class="fa fa-twitter"></i></a>
   <a href="http://plus.google.com/+MyBloggerGuides" target='_blank' rel='nofollow' title="Follow on Google+"><i class="fa fa-google-plus"></i></a>
   <a href="http://www.pinterst.com/MyBloggerGuides" target='_blank' rel='nofollow' title="Follow on Pinterest"><i class="fa fa-pinterest"></i></a>
   </div></div>
<div class="mbg-allinone-Credit"><a href="http://www.mybloggerguides.com/2016/07/allinone-admin-box-with-social-buttons-subscription-box.html"><i class="fa fa-download" aria-hidden="true"></i>
Get Widget</a>
</div>
<br/><br/>
</div></div>

  • Now Click On Save button.
  • Now open your blog and don't forget to give us feedback of this widget via using below comment box.

How To Add it On Blogger Post's Footer?

Note : Before following these steps follow all steps which are just above of How To Add it On Blogger Sidebar guide.
  •  Go To Blogger >> Template >> Edit HTML.
  • Search for <data:post.body/> by pressing CTRL+F.
  • Paste below code just Above/Below of <data:post.body/>
 <div id="mbg-allinone"><div class="wrap-me">
<img align='left' class='mbg-allinone-about-pic' height='100px' id='mbg-allinone-aboutpic-opacity' src='http://2.gravatar.com/avatar/36385217f6c2ea9f4d3751db14bf8c3d?s=320' width='100px'/><div id='about'></div>
<div class="mbg-allinone-Text">I&#39;m Paramjot singh, a young addicted Blogger  &amp; Author at My Blogger Guides Blog. I&#39;m from Lucknow, Uttar Pradesh, India. I&#39;ve good knowledge of CSS &amp; HTML. I always love to share my Blogger resources and will continue to add my two cents that might be helpful in your Blogging journey. Have any query <a class="mbg-allinone-link-contact" href="http://contact.mybloggerguides.com/" target="_blank"> <i class="fa fa-external-link"> Ask</i></a></div>
<br/>
<form action="http://feedburner.google.com/fb/a/mailverify" class="mbg-allinone-Emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MyBloggerGuides', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" value="MyBloggerGuides" type="hidden" /> <input name="loc" value="en_US" type="hidden" /><br/> <input class="mbg-allinone-Enter-Email" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" required="" value="Enter your email..." type="text"/><br/><br/>
<input class="mbg-allinone-Button" title="Subscribe Us. We Promise, We'll never spam you!" value="Subscribe" type="submit"/></form>
<br/>
<div class="social_profiles">
   <a href="http://www.facebook.com/MyBloggerGuides" target='_blank' rel='nofollow' title="Join on Facebook"><i class="fa fa-facebook"></i></a>
   <a href="http://www.twitter.com/MyBloggerGuides" target='_blank' rel='nofollow' title="Follow on Twitter"><i class="fa fa-twitter"></i></a>
   <a href="http://plus.google.com/+MyBloggerGuides" target='_blank' rel='nofollow' title="Follow on Google+"><i class="fa fa-google-plus"></i></a>
   <a href="http://www.pinterst.com/MyBloggerGuides" target='_blank' rel='nofollow' title="Follow on Pinterest"><i class="fa fa-pinterest"></i></a>
   </div></div>
<div class="mbg-allinone-Credit"><a href="http://www.mybloggerguides.com/2016/07/allinone-admin-box-with-social-buttons-subscription-box.html"><i class="fa fa-download" aria-hidden="true"></i>
Get Widget</a>
</div>
<br/><br/>
</div></div> 

Note : If you are using template which have read more function then you can find <data:post.body/> 2 to 4 times. You have to paste above code to second one's below or above of <data:post.body/> tag.
  • Change all Yellow Highlighted colors into your's.
  • Now, Save your template.
Important : Don't forget to Give us your feedback about this widget via dropping a comment below. 

Our Recommended Blogger Widgets

  1. WordPress Like Floating Social Sharing Widget for Blogger with Counter.
  2. AllInOne Admin Box Widget with Social buttons and Subscription Box.
  3. Add Sticky Notification Bar To Blogger with Show/Hide Button.
  4. Stylish Contact Form For Blogger! Add to Static Page, Responsive & Pro Version.
  5. Cute & Stylish Email Popup Subscription Widget.

Conclusion:

So above guide is about How To Add AllInOne Admin/Author with Social Media Buttons and Subscription Box to Blogger Sidebar or to Footer of Each Blogger Post? Hope you enjoy this widget. Don't forget to share this post on social media and give us your views via using comment box.

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.