30 May 2017

Add simple author box below on Blogger post

Add simple responsive author box widget below your Blogger post

How to add simple author box widget below on Blogger's post? Author box widget for Blogger. Blogspot author box widget codes. Best responsive and simple author box widget for Blogger's blog.

Hello Bloggers! Welcome back on HowToLearnBlog. Here, I am going to share a simple author box blogger widget to setup your author box, below to the every post of your blog. As we know that author box plays very important role to promote your identity and your contents on your blog. So let's go to set up a simple and responsive Author box for your blogger blog.

Follow these instructions to setup simple and responsive author box widget below every posts of Blogger

  • Log on www.blogger.com
  • Click on Layout
  • Click on "Add a Gadget" just below of post (main) block.

  • Select HTML/JAVASCRIPT

  • Modify the below codes.
<style type="text/css">
/* CSS Author Box by WWW.HOWTOLEARNBLOG.COM */
.sora-author-box {
overflow: hidden;
margin: 10px 0;
}
.sora-author-box img {
float: left;
margin-right: 10px;
object-fit:cover;
}
.sora-author-box p {
padding: 0 10px 10px;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
}
.sora-author-box b {
font-weight: 700;
font-style: normal;
letter-spacing: 1px;
font-size: 20px;
}
/* CSS Author Box by WWW.HOWTOLEARNBLOG.COM */
     </style>
        <div class="sora-author-box">
            <img alt="Author Image" class="avatar avatar-60 photo" height="100" src="http://2.bp.blogspot.com/-_0qyTMr2uYI/VIuQL9jbCDI/AAAAAAAAH2U/vPhwdobq9NE/s1600/Userava.png" width="110" />
            <p style="text-align: justify;">
                <span style="font-family:verdana,geneva,sans-serif;"><b>About Author</b></span><br />
                <span style="font-size:16px;"><span style="font-family: verdana,geneva,sans-serif;"><span>This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.</span></span></span></p>
        </div>
  • Replace yellow marked image URL with your image URL.
  • Replace yellow marked About Author with your name.
  • Replace yellow marked author description details with your details.
  • After replacing codes. Put the final code on html/javascript box.

  • After pasting your codes. Click on Save button.

Final touch for setting Author box on Blogger's blog.

I hope everything is clear. If you have any kind of problem regarding to setup author box on Blogger's blog. Then, Please write your problem below on comment box.

Add simple author box below on Blogger post
4/ 5
Oleh

Subscribe via email

Share the post above? Please subscribe to the latest information updates directly via email.

Please note before commenting on this page.
1. Don't comment as for advertisement purpose.
2. Don't hyperlink your website inside comment box.
3. Abuses are strictly prohibited.
4. If necessary, you can post the only URL without any text hyperlink.