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 made with https://www.cbox.ws/
<iframe src="" width="480" height="250" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto" style="border:5px solid #6ab4ff; border-radius: 10px; width: 480; overflow: hidden;"></iframe>
<div align="center" style="color:#ffffff; font-family:courier; font-size:14px; font-weight:bold;"><audio class="btn" style="background:#6ab4ff; padding:4px; width:320px; height:30px; border-radius:40px;" controls=""><source src="LINK_HERE"></audio><br>TEXT</div>
<div align="center">
<img src="LINK_HERE">
<img src="LINK_HERE">
<img src="LINK_HERE">
<img src="LINK_HERE">
<img src="LINK_HERE">
<img src="LINK_HERE">
<img src="LINK_HERE">
<img src="LINK_HERE">
<img src="LINK_HERE">
<br>
</div>
<marquee scrolldelay="70">
<img src="LINK_HERE">
<img src="LINK_HERE">
</marquee>
<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>
<div style="text-align:center">
<button class="button" onclick="window.open('LINK_HERE')">BUTTON_TEXT</button>
</div>
</body>
</html>
<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>
<script>
var pageLinks = ["FIRST_BUTTON_LINK", "SECOND_BUTTON_LINK", "THIRD_BUTTON_LINK"]
function openLink(num) {
window.open(pageLinks[num]);
}
</script>
</body>
</html>
<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>
<script>
var pageLinks = ["FIRST_BUTTON_LINK", "SECOND_BUTTON_LINK", "THIRD_BUTTON_LINK"]
function openLink(num) {
window.open(pageLinks[num]);
}
</script>
</body>
</html>
<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>
<div class="image-container">
<a href="OPEN_LINK" target=_blank">
<img src="IMAGE_LINK_HERE" width="250px">
</a>
</div>
</body>
</html>
<html>
<head>
<style>
img {
transition: transform 0.3s ease;
}
img:hover {
transform: rotate(6deg);
}
</style>
</head>
<body>
<div style="text-align:center"><img src="LINK_HERE" width="380" class="rotateImg"></div>
</body>
</html>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
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>
<script type="text/javascript">
document.write(getImageHtmlCode());
</script>
</body>
</html>
<!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 class="outerContainer">
<div class="innerContainer">
<div class="title">DATE<br></div>
<div class="normal">TEXT</div>
<div class="title">DATE<br></div>
<div class="normal">TEXT</div>
</div>
</div>
</body>
</html>
<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>
<div class="image-hover"></div>
</body>
</html>
<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 class="hover_image" href="#">
<!-- first visible image -->
<img src="LINK_HERE" width="350px">
<!-- hover visible image -->
<img src="LINK_HERE" width="350px" class="hide" />
</a>
</body>
</html>
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