[BLOGGER]Professional Author box

Holly Nicole

Well-known member
Registered
Joined
Feb 22, 2013
Messages
170
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
8
Views
5,278
Replies
0
Views
2,449
Newer Threads
Replies
3
Views
4,728
Replies
2
Views
2,433
Replies
2
Views
2,620
Replies
1
Views
2,483
Latest Threads
Recommended Threads

Latest Hosting OffersNew Reviews

Sponsors

Tag Cloud

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top