Show each Author Picture In Post Titles Dynamically

Post Contributed by Hassam Ahmad Awan, a Gold Star MBT contributor and senior co-author. You can catch him always on his blog Bloggingehow

add author pictures beside blog titlesIts a pleasure for me to share one of a Blogger tweak that we managed to implement on BloggingeHow.com recently that makes sure that every author's image is shown up beside their post titles, both on home and post pages. The dynamic tweak enables every individual authors in Blogger based blogs to get them selves showcased. Also as for readers, its a much satisfying thing to know the actual person behind the article. Its much easier to get your self related with the post. It will display author pics dynamically unlike the static way that Mohammad shared months ago which can be find here: Show Profile Avatars next to post titles.
 

Live Demo
 
PS: At MBT a different approach is utilized and that alternative tweak will be shared by Mohammad himself so stay tuned to that.

What the trick?

The most tricky part in implementing the dynamic feature was to align the image and the post titles in a single line and not laying down the actual code for displaying individual authors images. As every other Blogger template is different as of its coding structure, so the below tutorial might not exactly match with your template, though you would be given the idea of what sort of code to search for in order to get to that point in the code where you have to implement the Dynamic author's profile images in Blogger.

Step #1 Open Edit HTML section

  1. Navigate towards your Blogger Dashboard >> Template >> Edit HTML
  2. backup your template. 
  3. Hit 'Expand Widget Templates' and find the following code
<h2 class='post-title entry-title'>
 
Though, note that you might not find the exact code in your template, though you can search for something similar that says 'Post Titles'. Once you find the above code, you're now on the right place to implement the dynamic author's profile tweak.

The approach?

Now, there are multiple ways through which we can show up the author's image beside post titles. For this tutorial and what we have implemented on the demo blog, we'll be using HTML Tables to wrap up the post titles in a single <td> tag and the author's image in another <td> section.
author photo in titles
The green box indicates first <td> tag while the red box indicates another one. Now that we know what code is responsible for displaying the Post Titles, we can easily place Dynamic author's profile beside it with the help of HTML table.

Step #2 What to do?

Once you have found the above code in Step #1 you now have to mark out the entire code that shows up the post titles as mentioned below.
 

<table>

<tr> <td>

<b:if cond='data:post.author == &quot;Author #1 Exact Name&quot;'> <span style='margin-right:5px;'>

<img src='Author #1 image link' style='border:1px'/>

</span>

</b:if>

<b:if cond='data:post.author == &quot;Author #2 Exact Name&quot;'> <span style='margin-right:5px;'>

<img src='Author #2 image link' style='border:1px'/>

</span>

</b:if>

 </td>

<td style='vertical-align:middle'>    

<b:if cond='data:post.title'>     

 <h2 class='post-title entry-title'>      

<b:if cond='data:post.link'>        

<a expr:href='data:post.link'><data:post.title/></a>      

<b:else/>         <b:if cond='data:post.url'>          

<b:if cond='data:blog.url != data:post.url'>            

<a expr:href='data:post.url'><data:post.title/></a>

<b:else/>             <data:post.title/>           </b:if>         <b:else/>           <data:post.title/>         </b:if>       </b:if>       </h2>     </b:if>

</td> </tr>

</table>

 
The above code can be divided into 2 parts. The first section is packed into first <td> tag as mentioned before. The other one is shown in <td> color. Wrap your Post Titles code that are in your template with in the <table> <tr> <td> tags as shown above with the author's profile image/conditional tags in the first <td>. You can relate in a much better way by having a look at the image below.
blogger author picture in post titles

How does it work?

All that table thing was to make sure that the Author's image and the Post Titles are aligned with each other. Though the actual Dynamic Pictures comes in from the below code:
 <b:if cond='data:post.author == &quot;Author #2 Exact Name&quot;'> <span style='margin-right:5px;'> <img src='Author #2 image link' style='border:1px'/> </span> </b:if>
As you would have noticed, Author #2 Exact Name that is with in the conditional tags is responsible for showing the content with in it only when the post is written by 'Author #2 Exact Name' string. So to make that work, you got to make sure that what ever name you enter, that must be the same as the actual author's Blogger's author's account name. Other wise that wont work.

Was that difficult to implement?

I know it can be tricky to find the exact code responsible for showing the Post titles, though the above explanation would have hopefully helped you out in understanding that what needs to be done. In case of any problem, simply leave out your quires below and I would love to get back to you guys as soon as I can. Salam!

For optimizing post titles don't forget to read:

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

18 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. @InDigO dUdE

    Thanks buddy :) I hope you would try that and will update us with your feedback.

    ReplyDelete
  2. Mohammad Sir, I want to write for your blog on SEO and Blogger Widgets.All my posts are unique.Any time you can contact me.

    ReplyDelete
  3. Hello Mohammad, Its really nice trick. I want a help to make this as like yours. I saw each author contains their photo in their posts.
    Please see the screenshot below.
    http://foto.pk/images/1hgh.jpg

    Please tell me how can I do this. I am waiting a reply from you as soon as possible.

    Thanks -
    Saimoom

    ReplyDelete
  4. Hassam Ahmad Awan brother ,,, it is a great ... wow
    Atif980

    ReplyDelete
  5. nice information thanks for sharing :)

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. It’s my pleasure to read this blog post Show each Author Picture In Post Titles Dynamically . Your blog post is very useful. I have been looking for this knowledge for many days. I think highly of you efforts. I will come here again to check new keep posts. Thanks.

    dissertation writing help

    ReplyDelete
  8. It is nice Reading from your post. Please After going through you post i saw the post title and i copy and post code you display i found this error


    "We were unable to save your template.
    Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly. XML error message:
    The element type "b:if" must be terminated by the matching end-tag "".

    ReplyDelete
  9. It is nice Reading from your post. Please After going through you post i saw the post title and i copy and post code you display i found this error


    "We were unable to save your template.
    Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly. XML error message:
    The element type "b:if" must be terminated by the matching end-tag "". Please kindly help me out please

    ReplyDelete
  10. i Didn't Not Understand i Am Find Post Tittle Code And i Got it But Where i Want to Paste Script Tell me

    ReplyDelete
  11. @Akhil Swatantra

    dear brother

    i seeyour blog..your blog just fine the
    <h3 class='post-title entry-title'>

    and update and intruction mohammad bhai post

    ReplyDelete
  12. lol you havnt mention properly, what i have to copy? where to post?

    ReplyDelete
  13. Really dont understand where code paste and where is code really i am confuse well thanks for this post
    Regards
    Www.HowInblogger.org

    ReplyDelete
  14. Hello Mohammad Sir...
    As above you tell, i done perfectally and you can check on my blog www.infenia.com,
    But sir one problem is that author pic also show on static page also with title, so please reply me how can i fix that... Please Sir

    ReplyDelete
    Replies
    1. Dear for hiding the images on static pages simply enclose the image between a conditional tag. Replace the code for image with this:

      <b:if cond='data:blog.pageType != "static_page"'>
      <img src='Author #1 image link' style='border:1px'/>
      </b:if>


      Hope this helps :)

      Delete
  15. Thank you sir..This works perfectly...Thanks a lot...

    ReplyDelete
  16. assalamualaikum, i cannot find, :( cannot find the first code ??
    may be coz my blog is beta template http://livemecca.blogspot.com/

    ReplyDelete
  17. Well its way but not a definite one. For each author a line of code is needed. Is there any better way to do that , I mean any data layout tag for that.

    ReplyDelete