How to Add a 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.

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.

<div id='author-box'>
    <div class='row row-1'>
        <div class='avatar'>
            <a href='http://blogger-templatees.blogspot.com/2015/11/how-to-add-professional-erose-author.html'><img alt='author-avatar' class='avatar avatar-90 photo' height='90' src='https://s-media-cache-ak0.pinimg.com/564x/05/8d/fb/058dfbc365f2e8b0a900c4a338e8326e.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://blogger-templatees.blogspot.com/2015/11/how-to-add-professional-erose-author.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://blogger-templatees.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/ClassyBloger' 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/freebloggerthemes' 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/u/4/+AnaLeighReal' 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/channel/UCnEAt2xqvTxkJB6BfaqwofQ' 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-templatees.blogspot.com/'>Become a Blogger</a>
        <div class='clear' /></div>

Now Search for below code once again

Paste below code just after 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;
}

Replace next:

- Replace http://blogger-templatees.blogspot.com/2015/11/how-to-add-professional-erose-author.html with your author bio page link (Optional)
- Replace http://lh5.googleusercontent.com/-9ovzX6EzHt0/AAAAAAAAAAI/AAAAAAAAA_0/0yCHqDhLbEM/s80-c/photo.jpg with your author image.
- Replace Autor (Your Name) with your Author OR Admin name.
- Replace this Ana with your author bio.
- Replace http://blogger-templatees.blogspot.com with your website link.
- Replace https://twitter.com/ClassyBloger with your twitter username.
- Replace this freebloggerthemes with your Facebook username.
- Replace https://plus.google.com/u/4/+AnaLeighReal with your Google Plus id
- Replace this YourName with your Linkedin profile id.
- Replace https://www.youtube.com/channel/UCnEAt2xqvTxkJB6BfaqwofQ with your youtube username/channel
- Replace yourmail@gmail.com with your email id on Paypal account

Finally Save your Template. You are done.

How To Do

Thursday, November 23, 2017

How to Add a Professional eRose Author Bio Widget

Admin 1:16:00 AM

Categories

Blog Tools