Saturday, 3 March 2018
GOOGLE CUSTOM SEARCH BOX
------------------------------------------------------------------------------------------------------------------
GOOGLE CUSTOM SEARCH BOX
-------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------
Read More:
https://cse.google.co.uk/cse/create/new
------------------------------------------------------------------------------------------------------------------
STEP 1:
CLICK BELOW LINK
https://cse.google.co.uk/cse/create/new
STEP 2:
PASTE BLOG URL AND BLOG NAME
OR
YOU CAN ADD WEBSITE URL AND WEBSITE NAME
STEP 3:
CLICK CREATE BUTTON
STEP 4:
PRESS RECEIVE CODE BUTTON I U WANT TO ADD SEARCH BOX IN BLOG
OR
IF U WANT TO CHECK FOR LIVE VIEW
THEN PRESS PUBLIC URL BUTTON
------------------------------------------------------------------------------------------------------------------
RECEIVE CODE LOOK LIKE THIS:
Copy the following code, and paste it into a <div> element in your site's <body> section, where you want both the search box and the search results to appear.
Note: For the most cross-browser compatibility, it is recommended that your HTML pages use a supported doctype such as <!DOCTYPE html>. CSS hover effects require a supported doctype.
------------------------------------------------------------------------------------------------------------------
<html>
<head>
<title>my site</title>
...
<head>
<title>my site</title>
...
<head>
<body>
<div1>...</div1>
<div2>...</div2>
</body>
<div1>...</div1>
<script>
(function() {
var cx = '015978246030278567254:u9f_fcmkxz4';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
</body>
</html>
--------------------------------------------------------------------------
Put your HTML text here<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Folder Search Application</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 40px;
background-color: #f5f5f5;
}
.search-container {
max-width: 400px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
input[type="text"] {
width: 100%;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 15px;
font-size: 16px;
}
.folder-list {
list-style: none;
padding: 0;
margin: 0;
}
.folder-item {
padding: 10px;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
}
.folder-item:last-child {
border-bottom: none;
}
.folder-icon {
margin-right: 10px;
}
</style>
</head>
<body>
<div class="search-container">
<h2>Folder Search</h2>
<!-- Search input field -->
<input type="text" id="searchInput" onkeyup="filterFolders()" placeholder="Search folder names...">
<!-- List of folders to filter -->
<ul class="folder-list" id="folderList">
<li class="folder-item"><span class="folder-icon">📁</span>Documents</li>
<li class="folder-item"><span class="folder-icon">📁</span>Downloads</li>
<li class="folder-item"><span class="folder-icon">📁</span>Desktop Files</li>
<li class="folder-item"><span class="folder-icon">📁</span>Pictures</li>
<li class="folder-item"><span class="folder-icon">📁</span>Music</li>
<li class="folder-item"><span class="folder-icon">📁</span>Videos</li>
<li class="folder-item"><span class="folder-icon">📁</span>Project Source Code</li>
<li class="folder-item"><span class="folder-icon">📁</span>Finances 2026</li>
</ul>
</div>
<script>
function filterFolders() {
// Get search input value and convert to lowercase
const input = document.getElementById('searchInput');
const filter = input.value.toLowerCase();
// Get all folder list items
const ul = document.getElementById('folderList');
const li = ul.getElementsByTagName('li');
// Loop through all items and hide those that don't match the query
for (let i = 0; i < li.length; i++) {
const textValue = li[i].textContent || li[i].innerText;
if (textValue.toLowerCase().indexOf(filter) > -1) {
li[i].style.display = "m
} else {
li[i].style.display = "none";
}
}
}
</script>
</body>
</html>
===================================
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment