Author box widget plays very important roll in blogger according to SEO specialists. Author box integrates below every posts of blogger to show details about the admin of blog. Author box contains details about admin with integration of Twitter, Facebook and Google Plus links to follow the admin of that site and also follow site pages on social media. Admin picture attached with this widget to show others that who are you and how you are looking. I'm going to describe you that how to add cool and beautiful author box with admin picture and social media follow us links. Author box widget build up with HTML, JavaScript and CSS.
In addition with you can add your RSS, LinkedIn, YouTube and other links to this widget. You can also remove or rename any URL of social media easily.
Step 1. Log in to Blogger Dashboard, and select Template
Step 2. Click on Edit HTML
Step 3. Press CTRL+F from keyboard and paste </b:skin> in find box and then press enter
Step 4. Now add this CSS code before </b:skin> tag
Add Beautiful Author Box Widget Below Blogger Posts
Step 1. Log in to Blogger Dashboard, and select Template
Step 2. Click on Edit HTML
Step 3. Press CTRL+F from keyboard and paste </b:skin> in find box and then press enter
Step 4. Now add this CSS code before </b:skin> tag
.starsblogging-PostAuthor {
font-size:12px;
margin:0 auto;
padding:10px;
width:auto;
text-shadow:1px 0 0 #fff;
background:#F7F7F7;
border-radius:5px;
border: 1px #BBBBBB solid;
-moz-box-shadow: 0px 0px 5px #BBB;
-webkit-box-shadow: 0px 0px 5px #BBB;
box-shadow: 0px 0px 5px #BBB;
min-height:160px;
}
.starsblogging {
padding:10px 10px 0 0;
margin:0;
font-size:12px;
float:left;
width:110px;
text-align:center;
}
.starsblogging img {
border:2px solid #888;
background-color: #FFFFFF;
padding:2px;
margin:0px 5px 0px 5px;
opacity: 0.5;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.starsblogging:hover img {
border:2px solid #ccc;
cursor:pointer;
opacity: 1;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}
.starsblogging-text {
float:right;
width: 75%;
font:14px Trebuchet MS,sans-serif;
text-align:justify;
color:#111;
margin:0;
padding:0 0 0 10px;
border-left:1px #c4c4c4 solid;
}
.starsblogging-footer{
padding:10px 0;
font:bold 12px Trebuchet MS;
}
Now save your setting by clicking on Save Template.
Find this code with pressing CTRL+F from keyboard and paste this in find box
<div class='post-header-line-1'/>
if you don't find then search for this
<div class='post-footer-line post-footer-line-1'>
Paste this code after the above tags that you found with search
<b:if cond='data:blog.pageType == "item"'>
<div class='starsblogging-PostAuthor'>
<div class='starsblogging'>
<img height='100' src='ADD YOUR PICTURE URL' width='100'/>
<span style='font-family: Trebuchet MS,sans-serif;'><b>Admin</b></span></div>
<div class='starsblogging-text'>
<span style='font-size: large;'><b><span style='font-family: Trebuchet MS,sans-serif;'>About the Admin</span></b></span>
<div style='font-family: Trebuchet MS,sans-serif;'>
ADD INFO ABOUT YOURSELF<div class='starsblogging-footer'>
<div style='float:left;text-align:left;'>
Join Me On: <a href='http://www.facebook.com/YOUR FACEBOOK PAGE URL' rel='nofollow'>Facebook</a> | <a href='http://www.twitter.com/YOUR TWITTER URL' rel='nofollow'>Twitter</a> | <a href='https://plus.google.com/GOOGLE+ PAGE URL' target='_blank'>Google Plus</a></div>
<div style='float:right;text-align:right;'>
<a href='LINK HERE' target='_blank'>Read More >></a></div>
</div></div></div></div></b:if>
After adding the above code just save your template. <b:if> tag was added because of displaying author box only below of posts. If you want to display author box below every page then remove this tag from the start and also from end.
Customize Author box widget
Just replace your desired URL and links with the BOLD text with your own. Add your picture URL with ADD YOUR PICTURE URL to show you are admin of site. Add your information about yourself with replacing with ADD INFO ABOUT YOURSELF text. At the end just replace social links with your own site or your own profile to show links your own.
Now your visitors can see details about yourself as a admin of blog and follow you on social links. I hope you like this beautiful admin/author box below every post of blogger. Try it and keep visiting!
0 comments:
Post a Comment