Many Bloggers wants the new and fresh widgets of blogger and most of the saying we want new author bio widget which includes the all aspects of blogging like Social Media as Facebook, Twitter, Youtube etc. so keep it in mind, in this widget you will get Donation Button, Be a Blogger Button and much when you use this widget.
Add eRose Author Bio Widget in Blogger
- Login to Blogger > Dashborad
- Click on Drop Down Menu and select Template
- Backup your Template before making any changes to your blog
- Press Ctrl + F and search the code shown below.
]]></b:skin>
- Paste below code just above it.
.clear {
clear:both;
}
#author-box {
margin:10px 0;
}
#author-box a:hover {
background:none!important;
}
#author-box .row-1 {
background:#333;
padding:20px;
}
#author-box .row-1 .avatar {
float:left;
line-height:1;
-moz-box-shadow:0 0 10px #FFF;
-webkit-box-shadow:0 0 10px #FFF;
box-shadow:0 0 10px #FFF;
}
#author-box .row-1 .info {
margin:0 0 0 110px;
}
#author-box .row-1 .info h6 {
color:#FFF;
font-size:20px;
margin:-4px 0 0;
}
#author-box .row-1 .info h6 span {
font-size:11px;
font-weight:400;
background:#1BA1E2;
-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;
}
#author-box .row-2 {
background:#666;
}
#author-box .row-2 a.social-item {
display:block;
float:left;
color:#FFF;
text-align:center;
padding:15px;
}
#author-box .row-2 .social-item .icon {
height:32px;
width:32px;
}
#author-box .row-2 .social-item > span {
display:block;
text-align:center;
margin:auto;
}
#author-box .row-2 .social-item .label {
font-weight:700;
font-size:13px;
}
#author-box .row-2 .social-item .click {
font-size:11px;
color:#EAEAEA;
line-height:1;
}
#author-box .row-2 a.social-item:hover {
background:#1BA1E2!important;
}
#author-box .row-3 {
background:#1BA1E2;
}
#author-box .row-3 form,#author-box .row-3 a.donation-button {
display:block;
float:left;
}
#author-box .row-3 .donation-button {
background:#1BA1E2;
border:none;
font-family:Impact;
font-size:30px;
color:#FFF;
line-height:1.2em;
margin:0;
padding:10px;
}
#author-box .row-3 .donation-button:hover {
background:#000;
cursor:pointer;
}
#author-box .row-3 .register-button {
display:block;
color:#FFF;
border:none;
font-family:Impact;
font-size:30px;
text-align:right;
line-height:1.2em;
margin:0;
padding:10px;
}
#author-box .row-3 .register-button:hover {
color:#000;
cursor:pointer;
}
#author-box .row-2 .social-item.twitter .icon {
background-position:0 -32px;
}
#author-box .row-2 .social-item.facebook .icon {
background-position:0 -64px;
}
#author-box .row-2 .social-item.gplus .icon {
background-position:0 -96px;
}
#author-box .row-2 .social-item.linkedin .icon {
background-position:0 -128px;
}
#author-box .row-2 .social-item.youtube .icon {
background-position:0 -160px;
}
#author-box .row-2 .social-item.pinterest .icon {
background-position:0 -192px;
}
#author-box .social-item .icon {
background-image:url(https://lh5.googleusercontent.com/--PQVoN23nrI/UYHHvhtNSxI/AAAAAAAAJPA/5weO87qvER4/s224/ausocial.png)!important;
background-repeat:no-repeat;
}
- Now Search for below code once again
<div class='post-footer-line post-footer-line-1'>
- Paste below code just after it.
<div id='author-box'>
<div class='row row-1'>
<div class='avatar'>
<a href='http://www.widgetgenerators.com/2012/09/about-author.html'><img alt='author-avatar' class='avatar avatar-90 photo' height='90' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2mfSZMYSW-4foOtk40vrhChK4zqH_jZMPz3dOox3J-8Xyraz5b6ntKprQ0nP28GfXAG7f2ixIKY5yU51bnk4PgQatE38VSY2GXfh1dDotaw-mD8nCjrbwR0Qo7KQBrdtv5sRCcwLzqZXo/s1600/Capture.PNG' width='90'/></a>
</div>
<div class='info'>
<h6>Posted By: Hemant Verma <span>Admin and Author</span></h6>
<p><strong><a href='http://www.widgetgenerators.com/2012/09/about-author.html'>Hemant Verma </a> is the founder of Widget Generators.</strong> <strong>Graduate in Computer Applications in 2012, Love to Make Blogger Hacks and Like to Play with HTML and a Business Man.</strong></p>
</div>
<div class='clear'/>
</div>
<div class='row row-2'>
<a class='social-item website' href='http://www.widgetgenerators.com' meta='website' target='_blank'>
<span class='icon'/>
<span class='label'>Website</span>
<span class='click'><span class='val'>113576 Visitors</span> </span>
</a>
<a class='social-item twitter' href='https://twitter.com/Widgetgenerator' meta='twitter' target='_blank'>
<span class='icon'/>
<span class='label'>Twitter</span>
<span class='click'><span class='val'>200 Followers</span></span>
</a>
<a class='social-item facebook' href='http://www.facebook.com/Widgetgenerators' meta='face' target='_blank'>
<span class='icon'/>
<span class='label'>Facebook</span>
<span class='click'><span class='val'>500 Likes</span></span>
</a>
<a class='social-item gplus' href='https://plus.google.com/101961392825834817673' meta='gplus' target='_blank'>
<span class='icon'/>
<span class='label'>Google+</span>
<span class='click'><span class='val'>70 Joined</span></span>
</a>
<a class='social-item linkedin' href='http://ph.linkedin.com/Widgetgenerators' meta='linkedin' target='_blank'>
<span class='icon'/>
<span class='label'>LinkedIn</span>
<span class='click'><span class='val'>40 Links</span></span>
</a>
<a class='social-item youtube' href='https://www.youtube.com/user/Widgetgenerators' meta='youtube' target='_blank'>
<span class='icon'/>
<span class='label'>Youtube</span>
<span class='click'><span class='val'>30 Followers</span></span>
</a>
<div class='clear'/></div>
<div class='row row-3'>
<form action='https://www.paypal.com/cgi-bin/webscr' class='author-donation' method='post'>
<input name='cmd' type='hidden' value='_donations'/>
<input name='business' type='hidden' value='vhemant03@gmail.com'/>
<input name='lc' type='hidden' value='US'/>
<input name='item_name' type='hidden' value='Donate Blogger'/>
<input name='no_note' type='hidden' value='0'/>
<input name='currency_code' type='hidden' value='USD'/>
<input class='donation-button' name='submit' type='submit' value='+Donate to Author'/>
</form><a class='register-button' href='http://blogger.com/'>Become a Blogger</a><div class='clear'/></div>
</div>
- Finally Save your Template.
- You are done
Make Changes....!
- Replace this http://www.widgetgenerators.com/2012/09/about-author.html with your author bio page link (Optional)
- Replace this https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2mfSZMYSW-4foOtk40vrhChK4zqH_jZMPz3dOox3J-8Xyraz5b6ntKprQ0nP28GfXAG7f2ixIKY5yU51bnk4PgQatE38VSY2GXfh1dDotaw-mD8nCjrbwR0Qo7KQBrdtv5sRCcwLzqZXo/s1600/Capture.PNG with your author image.
- Replace this Hemant Verma with your Author OR Admin name.
- Replace this Hemant Verma with your author bio.
- Replace this www.widgetgenerators.com with your website link.
- Replace this Widgetgenerator with your twitter username.
- Replace this Widgetgenerators with your Facebook username.
- Replace this 101961392825834817673 with your Google Plus id
- Replace this Widgetgenerators with your linked in profile id.
- Replace this Widgetgenerators with youtube username.
- Replace this vhemant03@gmail.com with your email id on Paypal account