How To Add Together Writer Box Below On Blogger's Post?

Add responsive writer box widget below your Blogger's postal service

Hello Bloggers! Welcome dorsum on HowToLearnBlog. Today, I am going to percentage a really cool blogger widget to setup your author box below to the every postal service of your blog. As nosotros know that author box plays really of import component subdivision to promote your identity in addition to your contents on your blog. So let's become to fix a cool, fashionable in addition to responsive Author box for your blogger blog.

Follow these instructions to setup responsive writer box widget below every posts of Blogger

• Log on www.blogger.com
• Click on Layout
• Click on "Add a Gadget" merely below of postal service (main) block.

• Select HTML/JAVASCRIPT

• Modify the below codes.

<style type="text/css">
/* CSS Author Box past times 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 past times WWW.HOWTOLEARNBLOG.COM */        </style>
        <div class="articleAuthor">
            <div class="authorContent">
                <div class="authorLeft">
                    <div class="authorAvatar">
                        <img alt=" Add responsive writer box widget below your Blogger How to add together writer box below on Blogger's post?" class="avatar avatar-120 photograph 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="How to add together writer box below on Blogger's post?">YOUR NAME</a></strong><span style="font-size: 16px;">This is dummy text. It is non meant to last read. Accordingly, it is hard to figure out when to cease it. But then, this is dummy text. It is non meant to last read. Period.</span></span></h2>
                </div>
            </div>
        </div>

• Replace xanthous marked ikon URL amongst your ikon URL.
• Replace xanthous marked YOUR NAME with your name.
• Replace xanthous marked writer description details amongst your details.
• After replacing codes. Put the concluding code on html/javascript box.

• After pasting your codes. Click on Save button.

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

I promise everything is clear. If you lot convey whatever form of occupation regarding to setup writer box on Blogger's blog. Then, Please write your occupation below on comment box.