-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathgoogle.cse.html
219 lines (219 loc) · 6.87 KB
/
google.cse.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Google Custom Search</title>
<link href="favicon.ico" rel="shortcut icon">
<style>
* {
margin:0;
padding:0;
list-style:none;
font:inherit;
background:none;
border:0;
outline:0;
color:inherit;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
html {font:normal normal 18px/1.25 serif}
body {
background:#fff;
color:#000;
padding:5%;
margin:0 auto;
max-width:1000px;
}
h1,h2,h3,h4,h5,h6,p,ul {margin:0 0 1rem}
h1 {font-size:200%}
h2 {font-size:120%}
h3 {font-size:110%}
blockquote {
font-size:110%;
font-style:italic;
}
a {
color:#00f;
text-decoration:none;
}
header {margin:0 0 5%}
nav {margin:0 0 5%}
nav ul {overflow:hidden}
nav li {
float:left;
margin:0 1em 0 0;
}
nav li:last-child {margin-right:0}
main::after {
content:"";
display:table;
clear:both;
}
article {
width:65%;
float:left;
}
aside,
form {
width:30%;
float:right;
}
form a {
display:block;
margin-top:.5em;
}
button,
input {
border:1px solid;
padding:.25em .5em;
display:inline-block;
vertical-align:middle;
}
input {width:8em}
button {
background:#000;
color:#fff;
border-color:transparent;
cursor:pointer;
}
footer {margin:5% 0 0}
@media (max-width:850px) {
article,
aside,
form {
float:none;
width:auto;
}
form {margin-bottom:5%}
}
</style>
<!-- Begin CSS -->
<style>
#cse-container .gsc-control-cse {
margin:0;
padding:0;
border:0;
font-family:inherit !important;
}
#cse-container .gsc-control-cse * {font-family:inherit !important}
#cse-container .gsc-wrapper {margin:0 0 5%}
</style>
<!-- End CSS -->
</head>
<body>
<header>
<h1>Site Title</h1>
<p>Site description.</p>
</header>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Archive</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
<!-- Begin HTML Form -->
<form id="cse-search" method="get">
<p>
<input name="q" type="text">
<button type="submit">Search</button>
<a id="cse-x" href="" style="display:none;">Clear Searches</a>
</p>
</form>
<!-- End HTML Form -->
<main>
<article>
<!-- Begin HTML -->
<div id="cse-container" style="display:none;">
<div
class="gcse-searchresults-only"
data-gname="cse-search-results"
data-enableImageSearch="false"
data-noResultsString="No results."
></div>
</div>
<!-- End HTML -->
<h2>Longfellow’s Popular Appeal</h2>
<blockquote>
<p>The popularity of Longfellow’s poems results from his stress on the values of the people.</p>
</blockquote>
<p>Henry Wadsworth Longfellow (1807–1882) was perhaps the best-known American poet of the nineteenth century. His clear writing style and emphasis on the prevalent values of the period made him popular with the general public if not always with the critics. He was particularly recognized for his longer narrative poems <em>Evangeline</em>, <em>The Song of Hiawatha</em>, and <em>The Courtship of Miles Standish</em>, in which he told stories from American history in terms of the values of the time.</p>
<p><em>Evangeline</em> was set during the French and Indian war (1754–1763), when the British forced French settlers from Nova Scotia; two lovers, Gabriel and Evangeline, were separated by the sentimental, undying love, <em>Evangeline</em> was immensely popular with the public.</p>
<p>In <em>The Song of Hiawatha</em>, Longfellow depicted the nobile life of the American Indian through the story of the brave Hiawatha and his beloved wife Minehaha. The tear-inspiring poem follows Hiawatha through the tragedies and triumphs of life, ending with the death of Minehaha and Hiawatha’s departure into the sunset in his canoe.</p>
<p><em>The Courtship of Miles Standish</em> takes place during the early period of settlement of New England, a period which was viewed as a time of honor and romance. In this poem centered around a love triangle, Miles Standish asks his friend John Alden to propose to Priscilla Mullins for him; John Alden ends up marrying Priscilla Mullins himself, and it takes time for his friendship with Miles Standish to recover. As with Longfellow’s other narrative poems, the emphasis on high ideals and romance made the poem extremely popular.</p>
</article>
<aside>
<h3>Widget 1</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h3>Widget 2</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</aside>
</main>
<footer>
<p>© 2018 <a href="">Site Title</a></p>
</footer>
<!-- Begin JS -->
<script>
(function() {
var cx = 'partner-pub-4884309229437815:4734643671';
var gcse = document.createElement('script');
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>
<script>
function $(el) {
return document.getElementById(el);
}
var form = $('cse-search'),
x = $('cse-x'),
container = $('cse-container'),
search, query;
// `<form>`
form.addEventListener("submit", function(e) {
search = google.search.cse.element.getElement('cse-search-results');
query = this.q.value;
container.style.display = query ? "" : 'none';
x.style.display = query ? "" : 'none';
if (query) {
search.execute(query);
} else {
search.clearAllResults();
}
e.preventDefault();
}, false);
// `<input name="q">`
form.q.addEventListener("keyup", function(e) {
if (search && !this.value) {
search.clearAllResults();
container.style.display = 'none';
x.style.display = 'none';
}
});
// `<a>Clear Searches</a>`
x.addEventListener("click", function(e) {
search && search.clearAllResults();
container.style.display = 'none';
this.style.display = 'none';
form.q.value = "";
form.q.focus();
e.preventDefault();
}, false);
</script>
<!-- End JS -->
</body>
</html>