“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
<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
<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
<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
<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 80×80 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
