How to Add a Professional eRose Author Bio Widget

Professional eRose Author Bio Widget

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.

See Also: Advance Author Box Widget For 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://mix--er.blogspot.com/2015/03/author-bio-widget.html'><img alt='author-avatar' class='avatar avatar-90 photo' height='90' src='http://lh5.googleusercontent.com/-9ovzX6EzHt0/AAAAAAAAAAI/AAAAAAAAA_0/0yCHqDhLbEM/s80-c/photo.jpg' width='90'/></a> </div>   <div class='info'>  <h6>Posted By: Autor (Your Name) <span>Admin and Author</span></h6><p><strong><a href='http://mix--er.blogspot.com/2015/03/author-bio-widget.html'>Ana </a> is Blogger Girl, one of many in the world.</strong> <strong>Graduate in Computer Applications, Love to Make Blogger Hacks and Like to Play with HTML and a Business Woman.</strong></p> </div>   <div class='clear'/>   </div>     <div class='row row-2'>     <a class='social-item website' href='http://mix--er.blogspot.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/YourURL' 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/blogossphere' 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/+SweettSixteenn-kiss' 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/YourName' 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/YourURL' 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='yourmail@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>

Replace this

http://mix--er.blogspot.com/2015/03/author-bio-widget.html with your author bio page link (Optional)
Replace this http://lh5.googleusercontent.com/-9ovzX6EzHt0/AAAAAAAAAAI/AAAAAAAAA_0/0yCHqDhLbEM/s80-c/photo.jpg with your author image.
Replace this Autor (Your Name) with your Author OR Admin name.
Replace this Ana with your author bio.
Replace this www.widgetgenerators.com with your website link.
Replace this https://twitter.com/YourURL with your twitter username.
Replace this blogossphere with your Facebook username.
Replace this +SweettSixteenn-kiss with your Google Plus id
Replace this YourName with your linked in profile id.
Replace this https://www.youtube.com/user/YourURL with youtube username.
Replace this yourmail@gmail.com with your email id on Paypal account

Finally Save your Template.
You are done

Notifikasi

Mix Blogging

How to Add a Professional eRose Author Bio Widget