How to add together writer box below on Blogger's post?

Add responsive writer box widget below your Blogger's ship

Hello Bloggers! Welcome dorsum on HowToLearnBlog. Today, I am going to part a really cool blogger widget to setup your author box below to the every ship of your blog. As nosotros know that author box plays really of import component subdivision to promote your identity as well as your contents on your blog. So let's become to fix a cool, fashionable as well as 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" but below of ship (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 live read. Accordingly, it is hard to figure out when to cease it. But then, this is dummy text. It is non meant to live read. Period.</span></span></h2>
                </div>
            </div>
        </div>

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

After pasting your codes. Click on Save button.

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

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