Home » Blogger Tutorials, Tricks and Hacks » Blogger Posts / Archive Tricks » Show Author’s Profile Picture In Multi-Author Blog

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Show Author’s Profile Picture In Multi-Author Blog

Show Author’s Profile Picture In Multi-Author Blog

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

1,100 views

Today’s featured tutorial once again comes from the guys at 54Blogger, and it’s for multiple-author blogs and blogs with guest posts. It lets your readers identify each post’s author by displaying their username and profile picture at the top of the post.

GET PROFILE LINK/ADDRESS

First thing you need to do is to gather and collect all of the URLs or link addresses of your and your guest authors’ profiles. To get yours you can simply go to your Blogger dashboard and then “View Profile.” Right click on top of the photo and copy its link, then paste it somewhere (e.g. notepad).

CREATE HTML ELEMENT

Next step is to create a specific element in your HTML that will contain the profile picture and style it with CSS.

1. Go to the “Design” page in your dashboard, head over to “Template”, and then click on “Edit HTML”.

2. Add a few lines of CSS. Below is a basic sample of CSS styling:

.post-author {

float: left;

height: auto;

width: 90px;

margin: 10px 10px 10px 0;

padding: 0;

}

3. Save your template.
INSERT THE CODE

While still viewing your template’s code in the HTML editor, tick the “Expand Widget Templates” box. Locate where you want to display the profile picture. In this example, it’s next to the post title or inside the post header area. Now, add the code below:

<div class='post-author'>

<b:if cond='data:post.author == "AUTHOR1-DISPLAY-NAME"'>

<img height='90' src='AUTHOR1-IMG-URL' width='90'/>

</b:if>
<b:if cond='data:post.author == "AUTHOR2-DISPLAY-NAME"'>

<img height='90' src='AUTHOR2-IMG-URL' width='90'/>

</b:if>
<b:if cond='data:post.author == "AUTHOR3-DISPLAY-NAME"'>

<img height='90' src='AUTHOR3-IMG-URL' width='90'/>

</b:if>

</div>

4. Replace all the necessary values (highlighted above) with those of your guest authors and yours.

Liked It ? Please Share

Comments

2 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. I think it should have less negative effect on the humand body. The price is decent and the delivery is speedy and item is packed properly. It would be nice in the future to test some of your free items. I would recommend this merchandise to my friends as well.

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here