Issues:
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5 <!-- Global site tag (gtag.js) - Google Analytics -->
6 <script async src="https://www.googletagmanager.com/gtag/js?id=UA-72646173-3"></script>
7 <script>
8 window.dataLayer = window.dataLayer || [];
9 function gtag() { dataLayer.push(arguments); }
10 gtag('js', new Date());
11
12 gtag('config', 'UA-72646173-3');
13 </script>
14
15 <meta charset="utf-8">
16 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
17 <meta name="description" content="Google Custom Search enables you to create a search engine for your website. Here you'll find a nice tutorial on how to set it up.">
18 <meta name="author" content="Julian Kristian">
19
20 <title>Google Custom Search | Julian Kristian Web Design</title>
21
22 <!-- Bootstrap core CSS -->
23 <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
24
25 <!-- Custom styles for JK -->
26 <link href="css/jk_v1.css" rel="stylesheet">
27
28 <!-- OpenSearch-->
29 <link rel="search" type="application/opensearchdescription+xml" title="Search Julian Kristian" href="http://juliankristian.com.au/search.xml" />
30
31 <!-- favicon -->
32 <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
33 <link rel="icon" href="img/favicon.ico" type="image/x-icon">
34
35</head>
36
37<body>
38
39 <a class="skip-main" href="#main">Skip to main content</a>
40 <!-- Navigation -->
41 <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
42
43 <div class="container">
44
45 <!-- Logo -->
46 <div class="navbar-brand">
47 <div class="logo">
48 <a href="index.html"><img src="img/julian-kristian-web-design-logo.png" alt="Julian Kristian Web Design logo" width="149" height="70"></a>
49 </div>
50 </div>
51
52 <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
53 <span class="navbar-toggler-icon"></span>
54 </button>
55 <div class="collapse navbar-collapse" id="navbarResponsive">
56 <ul class="navbar-nav ml-auto">
57 <li class="nav-item">
58 <a class="nav-link" href="index.html">Home</a>
59 </li>
60 <li class="nav-item">
61 <a class="nav-link" href="services.html">Services</a>
62 </li>
63 <li class="nav-item">
64 <a class="nav-link" href="portfolio.html">Portfolio</a>
65 </li>
66 <li class="nav-item dropdown">
67 <a class="nav-link dropdown-toggle active" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
68 Findability
69 </a>
70 <div class="dropdown-menu" aria-labelledby="navbarDropdown">
71 <a class="dropdown-item" href="http://www.juliankristian.com.au/blog/">Findability Blog</a>
72 <a class="dropdown-item" href="seo-best-practices.html">SEO Best Practices</a>
73 <a class="dropdown-item active" href="google-cse.html">Research: Google Custom Search</a>
74 <a class="dropdown-item" href="findability-resources.html">Findability Resources</a>
75 <a class="dropdown-item" href="findability-vocabulary.html">Findability Vocabulary</a>
76 <a class="dropdown-item" href="about-this-site.html">About This Site</a>
77 </div>
78 </li>
79 <li class="nav-item">
80 <a class="nav-link" href="sitemap.html">Sitemap</a>
81 </li>
82 <li class="nav-item">
83 <a class="nav-link" href="contact.html">Contact</a>
84 </li>
85 </ul>
86
87 <!--Google custom search-->
88 <div>
89 <script async src="https://cse.google.com/cse.js?cx=011558783527147441916:78grkrmiyte"></script>
90 <div class="gcse-search"></div>
91 </div>
92 <!--End Google custom search-->
93
94 </div>
95 </div>
96 </nav>
97
98 <!-- Page Content -->
99 <div class="container">
100
101 <section>
102 <!-- Page Heading/Breadcrumbs -->
103 <h1 class="mt-4 mb-4">Google Custom Search</h1>
104
105 <ol class="breadcrumb">
106 <li class="breadcrumb-item">
107 <a class="font-color-blue" href="index.html">Home</a>
108 </li>
109 <li class="breadcrumb-item active">Google Custom Search</li>
110 </ol>
111 </section>
112
113 <!-- Intro Content -->
114 <section id="main">
115 <p>Google Custom Search enables you to create a search engine for your website, your blog, or a collection of websites. You can configure your search engine to search both web pages and images. You can fine-tune the ranking, customize the look and feel of the search results, and invite your friends or trusted users to help you build your custom search engine.</p>
116 <p>I've implemented the custom search on this site. <strong>See the Navbar at the top of this page.</strong></p>
117 <p>With Google Custom Search, you can:</p>
118
119 <ul>
120 <li>Create custom search engines that search across a specified collection of sites or pages</li>
121 <li>Enable image search for your site</li>
122 <li>Customize the look and feel of search results, including adding search-as-you-type autocompletions</li>
123 <li>Add promotions to your search results</li>
124 <li>Leverage structured data on your site to customize search results</li>
125 <li>Associate your search engine with your Google AdSense account, so you make money whenever users click ads on your search results pages.</li>
126 </ul>
127
128 <br />
129
130 <h2>Tutorial</h2>
131
132 <ol>
133 <li>Create an account with Google and Sign-in:<a href="https://myaccount.google.com/"> myaccount.google.com</a></li>
134 <li>Go to:<a href="https://cse.google.com/cse/all"> cse.google.com</a></li>
135 <li>
136 Enter your website URL and click 'CREATE'
137 <p>
<img class="img-border" src="img/google_cse/1.png" alt="Google sites to search image"></p>
138 </li>
139 <li>
140 Click 'Get Code'
141 <p>
<img class="img-border" src="img/google_cse/2.png" alt="Google get code image"></p>
142 </li>
143 <li>
144 Paste code into the body of your site where you want the search box to appear. For example:
145 <blockquote>
146 <pre>
147 <code>
148 <div>
149 <script async src="https://cse.google.com/cse.js?cx=011558783527147441916"></script>
150 <div class="gcse-search">
151 <div>
152 </code>
153 </pre>
154 </blockquote>
155
156 </li>
157 </ol>
158
159 <br />
160
161 <!-- Youtube video -->
162 <div>
163
<iframe id="video" height="400" frameborder="0"
164 src="https://www.youtube.com/embed/LwRbko3IUqU"
165 allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
166 title="YouTube video on Google Custom Search Engine (CSE)"
167 aria-label="Play Video: Google Custom Search Engine tutorial">
168 </iframe>
169 <span>In this Video Julian explains how to add a Google Custom Search Engine to your site.</span>
170
171 </div>
172
173 <br />
174
175 <p>For more information see:<a href="https://developers.google.com/custom-search/docs/tutorial/introduction"> developers.google.com</a></p>
176
177 </section>
178
179</div>
180 <!-- /.container -->
181 <!-- Footer -->
182 <footer class="py-5 bg-dark">
183 <div class="container">
184 <p class="m-0 text-center text-white">Copyright © JulianKristian.com.au 2019</p>
185 </div>
186 <!-- /.container -->
187 </footer>
188
189 <!-- Bootstrap core JavaScript -->
190 <script src="vendor/jquery/jquery.min.js"></script>
191 <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
192
193</body>
194
195</html>