Awesome Multi Author Box for Blog Header or Footer
This gadget for the blog/blogger. this widget you can show your blog under of header, or under of post footer. Installing system . First login your blog dashboard. go to template, then press edit HTML. mouse press into the template code screen, then press Ctrl+F from keyboard. now type in the search box ]]></b:skin> press enter. paste CSS code above in ]]></b:skin>
Add this CSS code just before above code:
//**.....................toneysoftblog.......................**//
#author-box {
margin:10px 0;
}
#author-box a:hover {
background:#006633;
color: #ccc;
border-left: 5px solid #bada55;
margin-right: 0;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
-webkit-box-shadow: -2px 2px 4px 0 rgba(0, 0, 0, 0.05);
-moz-box-shadow: -2px 2px 4px 0 rgba(0, 0, 0, 0.05);
box-shadow: -2px 2px 4px 0 rgba(0, 0, 0, 0.05);
}
#author-box .row-1 {
background:#f3f3f3;
position: relative;
z-index: 10;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
border-right:5px solid#FB8630;
margin:3px 2px 2px 3px
padding:20px;
}
#author-box .row-1 .avatar {
float:left;
line-height:1;
-moz-box-shadow:0 0 10px #FFF;
-webkit-box-shadow:5px 0 10px #FFF;
box-shadow:0 0 10px #FFF;
border-left: 5px solid #B8B8B8 ;
border-right:5px solid#B8B8B8 0;
border-top:5px solid#B8B8B8 ;
border-bottom:5px solid#B8B8B8 ;
}
#author-box .row-1 .info {
margin:0 0 0 110px;
}
#author-box .row-1 .info h6 {
color:#134f5c;
font-size:20px;
margin:-4px 0 0;
}
#author-box .row-1 .info h6 span {
font-size:22px;
font-weight:400;
background:#274e13;
-webkit-border-radius:40px;
-moz-border-radius:40px;
border-radius:40px;
filter:alpha(opacity=60);
opacity:0.6;
margin:0 0 0 1em;
padding:1px 9px 2px;
}
#author-box .row-1 .info p {
color:#DDD;
font-weight:400;
font-size:14px;
margin:0;
}
//**.....................toneysoftblog.......................**//
Follow the Picture
Next
Save template
Again type into search box
<div class='post-footer-line post-footer-line-1'>
Add below code just before above line:
<div id='author-box'>
<div class='row row-1'>
<div class='avatar'>
<a href='http://www.toneysoftblog.blogspot.com/2012/09/about-author.html'><img class='avatar avatar-90 photo' expr:src='data:post.authorPhoto.url' height='90' src='Image' width='90'/></a>
</div>
<div class='info'>
<h6>Posted By:<span><a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
<data:post.author/></a></span></h6>
<p><strong><a expr:href='data:post.url'>
<data:post.title/>
</a><hr/>
<a href='facebool.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjumghLS9vLzwgcS0CqYU3HgHFOVLwIr-PLBwp8t2qyRWIa11YzLfs8ABx5la1wEYXMjSMZ5PQhYU0B0ZOZhCkSfAUrGyzBXUCe0oxztS6Uz3m-k0uCXdTBA3c4TLatB-sh_gBblTPyEm-q/s1600/facebook.png' title='Facebook'/></a> <a href='Twitter.com/'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIDyn8XXmPaG-18buXPTLpWpYGjZrN4jbj-dJyr_3-IQk6hWzcsXNrU4h4_wy1JWsEOtK7Ne22KUwdzlwb0Kgsn1nMuNvJTQYfciQGyUUu1oPcvN5yMVw89veAsRtL1NTnnbIAvhdAqFs3/s1600/twitter.png' title='Twitter'/></a> <a href='https://plus.google.com/'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDE6UeEP90gtJjuagSq7fyBQnkh2cmTomq1m-pyF9EN_n3KfjlN7yF7-hLPSZNQSC7dCVEWQABBZAWxUpNus6523-cx2628nzWYsCA_s1qZyZRjowyJGfe40DxTsk8xp_p81FkE7DGeQzl/s1600/gplus.png' title='Google plus'/></a> <a href='LinkedIn.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4sREfQUljZj6RdYNyYIHszdg7mQYIdDJwaUHjpFlVqgGSt0km5mZVXEF-ucoRlaV9gzkMkDRWqTTDIAUp-CjW3uO26EGPghsuXr-4rga_u9Y9IuY12m2UqovKbm3eD9JmniB_ecHFB1IC/s1600/linkedin.png' title='LinkedIn'/></a> </strong> <strong><h2><a expr:href='data:post.authorProfileaboutUrl' itemprop='author' rel='about' title='author profile'>
<data:post.author/></a></h2></strong></p>
</div>
<div class='clear'/>
</div>
</div>
Save your template
Show the result
