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
Aucun commentaire:
Enregistrer un commentaire