Friday, September 18, 2020
Home Blogging Tips & Tweaks How to Add Author's Profile Picture Beside Blogger Post Title

How to Add Author’s Profile Picture Beside Blogger Post Title

Making your blog page look very professional and captivating is one among the many things that will keep your blog visitors coming back to the blog. It is very well known that users tend to respect bloggers who happen to spend more time making their blog page look very user friendly and eye catching compared to those who just keep writing posts (even with interesting posts, a blogs bounce rate may keep increasing if the blog’s page is not user friendly and eye catching).

There are so many features that you can add to your blog to make it look very professional. One of such is the addition of a profile picture next to the title of every post you create which gives you as the blog owner more personal feel and ownership of the contents in the blog. To add it to your blog page is not difficult at because all you need to do is get a suitable picture of 40 X 40 pixels and upload it to any image hosting website of your choice (How to Host and Store Images on Blogger), and then get its URL which you will later need. Once you must have uploaded the picture to a good image hosting website and gotten its URL, then proceed to add it besides your posts title by following the step by step guide below;

  • Login to your Blogger Dashboard.
  • Navigate to Template >>> Edit HTML.
  • Click anywhere inside the Edit HTML box and search for the code below using Ctrl + F.
.post h3 {

color: #04BDFA;

font-size: 20px;

font-family: Arial, sans-serif;;

font-weight: normal;

margin: 0px;

padding: 0px 10px 0 47px;

}

OR

.post h2 {

color: #04BDFA;

font-size: 20px;

font-family: Arial, sans-serif;;

font-weight: normal;

margin: 0px;

padding: 0px 10px 0 47px;

}
  • Now depending on the one you find, replace any of them with the below code.
post h3 {

background:url(PROFILE PIC URL LINK) no-repeat top

left;

color: #04BDFA;

font-size: 20px;

font-family: Arial, sans-serif;;

font-weight: normal; height:45px;

margin: 0px;

padding: 0px 10px 0 47px;

line-height:1.1em;

}

OR

post h2 {

background:url(PROFILE PIC URL LINK) no-repeat top left;

color: #04BDFA;

font-size: 20px;

font-family: Arial, sans-serif;;

font-weight: normal; height:45px;

margin: 0px;

padding: 0px 10px 0 47px;

line-height:1.1em;

}
  • Replace PROFILE PIC URL LINK with the URL of the 40px by 40px picture you uploaded to an image hosting website. By default, the color that your posts title will change to when this above code is added will be red. To change it back to your own, simply replace #04BDFA; with the HEX color code of your blog post title.
  • Finally click on Save Template to apply the changes.

Hope you like it? All we ask in return is that you like and follow us on Social Medias and also share this posts with friends and family by clicking on any of the social media buttons below the post. Enjoy!

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

List of All JavaScript Arithmetic Operators With Examples

JavaScript offers several operators to help us work with numbers. All these operators are binary operators, which means they operate on two operands. The operands...

How to Find a Website’s RSS Feed’s URL

Having access to the RSS feed of a website gives you the opportunity to stay up-to-date on everything that website publishes. Whether that’s a...

Laravel: String data, right truncated: 1406 Data too long for column (SOLVED)

I was working on a project today when i ran into the error message "String data, right truncated: 1406 Data too long for column...

How to Enable or Disable Chrome’s Autofill on Android Devices

Storing your login details and other information in Chrome and/or your Google Account isn’t as secure as using an encrypted password manager, but it’s...

Recent Comments