Displaying Author's profile in every Blogger post page.
Author is the authority of a post or a blog. S/he writes various posts on various subjects considering visitors' demands. If an Author is all in all of a blog or posts, visitors can be called the soul of a site. As without visitors, a website look so gloomy and dull; so without a good author, a website is like a ship without a captain. Suppose you are a famous blogger, and you are too much acquainted with the online world. Every body knows you as a popular blogger. You have a lot of name and fame in this world. By the name and fame, you can get a lot of visitors in your own blog site. How can it be possible? You have to add an eye catching Author's Profile. Again if you are also a new blogger and want to decorate your blog, this is too much necessary. If you want to add an Author's Profile, you have to look in to the following topics.
See my Profile at this post bellow, You will get notions about it. Check this and remark, how is this? If you want, you can add this kind of Author's profile at blogger post bellow.
How to display Author's Profile bellow Blogger post page?
Find find this part of the code ]]></b:skin> copy the following codes from the highlighter. After copying, please paste it just before the above code.
/* Custom Author Profile by www.infotechlife.com
----------------------------------------------- */
.swt-author {
background-color: aliceblue ;
font-weight: bold;
border-top: 1px solid #321;
border-left: 2px solid #000;
border-right: 2px solid #000;
border-bottom: 1px solid #123;
overflow: auto;
}
.swt-author profile {
font-family:"Times New Roman", Times, serif;
font-weight: normal;
padding:5px 0;
margin:0;
text-transform:auto;
line-height:24px;
word-wrap:break-word;
}
.swt-author profile info {
font-size: 12px;
text-align: justify;
font-family: 'Droid Serif', serif;
}
.swt-author profile img {
float: left;
margin: 5px;
width:125px;
border: 2px solid #666;
border-radius:25px;
opacity:0.4;
filter:alpha(opacity=40);
transition:width 1s, height 1s, transform 1s;
-webkit-transition:width 1s, height 1s, -webkit-transform 1s;
}
.swt-author profile img:hover {
border-radius:5px;
opacity:1.0;
filter:alpha(opacity=100);
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
/* Tutorial at: http://www.infotechlife.com */}
Now find the following code. You can see the following code in two times. The first one is for Mobile and the second one is for Desktop. To set the Author Profile at desktop only Please choose the second one.
<div class='post-footer-line post-footer-line-1'>
Now copy the following code and paste it just after the above code.
<b:if cond='data:blog.pageType == "item"'>
<!-- Custom Author Profile by www.infotechlife.com -->
<div class='swt-author'>
<b><u>About Author:</u></b>
<profile>
<img alt='author' src='https://lh6.googleusercontent.com/-LofL3EnbELo/AAAAAAAAAAI/AAAAAAAADvU/ED8fSbGJZT4/s120-c/photo.jpg'/>
<info> Write here the author short Bio or introduction. The author profile may be maximum 250-300 characters with spaces or 40-55 words long. <i><a href='#'>Read More</a></i>...</info>
</br><hr>
Join him on
<a href='replace it with Google Plus profile url'>Google+</a> |
<a href=' replace it with Facebook profile url'>Facebook</a> |
<a href=' replace it with Twitter profile url'>Twitter</a>
</profile></div>
</b:if>
Now save the template and see the result. You can edit some code to customize this author's profile. Go to the first code highlighter. Scroll it dwon, you will find the following value with red coloured marked.
border-radius:25px;
Increase and decrease the value to give a perfect shape to your profile image. For this you can take help from your internet browser's "Inspect Element" option. Now that's all. Please make comments if you find this post helpful to you. Take care.
No comments