Add Icons to Post Footer Elements in Blogger

Post Footer Elements  : 

The post footer elements are displayed below every posts in Blogger. The items like posted by author name, labels, quick edit, Location and default share buttons are the post footer elements. These elements are displaying as they set in Post Page Options. Many more post default footer elements are there in Blogger. Generally the post footer elements have no icons. But we can manually add icons to any post footer elements.

How to add icons to post footer elements in Blogger blog : 

We can add icons to posted by, labels, comments, email this post and to any of the post footer elements in your Blogger blog. In this post I'm giving the simple method to add the an icon to posted by author name element in Blogger blog. Like this you can add the icons to any post footer elements in your Blogger.

Follow below steps to add a icon to posted by post footer element in Blogger

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Template

Step 3 : Click on Edit HTML

Step 4 : Search .post-footer {
Add below line after .post-footer {
line-height: 16px;

Again add below code after closing tag (}) of the  .post-footer {  section 

.post-author {
background: url("your icon url") left no-repeat;
background-size: 50px;
padding: 2px 0px 0px 50px;

Replace  your icon url  with icon url in the above code
To increase and decrease the size of the image adjust the value in background-size: 50px;

Step 5 : Click on Save template.

Now your added icon will appear before posted by element. Using this method you can easily add icons to any post footer elements in your Blogger blog.

No comments:

Post a Comment