"About Me" Author Box Widget With Different Styles For Blogger

Author widget blogger
"About Me" Author Box Widget With Different Styles For Blogger

"About-me" widget in blogger shows the author or profile pic, name and description about social bookmarks. There are several social bookmarks button you can use according to your wish. You only have to follow few steps and it is very easy to install it below each post.

Step 1: Go to blogger dashboard > Layout > add a gadget > Html/javascript (At your desired place)
Step 2: Copy the code given below and paste it into Html/javascript window.


STYLE 1
author widget blogger 1
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<div class="box">
   <div class="ribbon"><span>Admin</span></div>
<div id="about-me"> 
  <img src="https://2.bp.blogspot.com/-yR6RYS9L8io/XIOF0iJ7sxI/AAAAAAAAD8E/kvFnK4nr3qAx8v_-5KDyVyHzhHrUzEnAwCLcBGAs/s1600/asim.jpg" /><p>Asim</p><p></p><h5>I'm a blogger and a content writer too. You can follow me on the social media profiles. My Blog is LearnSEO.pro</h5>
<p></p><p></p>
</div>
<div id="my-link">
<a href="https://www.facebook.com/howtolearnseo/" target="_blank"><img src="https://2.bp.blogspot.com/-ICHQCne0ycc/XIOFJ6syNNI/AAAAAAAAD7o/8iXkLpRfZBkcEPZhcfYvDXRVRqvPGO77QCLcBGAs/s1600/fb.png" title="Facebook" width="22px" /></a>
<a href="https://twitter.com/learnsmo" target="_blank"><img alt="Twitter" src="https://1.bp.blogspot.com/-UsBn4bx9zn0/XIOFV7HXJNI/AAAAAAAAD7s/PO_ciNs1uY0Xr1KqC_1njzmBb4H9QphMgCLcBGAs/s1600/twitter.png" title="Twitter" /></a>
<a href="https://www.linkedin.com/in/iamasim/" target="_blank"><img alt="linkedin" src="https://3.bp.blogspot.com/-7OvqrEH6MZ4/XIOFWaK6k0I/AAAAAAAAD70/96m4t7geyisM6K9QPqq6IuqZu77oRmlkQCLcBGAs/s1600/linkedin.png" title="Linkedin" /></a>
<a href="https://www.pinterest.com/" target="_blank"><img alt="Pinterest" height="22px" src="https://4.bp.blogspot.com/-_Aq6CzXBJ6k/XIOFWAX61iI/AAAAAAAAD7w/FUdk-fYE0L0HwHWxeqJPEKZcZYrPtmr-QCLcBGAs/s1600/pinterest.png" title="Pinterest" width="22px" /></a></div></div>
<style>
#about-me{
  color:#444;
    width: 300px;
    padding: 20px 10px 110px;
    border: 2px solid #555;
  background-color:#eee;
 font-family: 'Open Sans Condensed',sans-serif;
}
#about-me img {
  border: 2px solid #666;
  width: 100px;
  height: 100px;
  position: absolute;
  bottom: 16px;
  border-radius: 2px;
  left: 8px;
}
#about-me p{
position:absolute;
bottom:84px;
  font-size:17px;
font-weight:bold;
  left:119px;
color: rgb(58, 148, 227);
}
#about-me h5{
  width:200px;
  position:absolute;
  left:119px;
  top:9px;
  color:#555;
font-size:14px;
}
#my-link {
position:absolute;
top: 94px;
  left: 119px;
}
.ribbon {
  position: absolute;
  left: -3px; top: -3px;
  z-index: 5;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#359BED 0%, #5467A7 100%);
  box shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #5467A7;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #5467A7;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #5467A7;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #5467A7;
}
</style>

STYLE 2
author widget blogger 2
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<div id="about-me"> 
  <img src="https://2.bp.blogspot.com/-yR6RYS9L8io/XIOF0iJ7sxI/AAAAAAAAD8E/kvFnK4nr3qAx8v_-5KDyVyHzhHrUzEnAwCLcBGAs/s1600/asim.jpg" /><p>Asim</p><p></p><h5>I'm a blogger and a content writer too. You can follow me on the social media profiles. My Blog is LearnSEO.pro</h5>
<p></p><p></p>
</div>
<div id="my-link">
<a href="https://www.facebook.com/howtolearnseo/" target="_blank"><img src="https://2.bp.blogspot.com/-ICHQCne0ycc/XIOFJ6syNNI/AAAAAAAAD7o/8iXkLpRfZBkcEPZhcfYvDXRVRqvPGO77QCLcBGAs/s1600/fb.png" title="Facebook" width="22px" /></a>
<a href="https://twitter.com/learnsmo" target="_blank"><img alt="Twitter" src="https://1.bp.blogspot.com/-UsBn4bx9zn0/XIOFV7HXJNI/AAAAAAAAD7s/PO_ciNs1uY0Xr1KqC_1njzmBb4H9QphMgCLcBGAs/s1600/twitter.png" title="Twitter" /></a>
<a href="https://www.linkedin.com/in/iamasim/" target="_blank"><img alt="linkedin" src="https://3.bp.blogspot.com/-7OvqrEH6MZ4/XIOFWaK6k0I/AAAAAAAAD70/96m4t7geyisM6K9QPqq6IuqZu77oRmlkQCLcBGAs/s1600/linkedin.png" title="linkedin" /></a>
<a href="https://www.pinterest.com/" target="_blank"><img alt="Pinterest" height="22px" src="https://4.bp.blogspot.com/-_Aq6CzXBJ6k/XIOFWAX61iI/AAAAAAAAD7w/FUdk-fYE0L0HwHWxeqJPEKZcZYrPtmr-QCLcBGAs/s1600/pinterest.png" title="Pinterest" width="22px" /></a></div>
<style>
#about-me {
  color: #444;
  width: 314px;
  padding: 40px 22px 114px;
  border: 2px solid #A0A0A0;
  background-color: #fafafa;
  font-family: 'Open Sans Condensed',sans-serif;
}
#about-me img {
  border: 6px double #A0A0A0;
  width: 100px;
  height: 100px;
  position: absolute;
  bottom: 23px;
  border-radius: 12px;
  left: 18px;
  -ms-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);
  transform: rotate(-17deg);
  z-index: 5;
}
#about-me p {
  position: absolute;
  bottom: 102px;
  font-size: 18px;
  font-weight: bold;
  left: 1
6px;
  color: rgb(58, 148, 227);
}
#about-me h5 {
  width: 185px;
  position: absolute;
  left: 146px;
  top: 15px;
  color: #747272;
  font-size: 15px;
  letter-spacing: 0.2px;
  text-align: left;
}
#my-link {
  position: absolute;
  top: 20px;
  left: 332px;
}
#my-link img{
border-radius:70px;
padding:2px;
}
</style>
STYLE 3
author widget blogger 3
 <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<div id="about-me"> 
  <img src="https://2.bp.blogspot.com/-yR6RYS9L8io/XIOF0iJ7sxI/AAAAAAAAD8E/kvFnK4nr3qAx8v_-5KDyVyHzhHrUzEnAwCLcBGAs/s1600/asim.jpg" /><p>Asim</p><h5>I'm a blogger and a content writer too. You can follow me on the social media profiles. My Blog is LearnSEO.pro</h5>
</div>
<div id="my-link">
<a href="https://www.facebook.com/howtolearnseo/" target="_blank"><img src="https://2.bp.blogspot.com/-ICHQCne0ycc/XIOFJ6syNNI/AAAAAAAAD7o/8iXkLpRfZBkcEPZhcfYvDXRVRqvPGO77QCLcBGAs/s1600/fb.png" title="Facebook" width="22px" /></a>
<a href="https://twitter.com/learnsmo" target="_blank"><img alt="Twitter" src="https://1.bp.blogspot.com/-UsBn4bx9zn0/XIOFV7HXJNI/AAAAAAAAD7s/PO_ciNs1uY0Xr1KqC_1njzmBb4H9QphMgCLcBGAs/s1600/twitter.png" title="Twitter" /></a>
<a href="https://www.linkedin.com/in/iamasim/" target="_blank"><img alt="linkedin" src="https://3.bp.blogspot.com/-7OvqrEH6MZ4/XIOFWaK6k0I/AAAAAAAAD70/96m4t7geyisM6K9QPqq6IuqZu77oRmlkQCLcBGAs/s1600/linkedin.png" title="linkedin" /></a>
<a href="https://www.pinterest.com/" target="_blank"><img alt="Pinterest" height="22px" src="https://4.bp.blogspot.com/-_Aq6CzXBJ6k/XIOFWAX61iI/AAAAAAAAD7w/FUdk-fYE0L0HwHWxeqJPEKZcZYrPtmr-QCLcBGAs/s1600/pinterest.png" title="Pinterest" width="22px" /></a></div>
<style>
#about-me {
  color: #444;
  width: 225px;
  padding: 20px 10px 110px;
  border: 2px solid #B0AEAE;
background: -webkit-linear-gradient(#eee, white);
  font-family: 'Open Sans Condensed',sans-serif;
  height: 175px;
}
#about-me img {
  border: 2px solid #666;
  width: 110px;
  height: 110px;
  position: absolute;
  bottom: 184px;
  border-radius: 60px;
  left: 65px;
}
#about-me p {
  position: absolute;
  bottom: 135px;
  font-size: 19px;
  font-weight: bold;
  left: 91px;
  color: rgb(58, 148, 227);
}
#about-me h5 { letter-spacing: 0.3px; width: 200px; position: absolute; left: 30px; top: 140px; color: #555; font-size: 14px; text-align: center; }
#my-link {
  position: absolute;
  top: 260px;
  left: 79px;
}
</style>
Style 4
author widget blogger 4
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<div id="about-me"> 
  <img src="https://2.bp.blogspot.com/-yR6RYS9L8io/XIOF0iJ7sxI/AAAAAAAAD8E/kvFnK4nr3qAx8v_-5KDyVyHzhHrUzEnAwCLcBGAs/s1600/asim.jpg" /><h5>I'm a blogger and a content writer too. You can follow me on the social media profiles. My Blog is LearnSEO.pro<br /><br />Email: admin@learnseo.pro<br />Phone: xxxx-xxx-xxx<br />Skype ID: asimmirza.com</h5>
<h4>Author Name:</h4><p>Asim</p>
</div>
<div id="my-link"><p>Follow On</p>
<a href="https://www.facebook.com/howtolearnseo/" target="_blank"><img src="https://2.bp.blogspot.com/-ICHQCne0ycc/XIOFJ6syNNI/AAAAAAAAD7o/8iXkLpRfZBkcEPZhcfYvDXRVRqvPGO77QCLcBGAs/s1600/fb.png" title="Facebook" width="35px" height="35px" /></a>
<a href="https://twitter.com/learnsmo" target="_blank"><img alt="Twitter" src="https://1.bp.blogspot.com/-UsBn4bx9zn0/XIOFV7HXJNI/AAAAAAAAD7s/PO_ciNs1uY0Xr1KqC_1njzmBb4H9QphMgCLcBGAs/s1600/twitter.png" title="Twitter" width="35px" height="35px" /></a>
<a href="https://www.linkedin.com/in/iamasim/" target="_blank"><img alt="linkedin" src="https://3.bp.blogspot.com/-7OvqrEH6MZ4/XIOFWaK6k0I/AAAAAAAAD70/96m4t7geyisM6K9QPqq6IuqZu77oRmlkQCLcBGAs/s1600/linkedin.png" title="linkedin" width="35px" height="35px" /></a>
<a href="https://www.pinterest.com/" target="_blank"><img alt="Pinterest"  src="https://4.bp.blogspot.com/-_Aq6CzXBJ6k/XIOFWAX61iI/AAAAAAAAD7w/FUdk-fYE0L0HwHWxeqJPEKZcZYrPtmr-QCLcBGAs/s1600/pinterest.png" title="Pinterest"  width="35px" height="35px" /></a></div>
<style>
#about-me {
  color: #444;
  width: 275px;
  border: 2px solid #A0A0A0;
  background-color: #fafafa;
  font-family: 'Open Sans Condensed',sans-serif;
  height: 310px;
}
#about-me img {
  border: 2px solid #A0A0A0;
  width: 80px;
  height: 80px;
  position: absolute;
  top: 15px;
  border-radius: 4px;
  left: 186px;
}
#about-me p {
  position: absolute;
  top: -2px;
  font-size: 18px;
  font-weight: bold;
  left: 99px;
  color: rgb(58, 148, 227);
  letter-spacing: .4px;
}
#about-me h5 {
    border-top: 3px double #999;
    width: 165px;
    position: absolute;
    left: 13px;
    padding-top: 5px;
    top: 16px;
    color: #747272;
    font-size: 15px;
    letter-spacing: 0.2px;
    text-align: left;
}
#about-me h4 {
    font-size: 18px;
    position: absolute;
    top: 15px;
    left: 8px;
    border: 0;
    color: #555;
}
#my-link {
  position: absolute;
  top: 268px;
  left: 10px;
}
#my-link p {
position: absolute;
  bottom: 29px;
  color: #444;
  font-size: 16px;
  font-weight: bold;
  left: 3px;
}
#my-link img{
border-radius:5px;
padding:2px;
}
</style>

Customization According to you:

To Change Profile Pic:
Replace https://2.bp.blogspot.com/-yR6RYS9L8io/XIOF0iJ7sxI/AAAAAAAAD8E/kvFnK4nr3qAx8v_-5KDyVyHzhHrUzEnAwCLcBGAs/s1600/asim.jpg with your profile pic url. And size should be 80x80 for better view.

To Change name:
Replace Asim with your name. Maximum characters of name - 12.

To Change description:
Replace green colored text with your own description, should not be very lengthy.

To add your social profiles links:
Replace the yellow colored social profile links with your own.  

Hope this widget will work perfectly on your blogger. If not, kindly connect with us. We will solve it as earliest as we can do.
Thanks 

Blogger is a blogging platform used by many webmasters. Here is the About me Author widget and plugin with different styles for blogger.com

Labels:
Reactions:

Post a Comment

[blogger][facebook]

Asim

{facebook#YOUR_SOCIAL_PROFILE_URL} {twitter#YOUR_SOCIAL_PROFILE_URL} {google-plus#YOUR_SOCIAL_PROFILE_URL} {pinterest#YOUR_SOCIAL_PROFILE_URL} {youtube#YOUR_SOCIAL_PROFILE_URL} {instagram#YOUR_SOCIAL_PROFILE_URL}

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget