Its 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:
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
- Navigate towards your Blogger Dashboard >> Template >> Edit HTML
- backup your template.
- 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.
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 == "Author #1 Exact Name"'> <span style='margin-right:5px;'>
<img src='Author #1 image link' style='border:1px'/>
</span>
</b:if>
<b:if cond='data:post.author == "Author #2 Exact Name"'> <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.
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 == "Author #2 Exact Name"'> <span style='margin-right:5px;'> <img src='Author #2 image link' style='border:1px'/> </span> </b:if>
إرسال تعليق