Add a Professional eRose Author Bio 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://hahasat.blogspot.com'><img alt='author-avatar' class='avatar avatar-90 photo' height='90' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-OkmIXg_PmuaFWQaIxPuSCF3dxnHmzQsXkEYL9sMVydEruRAXOmWPu0RLH3cMNi-gvTwdkBCHf2-jKO3zNivk3yzKzPHY2kfRsvvtkD2ocdzmeRsy226I92RS9-Y48eVWnuYle34PkQQN/s1600/Capture.PNG' width='90'/></a>
                </div>
                <div class='info'>
  <h6>Posted By: Hamza Gujjar <span>Admin and Author</span></h6>
    <p><strong><a href='http://hahasat.blogspot.com'>Hamza Gujjar</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://hahasat.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/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='youremail@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://hahasat.blogspot.com with your author bio page link (Optional)
• Replace this https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-OkmIXg_PmuaFWQaIxPuSCF3dxnHmzQsXkEYL9sMVydEruRAXOmWPu0RLH3cMNi-gvTwdkBCHf2-jKO3zNivk3yzKzPHY2kfRsvvtkD2ocdzmeRsy226I92RS9-Y48eVWnuYle34PkQQN/s1600/Capture.PNG with your author image.
• Replace this Hamza Gujjarwith your Author OR Admin name.
• Replace this hahasat  with your author bio.
• Replace this http://hahasat.blogspot.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 youremail@gmail.com with your email id on Paypal account