Member Avatar for Marsh Mellow

Hey guys, Im very new to editing HTML and venturing into writing code.
I wanted to ask the community here for a little help, adding an icon which becomes included in each post I make on blogger.

Heres an image of how the code translates on my blog currently; and how I would like for the appearance after a code mod.

I want to get that litle leaf to show up, on the post body when ever I post. Not sure how simple it is to do this?
It's just for aesthetics but would make all the differnce to the blog format.
would really appreciate any help guys, I have the little leaf icon url uploaded, just have no clue where to post the code or what code to install into the template.

cheers, Milton

Edited by Marsh Mellow because: img url
  • 2 Contributors
  • 3 Replies
  • 92 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by Marsh Mellow

Dani AI

Generated

Nice progress — already proved the image works and 's HTML hint was spot on. To make the leaf appear automatically in every post and to remove the template bounding box, add a small CSS rule to your theme instead of inserting the image by hand each time. Two reliable approaches follow; pick the one that fits your template.

Common background-image approach (applies the icon to the post container):

.post-body {
  background-image: url('URL_OF_YOUR_LEAF_IMAGE');
  background-repeat: no-repeat;
  background-position: 10px 10px;
  background-size: 32px 32px;
  padding-left: 48px;
}

Pseudo-element approach (keeps markup clean and lets you control placement):

.post-body:before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url('URL_OF_YOUR_LEAF_IMAGE') no-repeat center/contain;
  margin-right: 8px;
  vertical-align: middle;
}

If the theme adds a visible box around inserted images, override those rules specifically:

.post-body img[src*="leaf"] {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

Replace selectors (.post-body) with whatever your template uses (use Inspect Element to confirm). Backup the theme first, then paste the CSS into the theme editor or the custom CSS area. Clear caches and test desktop and mobile; tweak background-position, background-size, or add a media query for small screens. Use a transparent PNG for best visual results.

Recommended Answers

All 3 Replies

Member Avatar for Dani

Umm ... do you mean HTML? :)

You can make an image with <img src="" alt="Image Alternate Text" />

You need to find out where the right place in the template files is ... that's not something anyone can help you with, without seeing what you're seeing. Are you using Wordpress??

Member Avatar for Marsh Mellow

Hi Dani, yeh HTML, cant believe that mistake. *amended first post.

Im using blogspot. Its a free template which I downloaded and have been adding some alterations too. Just background colours and deleting a few unwanted widgets etc.

If I can paste anything here to help locate where I should be adding the code please let me know, It would be awesome to see this work ;v;

Edited by Marsh Mellow
Member Avatar for Marsh Mellow

hey, just thought Id add an update. Dani that line of text was really helpful! I managed to get the image to show up: with the bounding box but thats the theme of the template for now, going to try and remove that for this image some how.

I ended up using a mix of firefox Inspect elment tools, and combination of finding the right widget line, in the blogger HTML editor. I guess it was a fluke but thanks for the time to reply Dani:D

cheers, Milton.

Edited by Marsh Mellow
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.