HTML edition works for all the pages of your website. But sometimes, you want to embed your code on a specific page, not all pages. After reading this guide, you can embed custom HTML code page by page. What is a Head HTML Code Block?
HTML code block means a code block with language type of HTML like below.
<head></head>
<body></body>
HTML
복사
If you put the HTML code block at the very top of the page(just below the page title, without spaces). We treat the head HTML code block as a special block and applies that code to the page.
We do these,
1.
It is removed on Oopy. Readers won't see head HTML code block at all.
2.
The code inside head HTML code block actually is implemented on this page.
In short, you can write any HTML code block and put it on the top of the page you want, then it will be applied.
Check out this video for more detail
This page also contains head HTML code block. At the bottom of the page, you can find out a custom button. This button is described in head HTML code block like below.
<head>
<style>.cta{position: fixed; bottom: 16px; left: 0; right: 0; margin: 0 auto; display: flex; align-self: center; align-items: center; justify-content: center; width: 88%; max-width: 708px; height: 48px; background-color: powderblue; color: #0d0d0d; z-index: 999999999; text-decoration: none; border-radius: 8px; font-weight: bold; font-size: 16px; transition: 300ms; -webkit-box-shadow: 0px 0px 4px 2px rgba(55, 53, 47, 0.4); -moz-box-shadow: 0px 0px 4px 2px rgba(55, 53, 47, 0.4); box-shadow: 0px 0px 4px 2px rgba(55, 53, 47, 0.4); font-family: 'inter', sans-serif;cursor: pointer;}.cta:hover{filter: brightness(88%);}</style>
<script>
function handleClick() {
window.alert("Hi!");
}
</script>
</head>
<body>
<div class="cta" onclick='handleClick()'>I'm button!</div>
</body>
HTML
복사
Tips
You can minify HTML code to a single line at the link below.