[BLOGGER]Professional Author box

Holly Nicole

New member
Joined
Feb 22, 2013
Messages
302
Points
0
Step 1:
Go to your template and edit HTML then look for ]]></b:skin> and paste this just above
Code:
#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
Code:
<div class='post-footer-line post-footer-line-1'>
And place just After
Code:
[COLOR=#000000][FONT=Courier New]<div id='author-box'>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]            <div class='row row-1'>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                <div class='avatar'>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                    <a href='[COLOR=#CC0000][B]YOUR LINK HERE[/B][/COLOR]'><img alt='author-avatar' class='avatar avatar-90 photo' height='90' src='YOUR IMAGE HERE' width='90'/></a>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                </div>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                <div class='info'>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]  <h6>Posted By: [COLOR=blue][B]Hemant Verma [/B][/COLOR]<span>Admin and Author</span></h6>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]    <p><strong><a href='[COLOR=#CC0000][B]#[/B][/COLOR]'>[B][COLOR=purple][I]Marci[/I][/COLOR][/B] </a>[COLOR=purple][I] [B]is the founder of Vampire Marci</strong>[/B][/I][/COLOR]</p>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                </div>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                <div class='clear'/>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]            </div>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]            <div class='row row-2'>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                <a class='social-item website' href='http://#' meta='website' target='_blank'>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                    <span class='icon'/>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                    <span class='label'>Website</span>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                  <span class='click'><span class='val'>113576 Visitors</span> </span>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                </a>[/FONT][/COLOR]

[COLOR=#000000][FONT=Courier New]                <a class='social-item twitter' href='https://twitter.com/#' meta='twitter' target='_blank'>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                    <span class='icon'/>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                    <span class='label'>Twitter</span>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                    <span class='click'><span class='val'>200 Followers</span></span>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                </a>[/FONT][/COLOR]

[COLOR=#000000][FONT=Courier New]                <a class='social-item facebook' href='http://www.facebook.com/#' meta='face' target='_blank'>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                    <span class='icon'/>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                    <span class='label'>Facebook</span>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                    <span class='click'><span class='val'>500 Likes</span></span>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                </a>[/FONT][/COLOR]

[COLOR=#000000][FONT=Courier New]                <a class='social-item gplus' href='#' meta='gplus' target='_blank'>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                    <span class='icon'/>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                    <span class='label'>Google+</span>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                    <span class='click'><span class='val'>70 Joined</span></span>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                </a>[/FONT][/COLOR]

[COLOR=#000000][FONT=Courier New]                <a class='social-item linkedin' href='http://ph.linkedin.com/#' meta='linkedin' target='_blank'>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                    <span class='icon'/>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                    <span class='label'>LinkedIn</span>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                    <span class='click'><span class='val'>40 Links</span></span>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                </a>[/FONT][/COLOR]

[COLOR=#000000][FONT=Courier New]                <a class='social-item youtube' href='https://www.youtube.com/user/#' meta='youtube' target='_blank'>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                    <span class='icon'/>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                    <span class='label'>Youtube</span>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                    <span class='click'><span class='val'>30 Followers</span></span>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                </a>[/FONT][/COLOR]


[COLOR=#000000][FONT=Courier New]            <div class='clear'/></div>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]            <div class='row row-3'>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]            <form action='https://www.paypal.com/cgi-bin/webscr' class='author-donation' method='post'>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                <input name='cmd' type='hidden' value='_donations'/>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                <input name='business' type='hidden' value='#'/>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                <input name='lc' type='hidden' value='US'/>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                <input name='item_name' type='hidden' value='Donate Blogger'/>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                <input name='no_note' type='hidden' value='0'/>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                <input name='currency_code' type='hidden' value='USD'/>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]                <input class='donation-button' name='submit' type='submit' value='+Donate to Author'/>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]            </form><a class='register-button' href='http://blogger.com/'>Become a Blogger</a><div class='clear'/></div>[/FONT][/COLOR]
[COLOR=#000000][FONT=Courier New]    </div>[/FONT][/COLOR][COLOR=#000000][FONT=Arial]
[/FONT][/COLOR]
REPLACE ALL THE COLORED MARKS WITH YOUR INFORMATION

Demo
 
Older threads
Replies
3
Views
5,003
Replies
15
Views
6,871
Replies
8
Views
5,768
Newer threads
Replies
3
Views
6,967
Replies
2
Views
2,966
Replies
7
Views
4,193
Latest threads
Replies
0
Views
25
Replies
0
Views
29
Replies
1
Views
38
Replies
3
Views
94
Recommended threads
Replies
2
Views
2,898
Replies
2
Views
2,265
Top