Connect with us

How To Increase/Change Author’s Thumbnail Size In Blogger

How To Increase/Change Author’s Thumbnail Size In Blogger

Blogger

How To Increase/Change Author’s Thumbnail Size In Blogger

If you enable Author Profile on Blogger it is displayed at bottom of every post which includes a thumbnail & bio. Some bloggers want to customize the author image because they think that the default size is too small. So this tutorial is for all those who want to customize their author thumbnail.

If you haven’t already enabled the Author Profile below posts then first read this: Enable Author Profile. If you have enabled the “Author Profile below posts” then follow the steps to increase or customize the size of author’s image.

Note: You can jump to the Step 4 directly by skipping first 3 Steps.

 

Step 1:

Press F12 to open Firebug on your browser. If it is not installed on your browser, please add Firebug plugin to your browser. Firebug is used by developers for live debugging, editing the HTML and CSS.

The purpose of using firebug here is to identify the Classes and Ids inside which we have to put our code. For your information Class start with DOT(.) & Id start with (#) in CSS.

If you don’t know how to use the Firebug, please see some video demo. Left side shows the HTML code where as the right side code is your style code.

  • Press F12 to open Firebug.
  • Click the arrow at your bottom left.
How To Increase/Change Author's Thumbnail Size In Blogger 1

 

Step 2:

  • Click on image.
  • Once you will click on image you will see the HTML code and style code.
How To Increase/Change Author's Thumbnail Size In Blogger 2

 

Step 3:

  • You can see that there is a class .auhtor-profile img, where you have to insert the code.
  • Write { width: 72px; }
  • You can set width of your own choice.
  • If you want to make your thumbnail round add this code { border-radius: 50%; }
  • Through Firebug we have found the Class and also adjusted the width of image.
  • Now it is time to save these changes permanently.
How To Increase/Change Author's Thumbnail Size In Blogger 3

 

Step 4:

  • Click Theme.
  • Click Customize.
How To Increase/Change Author's Thumbnail Size In Blogger 4

 

Step 5:

  • Click Advanced.
How To Increase/Change Author's Thumbnail Size In Blogger 6
  • Click “Body”.
How To Increase/Change Author's Thumbnail Size In Blogger 7
  • Click “Add CSS”.
How To Increase/Change Author's Thumbnail Size In Blogger 8

Step 6:

  • Here is the code that you have to paste.
  • You can increase and decrease the width of image.
  • If you don’t want your thumbnail round, remove the second line.
——————————————–
.author-profile img
{
width: 72px;
border-radius: 50%;
}
———————————————
How To Increase/Change Author's Thumbnail Size In Blogger 9

 

Blogger Templates

 

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

 

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. Required fields are marked *

More in Blogger

To Top