How to install about-Author widget on blogger/website (Bootstrap)



In this tutorial, I will share a simple and well designed about-author widget for your blogger or website. The about author widget is used to provide the brief description about the author himself. The Author also mentions his personal contacts that the users can easily ask any question, personally to the author, using that contacts.
Follow the steps below to add about Author widget to any blogger/website:
Step 1: (stuff for <head>)
Add the following CSS source code link and meta tag (for responsiveness) just after the <head> tag.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href='http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'/>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
Step 2: (stuff for template)
Copy the following code carefully:
Login blogger dashboard > Template > Edit Template.
Search the <data.post.body/> or <div class='post-footer'> tag and paste there, below the every other widget used under the tag.
<div class="panel panel-success">
<div class="panel-heading">
About Author</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.blogger.com/null" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
  <img class="img-thumbnail" src="Author-Image-URL" style="margin-left: 15px; margin-left: 8%; margin-top: 9%;" /></a></div>
<div class="panel-body">
Author details: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem.
   </div>
<div class="panel-footer">
<center>
<a href="#"><button style="color:white;background:#46629E;border:1px solid #46629E;" class="btn btn-default" type="button"><span class="fa fa-facebook-square"></span> Facebook</button></a>
<a href="#"><button style="background:#28A9E2;border:1px solid #28A9E2;" class="btn btn-primary" type="button"><span class="fa fa-twitter-square"></span> Twitter</button></a>
<a href="#"><button style="background:#DD5144;border:1px solid #DD5144;" class="btn btn-success" type="button"><span class="fa fa-google-plus-square"></span> Google+</button></a>
<a href="#"><button style="background:#CB2027;border:1px solid #CB2027;" class="btn btn-info" type="button"><span class="fa fa-pinterest-square"></span> Pinterest</button></a>
<a href="#"><button style="background:#007AB5;border:1px solid #007AB5;" class="btn btn-warning" type="button"><span class="fa fa-linkedin-square"></span> Linkedin</button></a>
</center>
</div>
</div>
Edit the code with your own image URL, brief description and your personal contacts' links.
You may use the widget manually by pasting the code below the every post.


Suggestion: Ali Ahmad

Conclusion

Hope, it will fulfill the need of best "About-author widget for blogger and website". If you need any help, feel free to contact us via support@tentoppest.com. Leave your valuable reviews because that is appreciable.
About Author Subscribe
Previous
Next Post »