--> Show each Author Picture In Post Titles Dynamically | Experience Lab - Online business creation and development guide for bloggers and startups

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 Bloggingeho...

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:

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Show each Author Picture In Post Titles Dynamically
Show each Author Picture In Post Titles Dynamically
http://lh4.ggpht.com/-T-I5gnD9xfg/ULEULYe5Z0I/AAAAAAAAID8/T9MiVLqswNM/image%25255B7%25255D.png?imgmax=800
http://lh4.ggpht.com/-T-I5gnD9xfg/ULEULYe5Z0I/AAAAAAAAID8/T9MiVLqswNM/s72-c/image%25255B7%25255D.png?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2012/11/show-each-author-picture-in-post-titles.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2012/11/show-each-author-picture-in-post-titles.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy