5+ Stylish Author Profile/About Me Widget For Blogger

Wanna add author box in your blogger blog?

But don't know how to add it.

So, today we have come with 5+ stylish author bio widget for blogger. It is important to tell your visitors about who is managing this blog. So, this widget is considered as the most important widget for any blog.

You can write anything about you that you think your visitors should know about you. This increases your visitor's trust on you. As these widgets contain social media icons which help your visitors to connect with you easily. It increases your social media followers.

In WordPress, there are many plugins to add author bio but blogger lacks this facility. We can use widget designed using HTML and CSS in blogger.  Ohhh! Bored of introduction. Let's kick it and see whats next.

Features Of These Widgets

• Fully lightweight and fast loading

• Designed with pure CSS and HTML5.

• Easy Installation

• Fully Responsive

• Very stylish look

• Social Media icons ( Facebook, Google+, Twitter etc.) added

• Stylish Author Name And Bio

• Flat Design and attractive colors

• Awesome profile picture style

How To Add Author Box In Blogger

Just you have to follow the instructions given below each style and then add this widget easily in your blog. Now let's start.

Style 1. Responsive Author Box with Social Media Icons


Live Demo


Setting Up HTML.

• Go to your blogger dashboard and navigate to Layout.

• Click on add widget.

• Select HTML/JavaScript there.

• And paste the code given below in that box.

<div class='sidebar_about_author'>
<div class='inner_wrapper'>
<div class='sosmedarl-img'>
<img alt='Md+Alfaaz' class='img-responsive' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkYjEh7UIpr2-6HJn5k_4lQK2roR-MVny85gW3xvFl5bsYGwKr1OPn6mlVD298k91F6JgOr3LVxRoavR76pvPM88Emg74MWhsru9ykOsgmXorTUQ5Lhh23mOvgPXgLFwCANeMYNioACqk/s1600/Md-Alfaaz.jpg" title="Md+Alfaaz'/>
</div>
</div>
<div class='sosmedarl-info'>
  <h4><span>Md Alfaaz</span></h4>
<p>Hello Friends! I am Alfaaz a part time blogger from Bihar. I am a student and I manage my study as well as my blog. I am 14 years old and I want to help those people who really want to do something on internet.</p>
</div>
</div>

Customization:-

• Change the link highlighted in orange with your image url

• Change "Md Alfaaz" with your name.

• Change my description with your own.

Setting Up CSS

• From your blogger dashboard navigates to Template >> Edit HTML.

• And search (Use Ctrl + F for searching) for the ]]></b:skin> tag.

• Just above that code paste the code given below:

.sosmedarl-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}.sosmedarl-img{position:relative;max-height:200px;overflow:hidden}.sosmedarl-img img{max-width:100%;width:100%;transition:all .6s}.sosmedarl-img:hover img{transform:scale(1.2) rotate(-10deg)}.sosmedarl-img:before{content:'';background:rgba(0, 0, 0, 0.3);position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;transition:all .3s}.sosmedarl-img:hover:before{background:rgba(0, 0, 0, 0.6)}.aboutfloat-img{text-align:center}.sosmedarl-float{text-align:center;display:inline-block}.sosmedarl-float a{background:transparent;color:#3d85c6;padding:8px 14px;z-index:2;display:table-cell;font-size:90%;text-transform:uppercase;vertical-align:middle;border:2px solid #e30000;border-radius:3px;transition:all .3s}.sosmedarl-float:hover a{background:#e74c3c;color:#fff;border-color:transparent}.sosmedarl-float a i{font-weight:normal;margin:0 5px 0 0}.sosmedarl-wrpicon{display:block;margin:15px auto 0;position:relative}.sosmedarl-wrpicon .extender{width:100%;display:block}.extender{text-align:center;font-size:16px}.extender .sosmedarl-info{margin:10px 0;font-size:13px;text-align:center}.sosmedarl-info p{margin:5px 0}.sosmedarl-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#ff9900;font-weight:700}.sosmedarl-info h4 span{position:relative;display:inline-block;padding:0 10px;margin:0 auto}

• And then click on save the template.

Style 2. Author Box With Hover Effect

Live Demo

• Go to your blog layout

• Click on Add Gadget.

• Then select HTML/JavaScript.

• And paste the code given below:

<h2 class='title'>About The Author</h2>
<div class='widget-content'>
<!--[if !IE]> -->
<style>
#profilevinay{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;
}
#profilevinay:hover {
border:2px solid #ccc;
cursor:pointer;
}
.opacity  {
opacity: 0.5;
margin-left: 50px;
-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;
}
.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(0deg);
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;
}
</style>
   <![endif]-->
<style>
#profilevinay{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;
}
#profilevinay:hover {
border:2px solid #ccc;
cursor:pointer;
}
.opacity  {
opacity: 0.5;
-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;
zoom: 1;
}
.opacity:hover  {
opacity: 1;
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}
</style>
<img class="opacity" id="profilevinay" src="Image Link"  width="60px" height="60px" align="left"/>
Author Bio<a href="Your About Us Page Link">Continue Reading</a>  <br/> </![endif]-->
</div>

Customization:-

• Replace "Image Link" with your own image link.

• Replace "Author Bio" with description.

• Replace "About Us Page Link" with your blog's about us page link.

Style 3. Stylish Author Profile Widget

Live Demo

• From your blog layout click on add a gadget and then HTML/JavaScript.
• Paste the code given below:

<style> #profile{ border:2px solid #888; margin:2px 5px 0px 0px; padding:2px; } #profile:hover { border:2px solid #ccc; cursor:pointer; } .opacity { opacity: 0.5; margin-left: 50px; -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; } .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(0deg); 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; } </style> <style> #profile{ border:2px solid #888; margin:2px 5px 0px 0px; padding:2px; } #profile:hover { border:2px solid #ccc; cursor:pointer; } .opacity { opacity: 0.5; -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; zoom: 1; } .opacity:hover { opacity: 1; zoom: 1; -moz-box-shadow: 1px 1px 4px #000; -webkit-box-shadow: 1px 1px 4px #000; box-shadow: 1px 1px 4px #000; } </style> <img class="opacity" id="profile" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkYjEh7UIpr2-6HJn5k_4lQK2roR-MVny85gW3xvFl5bsYGwKr1OPn6mlVD298k91F6JgOr3LVxRoavR76pvPM88Emg74MWhsru9ykOsgmXorTUQ5Lhh23mOvgPXgLFwCANeMYNioACqk/s1600/Md-Alfaaz.jpg" align="left"/>Hi! Myself Md Alfaaz. I am a blogger from Bihar.<a href="https://shoutersplanet.blogspot.com/p/about-us.html"> Read More</a>

Customization:-

• Replace the link highlighted in sky blue with your own image link.

• Replace "Md Alfaaz" with your own name.

• Replace the link highlighted in green with your about us page link.

Style 4. Simple Author Profile Widget

Live Demo

• From your blogger dashboard go to post and click on New post.

• Now write whatever you want your visitors should know about you. I suggest you write your introduction from the center as it will fit in your sidebar. And add your cute photo and align it in the center.

• Then click on HTML mode and select all codes from there.

• Now go to layout and add a new gadget and paste your code there

• After that click on save the template.

Style 5. Modern About Me Widget


Live Demo


This widget is created using about.me, so first go to about.me and create your page there. After creating page follow the steps given below.

Step 1: Log in to about.me and go to your profile ( ex- about.me.Alfaaz) and hit on share icon.

Step 2: Then choose to Embed >> Blogger and copy the codes.

Step 3: Go to your blog dashboard >> Layout >> Add a gadget >> HTML/JavaScript.

Step 4: And Paste the copied code there.

Ex- <script src="//about.me/embed/mdalfaaz"></script>

Step 5: At last click on save button.

Style 6. Lightweight Author Box with Social Media Icons


Live Demo


Step 1: Go to your blog layout and add a gadget and choose HTML/JavaScript there.

Step 2: Paste the code given below:

<div class="OBB-Author">

<img width="60px" height="60px" class="opacity wow zoomIn animated" id="profileobhiaba" src="Image URL" align="left" style="visibility: visible; animation-name: zoomIn;" /> Author Bio

<br />

<ul class="obb-share">

  <li>

<a target="_blank" href="#"><i class="fa fa-envelope-o"></i></a></li>

 <li><a target="_blank" href="#"><i class="fa fa-rss"></i></a></li>



  <li><a target="_blank" href="#"><i class="fa fa-facebook"></i></a></li>



<li><a target="_blank" href="#"><i class="fa fa-google-plus"></i></a></li>



  <li><a target="_blank" href="#"><i class="fa fa-twitter"></i></a></li>

</ul>
</div>

Customization:-

• Replace "Your Image URL" with your image URL you want to show.

• Increase height and width of the image by changing 60px.

• Change " Author bio" with the bio you want to show.

• To add or remove a social media icon, simply add or remove a code similar to given below:

<li><a target="_blank" href="#"><i class="fa fa-facebook"></i></a></li>

• Replace "#" with your profile links.

Setting Up CSS

• Just login to dashboard and go to template >> edit HTML.

• Search for ]]></b:skin> tag. (Use Ctrl+f for searching)

• Just above that code paste the code given below:

.obb-share {list-style: none;}
.obb-share li {float: left; padding-right:13px; }



#profileobhiaba{


border:0px solid #888; margin:2px 15px 0px 0px; padding:2px;

border-radius: 50px;

-webkit-border-radius: 50px;

-moz-border-radius: 50px;

-o-border-radius: 50px;

}



#profileobhiaba:hover {

border:2px solid #ccc;

cursor:pointer;

}

.opacity  {

opacity: 0.5;

margin-left: 50px;

-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;

}

.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(0deg);

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;

} 

• And click save the template.

Style 7. Minimal Style Author Box


Live Demo

• Just paste the code given below right above ]]></b:skin> tag in your template.

.bx-author {
    min-width: 300px;
max-width:300px;
    max-width: 300px;
    background: #FAFAFA;
    border-top-style: solid;
    border-color: #85C15D;
    border-width: 10px;
}
.clear {
    clear: both;
}
.bx-wrap {
    margin: auto;
    max-width: 290px;
}
.bx-image {
    height: 120px;
    width: 120px;
    border-radius: 100px;
    border-color: #E3E3E3;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    margin-top: -50px;
}
.bx-head {
    text-transform: uppercase;
    font-size: 20px !important;
    line-height: 1.5em!important;
    text-transform: uppercase!important;
    color: #666666!important;
    text-transform: uppercase!important;
    font-family: 'Open Sans', sans-serif!important;
}
.bx-info {
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
    color: #333;
    text-align: center;
    width: 80%;
    clear: both;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}
.bx-social {
    background: #E3E3E3;
}
.bx-social ul {
    list-type: none !important;
    display: inline!important;
}
.bx-social li {
    list-type: none !important;
    display: inline!important;
}
.bx-social li a {
    font-size: 20px !important;
    color: #333 !important;
    padding-left: 5px;
    text-decoration: none;
}

• Then paste below code above </head> tag in your template. And click save the template.

<link href="https://dl.dropboxusercontent.com/u/46317781/bxperts-fonts.css" rel="stylesheet" type="text/css" /><link href="https://dl.dropboxusercontent.com/u/46317781/bxperts-fonts-min.css" media="all" rel="stylesheet" type="text/css" />

• Then go to layout --> add a gadget --> HTML/JavaScript.
• Paste below code in that box.

<div class="bx-author"><div class="bx-wrap"><center><img class="bx-image" src="Image Link" /><div class="clear"/><br/><div class="bx-head"><b>Mohd Alfaaz</b></div><br/><div class="bx-info">Description Here</div>
</div>
</center>
</div>
<div class="bx-social">
<ul>
<center>
<li><a href="#"><i class="fa-facebook"></i></a></li>
<li><a href="#"><i class="fa-twitter"></i></a></li>
<li><a href="#"><i class="fa-gplus"></i></a></li>
<li><a href="#"><i class="fa-rss"></i></a></li>
<li><a href="#"><i class="fa-pinterest"></i></a></li>
<li><a href="#"><i class="fa-gmail"></i></a></li>
<li><a href="#"><i class="fa-dribble"></i></a></li>
<li><a href="#"><i class="fa-tumblr"></i></a></li>
<li><a href="#"><i class="fa-youtube"></i></a></li>
<li><a href="#"><i class="fa-instagram"></i></a></li>
</center>
</ul>
</div>
</div>

Customization:-

• Change "Image Link" with your image URL.

• Change "Mohd Alfaaz" with your name.

• Replace "Description here" with your description.

• Change "#" with your social account link.

• And lastly click save the template.

Conclusion

So, this was 7 stylish about me/author profile widget for blogger. I hope these widgets have helped you. I have worked hard in creating this post. So, please comment and tell me about these widgets. And if you liked this then please share it with your friends. If there is any problem comment down I will solve.

Search Tags: stylish about me widget for blogger, author bio widget blogger, about the author widget, how to add author bio, about author widget for blogger, author box widget