# Como adicionar HTML personalizado após "post\_1" (parte 2)

**URL:** <https://meta.discourse.org/t/how-to-add-customer-html-after-post-1-part2/202619>\
**Category:** Support\
**Created:** [Setembro 4, 2021, 3:30pm UTC](https://meta.discourse.org/t/how-to-add-customer-html-after-post-1-part2/202619 "2021-09-04T15:30:09Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [Setembro 5, 2021, 5:35pm UTC](https://meta.discourse.org/t/how-to-add-customer-html-after-post-1-part2/202619/4 "2021-09-05T17:35:32Z")

</div>

Não, você precisa adicionar isso às seções de CSS.

**Então, tudo ficará junto.**

Comum / Cabeçalho ⬇

```plaintext
<script type="text/discourse-plugin" version="0.8">
api.decorateWidget("post:after", helper => {
  const firstPost = helper.attrs.firstPost;
  const h = helper.h;
  if (firstPost) {
    return h("div#custom-ad", [
      h(
        "a.custom-ad-link",
        { href: "example.com" },
        h("img", { src: "https://picsum.photos/id/74/750/90" })
      )
    ]);
  }
});
</script>

```

 ![Screenshot 2021-09-05 at 19.41.25](https://global.discourse-cdn.com/meta/original/3X/e/e/ee4d4815f0747a0356d166544805bccdc8215e5e.png)

* * *

Comum / CSS ⬇

```plaintext
#custom-ad {
  .custom-ad-link {
    img {
      width: 100%;
    }
  }
}

```

 ![Screenshot 2021-09-05 at 19.33.16](https://global.discourse-cdn.com/meta/original/3X/e/3/e3e7ebd180c606eedfd79145f56b8a78cce88053.png)

* * *

Desktop / CSS ⬇

```plaintext
#custom-ad {
  max-width: calc(45px + 690px + (11px * 2));
}

```

 ![Screenshot 2021-09-05 at 19.33.34](https://global.discourse-cdn.com/meta/original/3X/d/d/dd2dc2fe7a9a1a45d76d28df5a17a28de54f5b94.png)

---

_[View the full topic](https://meta.discourse.org/t/how-to-add-customer-html-after-post-1-part2/202619)._