How to Add Author Box Below Posts in Blogger: Pro Widget

How to Add Author Box in Blogger

During this season we are starting something new which is also part of SEO Optimization, Dynamo tricks always made for SEO Optimization. We believe in Fresh and Clean tutorial, Whatever if it is related widget, Blogging tools, Pro Templates or any new technology. We provide Converted things. (Old in to Fresh) today we are going to talk about How to use About The Author and his social link with full Profile in below all Blogger Post.

Previously we have shared How to spicy looks or customize the label into cloud label in blogger or how to set up a Cloud label in blogger.

Learn how to add an author box below posts in blogger

 We can learn easily with few steps, let’s how to add?

STEP no. 1 First of all Find this code>>> <div class=’post-footer-line post-footer-lin1’> find above code with Ctrl+F Button.

STEP no. 2 Copy below Code and paste after the above code into blogger template.

STEP no.3  And Save the Blogger Template.

  Copy below Code

<style>

.wc-aboutauthor{

float:left;

width:500px;

padding:15px;

border:1px solid #ccc;

margin-bottom:15px;

margin-top:15px;

background:url('http://3.bp.blogspot.com/-t5gDiTb7yUc/UjiYfNUgBBI/AAAAAAAACXI/J1tb_tlU5-k/s1600/backgrounds.png');

color:#444444;

-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);

-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);

box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);

}

.wc-aboutauthor h2

{

color:#b6e026;font-family:Helvetica,Arial;font-weight:bold;text-shadow:#64665b 0px 1px 1px;font-size:28px;margin-bottom:-6px;

}

.wc-aboutpic{

float:right;

margin:0 0 0 10px;

}

.wc-aboutpic img{

border:1px solid #999999;

-webkit-transition:-webkit-transform .15s linear;

-moz-transition:-moz-transform .15s linear;

-o-transition:-o-transform .15s linear;transition:transform .15s linear;

-webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);

-moz-box-shadow:0 3px 6px rgba(0,0,0,.25);

box-shadow:0 3px 6px rgba(0,0,0,.25);

padding:5px 5px 5px 5px;-webkit-transform:rotate(+5deg);

-moz-transform:rotate(+5deg);-ms-transform:rotate(+5deg);

-o-transform:rotate(+5deg);transform:rotate(+5deg);float:left;

}

.wc-aboutpic img:hover{

background:#FFFFFF;

-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);

-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);

box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);

-webkit-transform:rotate(-1deg);

-moz-transform:rotate(-1deg);

-ms-transform:rotate(-1deg);

-o-transform:rotate(-1deg);

transform:rotate(-1deg);

}

.wc-aboutsoc img

{

height:35px;

margin-bottom:-13px;

}

.wc-aboutsoc  p

{

font:16px georgia;

color:#ffffff;

background:#b6e026;

display:inline;

border-radius:5px;

padding:5px;

margin-right:30px;

}

</style>

<b:if cond='data:blog.pageType == "item"'>

<div class='wc-aboutauthor'>

<div class='wc-aboutpic'>

<img alt='Author image' height='150' src='profile picture address' width='150'/>

</div>

<h2 >About the Author :</h2>

<p>Zaheer Abbas is the Founder of the dynamotrikcs, who love to share SEO Based tips and tricks and some useful methods and news through the dynamo tricks. He living for blogging. He loves human desire. He has been running numbers of high traffic blogs.. </p>

<div class='wc-aboutsoc'>

<p> Connect with him on : </p><a href='Facebook address'><img src='http://1.bp.blogspot.com/-XtMSvGt9QbM/UiIRj_Z-xkI/AAAAAAAACUE/lxKPo9uepx4/s1600/facebook.png' title='Facebook'/></a>    <a href='Twitter address'> <img src='http://1.bp.blogspot.com/-TD3jCs_IZcg/UiIRjnuFRyI/AAAAAAAACUA/9ZYp0awI3Ss/s1600/twitter.png' title='Twitter'/></a> <a href='Google plus address' > <img src='http://4.bp.blogspot.com/-l6tB4HfZcfY/UjdItwk9-7I/AAAAAAAACW4/iHklkLWO_Fs/s1600/google.png' title='Google plus'/></a></div>

</div>

</b:if>

Note: Please Changed Profile picture address (set your best url or picture).

Please Changed About the Author Description – use some SEO keywords in description.

Make Sure you have changed your Social Media URL Profiles (twitter, Facebook and Google Plus Addresses).

 If you have any problem then Comment, Reply or Contact us through email and Contact us pages. We will back soon as possible.