How To Filter Blogger Posts By Authors | List Of Authors Widget

Though Blogger is a very user friendly and great platform for blogging, but there are certain limitations as well. There are so many things that you can do on open-source blogging platforms such as WordPress, but you can’t do on Blogger.

As you know that professional authors/content-creators write for different blogs. Some people visit blogs just to read the content of their favorite authors, and that’s why such blogs display their authors in a list with brief introduction.

When visitors click their profile they can see all of their articles, both old and new. It is much easier for them to find and read articles directly from their profile instead of searching manually.

There are thousands of multi-author blogs on Blogger as well. The owners of Blogger blog also want to display the profiles of their blog authors so that people can easily access their articles from one place.

There is a very common query like, “Can we filter Blogger posts by an author?” The answer is, Blogger doesn’t provide this feature, but there is an alternate method to execute this, you can use Labels.

In this tutorial we will cover following topics step-by-step:

• Display List Of Authors Without Thumbnail
• Display Authors With Their Thumbnails

Prerequisite:

• Every time you create a post, type your name Label as well.
• For instance there are three authors, John, Emily & Olivia. When each of them write a post, they should add their name Label with other Labels.
• For instance, Emily writes a post, ” How to Upload New Theme On Blogger?” The probable Labels would be, How To, Blogger etc.
• Now, with these Labels, Emily should add her name Label as well, like, How To, Blogger, Author-Emily.
• You can add more Labels to filter further like, if I want to see only Emily’s Opinions, not all her posts, so with label Author-Emily, she can add the Label Emily-Opinions on her opinion posts.

01. Show Authors In A List

• Click Layout.
• Click Add a Gadget.

• Add Pages Widget.

• Enter some title like Authors List.
• Untick all other Pages.
• Click “+ Add external link”.
• A pop-up will appear when you click the link.

• Now copy the author name label link from any blog post of that author.
• Here in this case, I clicked the Author-Emily label and copied the URL.

• Go back to that Pop Up, and Enter the Name of author and Paste the URL.

• Now one by one, add all the authors like that.
• Here I have added these three authors.

• Now open your blog and see, how the authors list look like.
• Add some CSS to make it presentable. When you will click an author it will list all its blog posts.

02. Show Authors With Thumbnails

• Copy the link of the author, as I have shown above. Like Emily’s link was  https://www.meersworld.net/search/label/Author-Emily
• Now go to “Layout”.
• Click “+ Add a Gadget”. Add this widget somewhere in your sidebar, so that it will not disturb your blog layout.

• Click “Image +”.

• Now in the “Link” textbox paste the author link.
• Click the “Browse” to upload the image of the author from your computer.

• Once the image is uploaded, Click Save.

• Now open or refresh your blog and look for the image that you have uploaded.
• Right-click on the image.
• Click Inspect. It will show you the HTML code.

• You can see that the HTML code of image with author’s link is visible.
• Your code is between the <a> <a/> tags.
• Now right-click on that first line.
• Click Copy.
• Click Copy element.
• The first line will be similar to this:

<a href=”https://www.meersworld.net/search/label/Author-Emily”>

• Open the Notepad and paste there.
• You can see that the code between the tags <a> </a> has been copied.

• Now go to Layout.
• Click Edit the image that you just uploaded
• Click Remove. We don’t need this image now.

• Now, repeat this process for all your authors. I will do this for John & Olivia as well.
• You can see that I have done for three authors.

• Now go to Layout.
• Click Add a Gadget.
• Click HTML/JavaScript.

• Paste the below code and Save.
• Replace The bold code with your code.

————————————————————————–
<style>
.list-of-auhtors
{
padding-top: 7px;
}
.list-of-auhtors img
{
width: 104px;
height: 100px;
border-radius: 50%
}
.list-of-auhtors li
{
list-style: none;
}
.list-of-auhtors li a
{
text-decoration:none;
}

</style>

<div class=”list-of-auhtors”>
<ul>
<li>
<a href=”https://www.meersworld.net/search/label/Author-Emily”>
<img alt=”” height=”550″ id=”Image1_img” src=”//2.bp.blogspot.com/-5spKo57yqco/XIWVQEAOrHI/AAAAAAAADXk/oxe9DgZbwdgDe0pUGl0ornwyJORXvPV7ACK4BGAYYCw/s1600/Emily.jpg” width=”832″ />
<span style=”position: relative;top: -37px;font-size: 26px;font-weight: bold;right: -5px;”> Emily </span>
</a>
</li>
<li>
<a href=”https://www.meersworld.net/search/label/Author-John”>
<img alt=”” height=”800″ id=”Image1_img” src=”//2.bp.blogspot.com/-PoI6LQ-0URc/XIWezXzpzQI/AAAAAAAADZU/wWbM3H9oKBIaChj6Q0vgg8B-etASJTlVgCK4BGAYYCw/s1600/John.jpg” width=”800″ />
</a>
<span style=”position: relative;top: -37px;font-size: 26px;font-weight: bold;right: -5px;”> John</span>
</li>
<li>
<a href=”https://www.meersworld.net/search/label/Author-Olivia”>
<img alt=”” height=”612″ id=”Image1_img” src=”//1.bp.blogspot.com/-s8o8bsOz8M4/XIWfHPeBsQI/AAAAAAAADZo/6Ac7ednAzZMtHMBm4LIMvnfoRvF9CUx1QCK4BGAYYCw/s1600/Olivia.jpg” width=”612″ />
</a>
<span style=”position: relative;top: -37px;font-size: 26px;font-weight: bold;right: -5px;”> Olivia</span>
</li>
</ul>
</div>
——————————————————————————-

• Here is your list of authors with thumbnails.
• You can click on both thumbnail or name.

• If you like this post then don’t forget to share with other people. Share your feedback in the comments section below. Get Access to all the tutorials of Blogger.