- Code -

Here are the code for all of the custom embeds I used! Putting them here mainly for ease of access for myself. Feel free to use them ^-^

Guestbook

Guestbook made with https://www.cbox.ws/

Audio player

Stamps

<br>

</div>

Scrolling images

</marquee>

Button (with border & open link in new tab on click)

<html>

<head>

<style>

.button {

display: inline-block;

padding: 10px 25px;

font-size: 16px;

font-family: courier;

font-weight: bold;

cursor: pointer;

text-align: center;

text-decoration: none;

outline: none;

color: #1F44C6;

background-color: #ffffff;

border: 5px solid;

border-radius: 20px;

border-color: #68B3FF;

box-shadow: 0 12px #1F44C6;

}

.button:hover {

background-color: #f9f9f9

}

.button:active {

background-color: #f9f9f9;

box-shadow: 0 7px #1F44C6;

transform: translateY(5px);

}

</style>

</head>

<body>

<button class="button" onclick="window.open('LINK_HERE')">BUTTON_TEXT</button>

</div>

</body>

</html>

Multiple buttons (no border, hover effect & open link in new tab on click)

<html>

<head>

<style>

.button {

display: inline-block;

padding: 10px 25px;

font-size: 16px;

font-family: courier;

font-weight: bold;

cursor: pointer;

text-align: center;

text-decoration: none;

outline: none;

color: #1F44C6;

background-color: #ffffff;

border: none;

border-radius: 15px;

box-shadow: 0 8px #1F44C6;

}

.button:hover {

background-color: #f9f9f9

}

.button:active {

background-color: #f9f9f9;

box-shadow: 0 4px #1F44C6;

transform: translateY(4px);

}

</style>

</head>

<body>

<div style="padding-bottom: 25px;"><button class="button" onclick="openLink(0)">FIRST_BUTTON_TEXT</button></div>

<div style="padding-bottom: 25px;"><button class="button" onclick="openLink(1)">SECOND_BUTTON_TEXT</button></div>

<div style="padding-bottom: 0px;"><button class="button" onclick="openLink(2)">THIRD_BUTTON_TEXT</button></div>

var pageLinks = ["FIRST_BUTTON_LINK", "SECOND_BUTTON_LINK", "THIRD_BUTTON_LINK"]

function openLink(num) {

window.open(pageLinks[num]);

}

</script>

</body>

</html>

Multiple buttons (with border, hover effect & open link in new tab on click)

<html>

<head>

<style>

.button {

display: inline-block;

padding: 10px 25px;

font-size: 16px;

font-family: courier;

font-weight: bold;

cursor: pointer;

text-align: center;

text-decoration: none;

outline: none;

color: #1F44C6;

background-color: #ffffff;

border: 5px solid;

border-radius: 20px;

border-color: #68B3FF;

box-shadow: 0 12px #1F44C6;

}

.button:hover {

background-color: #f9f9f9

}

.button:active {

background-color: #f3f3f3;

box-shadow: 0 7px #1F44C6;

transform: translateY(5px);

}

</style>

</head>

<body>

<div style="padding-bottom: 25px;"><button class="button" onclick="openLink(0)">FIRST_BUTTON_TEXT</button></div>

<div style="padding-bottom: 25px;"><button class="button" onclick="openLink(1)">SECOND_BUTTON_TEXT</button></div>

<div style="padding-bottom: 0px;"><button class="button" onclick="openLink(2)">THIRD_BUTTON_TEXT</button></div>

var pageLinks = ["FIRST_BUTTON_LINK", "SECOND_BUTTON_LINK", "THIRD_BUTTON_LINK"]

function openLink(num) {

window.open(pageLinks[num]);

}

</script>

</body>

</html>

Zoom in image on hover & open link in new tab on click

<html>

<head>

<style>

body {

text-align: center;

}

.image-container img {

transition: transform 0.2s ease-in-out;

}

.image-container img:hover {

transform: scale(1.1);

}

</style>

</head>

<body>

</a>

</div>

</body>

</html>

Rotate/tilt image on hover

<html>

<head>

<style>

img {

transition: transform 0.3s ease;

}

img:hover {

transform: rotate(6deg);

}

</style>

</head>

<body>

</body>

</html>

Random image with text underneath & clickable link

<html>

<head>

var imageUrls = ["LINK_HERE", "LINK_HERE"];

var imageLinks = ["LINK_HERE", "LINK_HERE"];

var imageText = ["LINK_HERE", "LINK_HERE"];

function getImageHtmlCode() {

var dataIndex = Math.floor(Math.random() * imageUrls.length);

var img = '<div style="text-align:center">';

img += '<a href=\"' + imageLinks[dataIndex] + '"><img src="' + imageUrls[dataIndex] + '\" style="object-fit:cover; width:280px; height:280px; border:5px solid #68B3FF; border-radius: 10px;" /a>';

img += '<br><b><font size="4" face="courier">' + imageText[dataIndex] + '</font></b></div>';

return img;

}

</script>

</head>

<body>

document.write(getImageHtmlCode());

</script>

</body>

</html>

Scrolling textbox

<!DOCTYPE html>

<html>

<head>

<style>

.outerContainer{

background-color: #ffffff;

border: 5px solid #68B3FF;

border-radius: 15px;

border-color: #68B3FF;

overflow:hidden;

}

.innerContainer{

height: 200px;

padding-top:10px;

padding-left:10px;

padding-bottom:10px;

scrollbar-color: #1F44C6 #ffffff;

overflow: auto;

}

.title{

font-family: courier;

font-size: 15px;

font-weight: bold;

color: #1F44C6;

overflow:auto;

}

.normal{

font-family: courier;

font-size: 12px;

font-weight: bold;

margin-bottom: 10px;

}

</style>

</head>

<body>

</div>

</body>

</html>

Change image on hover with smooth transition

<html>

<head>

<style>

.image-hover {

width: 350px;

height: 350px;

background-image: url('VISIBLE_IMG_LINK_HERE');

background-size: cover;

transition: background-image 0.3s ease-in-out;

}

.image-hover:hover {

background-image: url('HOVER_IMG_LINK_HERE');

]

</style>

</head>

<body>

</body>

</html>

Change image on hover (no transition)

<html>

<head>

<style>

.hover_image:hover {

text-decoration: none

}

.hide {

display: none

}

.hover_image:hover img:first-child {

display: none

}

.hover_image:hover img:last-child {

display: inline-block

}

</style>

</head>

<body>

</a>

</body>

</html>

Code Troubles :(

All I wanted was to embed a button/image that, upon clicking it, will open a link in the same tab. However...

When you insert a custom embed, the embed element appears to function as its own "window." This means that when you use things like target="_self", window.open, or location.href within the embed, they DO NOT WORK as intended :(

Instead of opening the link in the same tab as the google site page, it tries to open the link within the embed window.

With the <a> tag, target="_blank" works normally, target="_self" runs into the problem described above, while target="_parent" and target="_top" produces no response.

I've not been able to find a workaround, if anyone figures out how to do it please let me know o7