» » Add a Professional Author bio widget below posts

Add a Professional Author bio widget below posts

12.40  Unknown   Label:
Add a Professional Author bio widget
Many blogger wants to makes their more beautiful and want to add more fresh and new widgets into it. On the request of one of our reader i m going to share that how to add Author bio widget at the bottom of every post. In this widget there is a small paragraph for introduction of blog author with a small picture. It contains all blogging social media like Facebook , Twitter , Google+ , Youtube etc. There is also a button for Donation to get a donation for your blog and also be a blogger button and much more.

How to add Add a Professional Author bio widget below posts ?

  • Login to your blogger account.
  • Goto template and click on Edit Html
  • Press Ctrl+F and find the below code.
]]></b:skin>

  • Paste the below code just ]]></b:skin>

.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 again search <data:post.body/> and paste the below code just below it.

<div id='author-box'>            <div class='row row-1'>                <div class='avatar'>                    <a href='http://truebloggingtricks.blogspot.com/p/blog-page.html'><img alt='author-avatar' class='avatar avatar-90 photo' height='90' src='http://lh6.googleusercontent.com/-v_nVouKXND0/AAAAAAAAAAI/AAAAAAAAApc/CvpxL2mo9cg/s60-c/photo.jpg' width='90'/></a>                </div>                <div class='info'>  <h6>Posted By: Haider Khan <span>Admin and Author</span></h6>    <p><strong><a href='http://www.truebloggingtricks.com/p/about-me.html'>Haider Khan </a> is the founder of True Blogging Triks (TBT)</strong><strong>currently live in Peshawar Pakistan. I love blogging and I like to share every things which I know..</strong></p>                </div>                <div class='clear'/>            </div>            <div class='row row-2'>                <a class='social-item website' href='http://www.truebloggingtricks.blogspot.com/' meta='website' target='_blank'>                    <span class='icon'/>                    <span class='label'>Website</span>                  <span class='click'><span class='val'>***</span> </span>                </a>                           <a class='social-item twitter' href='https://twitter.com/haiderakhunzada' meta='twitter' target='_blank'>                    <span class='icon'/>                    <span class='label'>Twitter</span>                    <span class='click'><span class='val'>***</span></span>                </a>                           <a class='social-item facebook' href='http://www.facebook.com/truebloggingtricks' meta='face' target='_blank'>                    <span class='icon'/>                    <span class='label'>Facebook</span>                    <span class='click'><span class='val'>***</span></span>                </a>                           <a class='social-item gplus' href='https://plus.google.com/117388021465493806916' meta='gplus' target='_blank'>                    <span class='icon'/>                    <span class='label'>Google+</span>                    <span class='click'><span class='val'>***</span></span>                </a>                           <a class='social-item linkedin' href='http://ph.linkedin.com/Linked' meta='linkedin' target='_blank'>                    <span class='icon'/>                    <span class='label'>LinkedIn</span>                    <span class='click'><span class='val'>***</span></span>                </a>                           <a class='social-item youtube' href='#' meta='Youtube' target='_blank'>                    <span class='icon'/>                    <span class='label'>Youtube</span>                    <span class='click'><span class='val'>***</span></span>                </a>                                      <div class='clear'/></div>            <div class='row row-3'>            <form action='#' class='author-donation' method='post'>                <input name='cmd' type='hidden' value='_donations'/>                <input name='business' type='hidden' value='Your Paypal Account'/>                <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 http://www.truebloggingtricks.com/p/about-me.html with your bio page URL.
  • Replace http://lh6.googleusercontent.com/-v_nVouKXND0/AAAAAAAAAAI/AAAAAAAAApc/CvpxL2mo9cg/s60-c/photo.jpg with your image URL.
  • Replace https://plus.google.com/117388021465493806916 with your Google+ address.
  • Replace Haider Khan with your name.
  • Replace http://www.truebloggingtricks.blogspot.com/ with your website address.
  • Replace haiderakhunzada with your Twitter username.
  • Replace truebloggingtricks with your Facebook username.
  • Replace Linked with your linked username.
  • Replace Youtube with your youtube username.
  • Replace this Your Paypal Account with your paypal account email address.
Now click on save button and check your blog.
Share on :
di 12.40
Label:

Tidak ada komentar:

Posting Komentar