30 May 2017

How to add author box below on Blogger's post?

Add responsive author box widget below your Blogger's post

How to add author box widget below on Blogger's post? Author box widget for Blogger. Blogspot author box widget codes. Best responsive and cool stylish author box widget for Blogger's blog.
Hello Bloggers! Welcome back on HowToLearnBlog. Today, I am going to share a very cool 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 cool, stylish and responsive Author box for your blogger blog.

Follow these instructions to setup 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 */
.articleAuthor{overflow:hidden;margin-bottom:10px}
.authorContent{overflow:hidden;background:#4791d2;padding:0;margin:1px;margin-bottom:0;border:double #fff;}
.authorLeft{overflow:hidden;float:left;margin-right:10px;}
.authorLeft .authorAvatar{overflow:hidden;}
.authorLeft .authorAvatar img{background:#222;display:inline-block;}
.authorDetails{overflow:hidden;margin:10px 0 0 0;}
.authorDetails h2{font-size:14px;color:#fff;font-weight:400;text-transform:uppercase;}
.authorDetails h2 a{color:#fff;background:#6bb1ee;padding:4px 8px;display:inline-block;font-size:14px;margin-left:5px;border:double #4791d2;}
.authorDetails h2 a:hover{color:#6bb1ee;background:#fff;border:double #4791d2;}
.authorDetails span{display:block;padding-top:3px}
.articleAuthor .authorContent p{color:#fff;line-height:20px;margin:0 10px;font-size:12px;}

.single-img-wrap{max-width:1100px;margin:0 auto;padding:0 20px;min-height:350px;margin-top:40px;overflow:hidden}
.single-img{width:100%;min-height:350px}
/* CSS Author Box by WWW.HOWTOLEARNBLOG.COM */        </style>
        <div class="articleAuthor">
            <div class="authorContent">
                <div class="authorLeft">
                    <div class="authorAvatar">
                        <img alt="" class="avatar avatar-120 photo dontshowit showit" height="120" src="http://2.bp.blogspot.com/-_0qyTMr2uYI/VIuQL9jbCDI/AAAAAAAAH2U/vPhwdobq9NE/s1600/Userava.png" width="120" /></div>
                </div>
                <div class="authorDetails">
                    <h2>
                        <span style="font-family:verdana,geneva,sans-serif;"><strong><a href="#" rel="author" title="Posts by Admin">YOUR NAME</a></strong><span style="font-size: 16px;">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></h2>
                </div>
            </div>
        </div>
  • Replace yellow marked image URL with your image URL.
  • Replace yellow marked YOUR NAME 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.

No comments:

Post a Comment

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.