Blogging isn't all about posting and SEO optimizing your template, at some point you have considered letting your readers know about you by adding an about me widget or author bio box to your blog.
It gets better when you add social media icons allowing your readers to follow you on Facebook, twitter, google plus, linkedIn, Instagram, Feedburner feed, etc.
Not forgetting that any widget you add to your blog reduces the speed of your blog. Due to this, we are going to be creating a simple lite weight about us widget with social media button which will not reduce our page speed. We are going to use FontAwesome in adding the social icons; it will be built only on HTML and self-hosted CSS which will make the widget very fast loading.
Aside from having an About Me widget at the sidebar or footer of your blog, you should consider publishing an about me page which will give the full details about yourself, your blog, the purpose for blogging and everything related to your profile.
2. Visit FontAwesome for more icons.
Paste the above CSS code above ]]></b:skin> and save your template.
It gets better when you add social media icons allowing your readers to follow you on Facebook, twitter, google plus, linkedIn, Instagram, Feedburner feed, etc.
What is An About Me Widget?
Every human on earth has a CV even a baby has one (something like am Stacy and am 2 years old). When someone visits your blog, he/she expects to be reading an article written by a real human being. Therefore, it is a wise decision for you as a blogger to add a widget with a few lines of words talking about yourself.Aside from having an About Me widget at the sidebar or footer of your blog, you should consider publishing an about me page which will give the full details about yourself, your blog, the purpose for blogging and everything related to your profile.
Importance Of Custom About Me Widget
- Customer/Visitor Trust
- Google Adsense Approval
- Professionalism
- Proper Google Post Info Rank
Features Of Blogger About Me Widget
- Animated Profile Picture
- Social Media Icons (Facebook, Twitter, Instagram, etc.)
- Author Name and Bio
- Fast Loading
- Fully Responsive
Steps To Create An About Me Widget In Blogger
- Set HTML properties using DIV tags
- Add FontAwesome
- Customize With CSS.
How To Add About Me Widget To Blogger.
We are going to be following the above steps to creating a fantastic and fast loading about us widget for our blogger blog. This widget can be added to any part of the blog; Sidebar, Footer, Below Post, etc.
Set Author Box HTML Tags.
Step 1 - Author Information
About Us widget for blogger, is built only on HTML, FontAwesome, and CSS. The first step would be adding the HTML tags to our blog. I have added this widget to the footer of my blog.
Go to blogger.com >> Layout >> Sidebar/Footer >> Add Widget >> HTML/JavaScript.
<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;" /> Hi! I am John, a blogger template designer, widget creator and tips poster
<br />
AUTHOR SOCIAL ICONS HERE
</div>
Copy the above code into the empty HTML/JavaScript Widget.
Customization
- Replace the IMAGE-URL with URL of your image.
- Edit Profile Information.
- Increase image height and width by changing 60px.
Step 2 - Author Social Icons
Now let's add the Social media buttons using FontAwesome and default link option in HTML. Copy the below code with FeedBurner, Facebook, Twitter, Google Plus and RSS already added. Use the below code to replace "AUTHOR SOCIAL ICONS HERE" in the above HTML.
<ul class="obb-share">
<li>
<a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=ObhiabaBlog&loc=en_US"><i class="fa fa-envelope-o"></i></a></li>
<li><a target="_blank" href="http://feeds.feedburner.com/ObhiabaBlog"><i class="fa fa-rss"></i></a></li>
<li><a target="_blank" href="http://www.facebook.com/obhiabablog"><i class="fa fa-facebook"></i></a></li>
<li><a target="_blank" href="https://plus.google.com/+PrinceJohnOkosun"><i class="fa fa-google-plus"></i></a></li>
<li><a target="_blank" href="http://twitter.com/ObhiabaBlog"><i class="fa fa-twitter"></i></a></li>
</ul>Customization
1. To add or remove a social icon media, only add or delete a similar line of code below.
<li><a target="_blank" href="http://www.facebook.com/obhiabablog"><i class="fa fa-facebook"></i></a></li>
2. Visit FontAwesome for more icons.
3. Replace my profiles with yours.
Save when done.
How To Add FontAwesome Icons To Blogger
We have set the HTML tags upon which our codes will work. Next is to import FontAwesome so that the social icons will show.
Note: If you already use FontAwesome icons on your blog, just skip this step.
Go to blogger.com >> Template >> Edit HTML.
Using CTRL + F search for <head> and just below it paste the below code.
Note: In other to speed up your blog, it is recommended you optimize the delivery of CSS (FontAwesome) in your blog, Follow the link below to do this.
Styling Author About Box With CSS.
Now it is time to give About Me Widget some colors and font. I have defined the CSS I used in creating mine and even made it a little more awesome by adding rounded borders to the profile image.
Go to blogger.com >> Template >> Edit HTML >> Search For ]]></b:skin> using CTRL +F.
.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;
}
Paste the above CSS code above ]]></b:skin> and save your template.
More From Author
The above widget is built on CSS and CSS3 and this gives it really awesome animations and effects. It is fully responsive and fast loading. Add this about Author widget to your blogger blog and improve your readers trust in you.