Add a Professional eRose Author Bio Widget in Blogger

Many Bloggers wants the new and fresh widgets of blogger. Most of they saying we want the new author bio widget which includes all the aspects of blogging: like Social Media as Facebook, Twitter, Youtube etc. and keep in mind, in this widget you will get Donation Button.

Add eRose Author Bio Widget in Blogger

  • Login to Blogger > Dashboard
  • 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=’https://www.widgetgenerators.com/2012/09/about-author.html‘><img alt=’author-avatar’ class=’avatar avatar-90 photo’ height=’90’ src=’http://1.bp.blogspot.com/-t-lxMq3gu5I/T_A0bErZBxI/AAAAAAAACaE/oR6bZGCj7UM/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=’https://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=’https://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 https://www.widgetgenerators.com/2012/09/about-author.html with your author bio page link (Optional)
  • Replace this http://1.bp.blogspot.com/-t-lxMq3gu5I/T_A0bErZBxI/AAAAAAAACaE/oR6bZGCj7UM/s1600/Capture.PNGwith 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

 

If Any Problem Comes, Ask in Comments

picture:
Widget & Tutorial For Blogger” by TattfcOwn work. Licensed under CC BY-SA 3.0 via Wikimedia Commons.

Reply