Share this comment
To add a search option on your site, you will want to take the code from pagedart.com/blog/how-t… and replace the single site search with a multiple site search:
const site1 = 'daviddfriedman.com'
const site2 = 'daviddfriedman.blogspot…'
const site3 = 'daviddfriedman.substack…'
const url = 'google.com/search' + site1 + '+OR+site%3A' + site2 + '+OR+site%3A' + site3 + '+' + q.value;
To add a search option on your site, you will want to take the code from https://pagedart.com/blog/how-to-add-a-search-bar-in-html/ and replace the single site search with a multiple site search:
const site1 = 'http://www.daviddfriedman.com/'
const site2 = 'https://daviddfriedman.blogspot.com/'
const site3 = 'https://daviddfriedman.substack.com/'
const url = 'https://www.google.com/search?q=site%3A' + site1 + '+OR+site%3A' + site2 + '+OR+site%3A' + site3 + '+' + q.value;
Thanks. When I knew how to compose HTML it was a much simpler language. I tried following your instructions but when I opened the page in Firefox and tried to search what I got appeared to be a google search of the web, not of my particular documents. Is it obvious from that what I did wrong? Here is my code:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Search Bar Demo</title>
<style>
body {
background-color: #3745c2;
margin: 200px 40%;
}
form {
background-color: #4654e1;
width: 300px;
height: 44px;
border-radius: 5px;
display:flex;
flex-direction:row;
align-items:center;
}
input {
all: unset;
font: 16px system-ui;
color: #fff;
height: 100%;
width: 100%;
padding: 6px 10px;
}
::placeholder {
color: #fff;
opacity: 0.7;
}
svg {
color: #fff;
fill: currentColor;
width: 24px;
height: 24px;
padding: 10px;
}
button {
all: unset;
cursor: pointer;
width: 44px;
height: 44px;
}
</style>
</head>
<body>
<form role="search" id="form"> <input id="query" name="q"
placeholder="Search..." aria-label="Search through site content"
type="search"> <button>
<svg viewBox="0 0 1024 1024"><path class="path1" d="M848.471
928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412
55.059-171.294 0-312-140.706-312-312s140.706-312
312-312c171.294 0 312 140.706 312 312 0 67.294-24.471
128.471-55.059 177.412l263.059 263.059-79.529
79.529zM189.623 408.078c0 121.364 97.091 218.455 218.455
218.455s218.455-97.091
218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.364
0-218.455 97.091-218.455 218.455z"></path></svg> </button>
</form>
<script>
const f = document.getElementById('form');
const q = document.getElementById('query');
const google = 'https://www.google.com/search?q=site%3A+';
const site = 'pagedart.com';
const site1 = 'http://www.daviddfriedman.com/'
const site2 = 'https://daviddfriedman.blogspot.com/'
const site3 = 'https://daviddfriedman.substack.com/'
const url = 'https://www.google.com/search?q=site%3A' + site1 + '+OR+site%3A' + site2 + '+OR+site%3A' + site3 + '+' + q.value;
function submitted(event) {
event.preventDefault();
const url = google + site + '+' + q.value;
const win = window.open(url, '_blank');
win.focus();
}
f.addEventListener('submit', submitted);
</script>
</body>
</html>
There is a simpler way here:
https://pagedart.com/blog/add-google-search-to-a-website/
It also uses javascript.
The idea is to get a string like this into the browser address:
"https://www.google.com/sear
ch?q=site:http://www.daviddfriedman.com/+OR+site:https://daviddfriedman.blogspot.com/+OR+site:https://daviddfriedman.substack.com/+Altemeyer"
But where "Altemeyer" is replaced by the text that was entered in the search box.
Edit: substack may have mangled the search link. Copy/paste instead of click.