Some readers have asked me how to put a description of the blog author at the end of each post, just as it did in the most recent template Tips Blogger. I will try to explain, but already advance that the procedure is not simple, it is necessary to have knowledge of CSS.
In the image below, see a demo description:
Now Lets Start
Step 1:Enter the HTML template, click "Expand Widget Templates" and paste the code below BEFORE tag]]> </ b: skin>
** To find the tag, take a Ctrl + F on your keyboard and paste]]> </ b: skin>
** To enter HTML, see this post - How to edit HTML in the new interface
/ * Authors
----------------------------------------------- * /
# post-footer-author {
width: 100%;
height: 77px;
background: # e6e6e6; / * Background color * /
border: #ccc; / * Border color * /
margin: 0px 8px 8px 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
border: 2px solid #ccc; / * Edge * thickness /
}
# author-img {
width: 64px; / * width of the image * /
height: 64px; / * image height * /
background: #fff; / * background image * /
float: left;
margin: 7px;
}
# author on {
padding-right: 5px;
margin: 0px;
}
# author on p {
font-size: 14px;
padding: 10px;
margin: 0;
text-align: justify;
text-transform: Normal;
color: # 333; / * Font color * /
}
# author-on {
color: # 3d85c6; / * Color of the links * /
text-decoration: none;
}
# author on a: hover {
color: # 9A9A9A; / * Color of links to hover * /
text-decoration: underline;
}
If you have knowledge of CSS, you can change the background colors, borders, links and text, as pointed out in red.
Step 2:
Next, look for
In the image below, see a demo description:
Author's description
Now Lets Start
Step 1:Enter the HTML template, click "Expand Widget Templates" and paste the code below BEFORE tag]]> </ b: skin>
** To find the tag, take a Ctrl + F on your keyboard and paste]]> </ b: skin>
** To enter HTML, see this post - How to edit HTML in the new interface
/ * Authors
----------------------------------------------- * /
# post-footer-author {
width: 100%;
height: 77px;
background: # e6e6e6; / * Background color * /
border: #ccc; / * Border color * /
margin: 0px 8px 8px 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
border: 2px solid #ccc; / * Edge * thickness /
}
# author-img {
width: 64px; / * width of the image * /
height: 64px; / * image height * /
background: #fff; / * background image * /
float: left;
margin: 7px;
}
# author on {
padding-right: 5px;
margin: 0px;
}
# author on p {
font-size: 14px;
padding: 10px;
margin: 0;
text-align: justify;
text-transform: Normal;
color: # 333; / * Font color * /
}
# author-on {
color: # 3d85c6; / * Color of the links * /
text-decoration: none;
}
# author on a: hover {
color: # 9A9A9A; / * Color of links to hover * /
text-decoration: underline;
}
If you have knowledge of CSS, you can change the background colors, borders, links and text, as pointed out in red.
Step 2:
Next, look for
Comments
Post a Comment