Search Bar 🔎

Credits to MA Gang

How to setup:

Paste in the code
Go down to where the code

const url = `https://sites.google.com/search/YOUR-SITE/?query=${encodeURIComponent(query)}`;

Replace "YOUR-SITE" with your site url.
Replace the "Your Site Name" for the search with you site name.

Preview

Code :

<head>

<style>

* {

box-sizing: border-box;

}

body {

margin: 0;

padding: 0;

background: transparent;

font-family: 'Pixelify Sans', sans-serif;

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

color: white;

user-select: none;

}

.search-container {

width: 90%;

max-width: 720px;

padding: 18px 28px;

border-radius: 50px;

background: rgba(255, 255, 255, 0.05);

backdrop-filter: blur(24px);

border: 2px solid black;

display: flex;

align-items: center;

box-shadow:

0 0 20px black,

inset 0 0 15px black;

transition: box-shadow 0.4s ease, border-color 0.4s ease;

animation: glowPulse 2s infinite alternate;

}

@keyframes glowPulse {

0% {

box-shadow:

0 0 15px black,

inset 0 0 10px black;

}

100% {

box-shadow:

0 0 35px black,

inset 0 0 25px black;

}

.search-container:hover {

border-color: white;

box-shadow:

0 0 40px black,

inset 0 0 30px black;

}

.search-icon {

width: 30px;

height: 30px;

cursor: pointer;

filter:

drop-shadow(0 0 8px black) drop-shadow(0 0 15px black);

transition: transform 0.3s ease, filter 0.3s ease;

}

.search-icon:hover {

transform: scale(1.15);

filter:

drop-shadow(0 0 12px black) drop-shadow(0 0 25px black);

}

.search-input {

flex: 1;

margin-left: 20px;

background: transparent;

border: none;

outline: none;

font-size: 22px;

font-family: 'Pixelify Sans', sans-serif;

color: white;

text-shadow:

0 0 6px black,

0 0 12px black;

transition: all 0.3s ease;

caret-color: black;

}

.search-input::placeholder {

color: rgba(255, 255, 255, 0.35);

text-shadow: 0 0 4px black;

}

@media (max-width: 480px) {

.search-container {

padding: 14px 22px;

}

.search-input {

font-size: 18px;

}

.search-icon {

width: 24px;

height: 24px;

}

</style>

function submitSearch() {

const query = document.getElementById("search-query-input").value.trim();

if (!query) return;

const url = `https://sites.google.com/search/YOUR-SITE/?query=${encodeURIComponent(query)}`;

window.open(url, "_blank");

}

function searchKeyPress(e) {

if (e.keyCode === 13) {

document.getElementById("search-icon").click();

return false;

}

</script>

</head>

<body>

</div>

</body>

</html>