Connect with us

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

How To Filter Blogger Posts By Authors

Blogger

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.
How To Filter Blogger Posts By Authors | List Of Authors Widget 1

 

01. Show Authors In A List

  • Click Layout.
  • Click Add a Gadget.
How To Filter Blogger Posts By Authors | List Of Authors Widget 2
  • Add Pages Widget.
How To Filter Blogger Posts By Authors | List Of Authors Widget 3
  • Enter some title like Authors List.
  • Untick all other Pages.
  • Click “+ Add external link”.
  • A pop-up will appear when you click the link.
How To Filter Blogger Posts By Authors | List Of Authors Widget 4
  • 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.
How To Filter Blogger Posts By Authors | List Of Authors Widget 5
  • Go back to that Pop Up, and Enter the Name of author and Paste the URL.
How To Filter Blogger Posts By Authors | List Of Authors Widget 6
  • Now one by one, add all the authors like that.
  • Here I have added these three authors.
How To Filter Blogger Posts By Authors | List Of Authors Widget 7
  • 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.
How To Filter Blogger Posts By Authors | List Of Authors Widget 8

 

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.
How To Filter Blogger Posts By Authors | List Of Authors Widget 9
  • Click “Image +”.
How To Filter Blogger Posts By Authors | List Of Authors Widget 10
  • Now in the “Link” textbox paste the author link.
  • Click the “Browse” to upload the image of the author from your computer.
How To Filter Blogger Posts By Authors | List Of Authors Widget 11
  • Once the image is uploaded, Click Save.
How To Filter Blogger Posts By Authors | List Of Authors Widget 12
  • 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.
How To Filter Blogger Posts By Authors | List Of Authors Widget 13
  • 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”>

How To Filter Blogger Posts By Authors | List Of Authors Widget 14
  • Open the Notepad and paste there.
  • You can see that the code between the tags <a> </a> has been copied.
How To Filter Blogger Posts By Authors | List Of Authors Widget 15
  • Now go to Layout.
  • Click Edit the image that you just uploaded
  • Click Remove. We don’t need this image now.
How To Filter Blogger Posts By Authors | List Of Authors Widget 16
  • 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.
How To Filter Blogger Posts By Authors | List Of Authors Widget 17
  • Now go to Layout.
  • Click Add a Gadget.
  • Click HTML/JavaScript.
How To Filter Blogger Posts By Authors | List Of Authors Widget 18
  • 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>
——————————————————————————-

How To Filter Blogger Posts By Authors | List Of Authors Widget 19
  • Here is your list of authors with thumbnails.
  • You can click on both thumbnail or name.
How To Filter Blogger Posts By Authors | List Of Authors Widget 20
  • 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.

 

Blogger Templates

 

Recommended Posts

 

Meer Basit is the founder of Meer’s World. He’s been running the show since launching the blog back in 2018. By background he is a computer scientist. Primarily, he creates content around blogging (WordPress, Blogger, Tumblr), SEO, affiliate programs, earn-online, reviews, eCommerce, & technology. He has got years of professional experience in web programming, computer programming, databases, data warehousing, & transcription. In general, he likes traveling, gardening, watching movies, is a passionate cricketer, creative writer, and a GSD lover.

Click to comment

Leave a Reply

Your email address will not be published.

More in Blogger

To Top