Publishers of technology books, eBooks, and videos for creative people

Home > Articles

  • Print
  • + Share This
Like this article? We recommend Rendering the Results as HTML

Rendering the Results as HTML

Using the results to render the widget requires an HTML file and the GoogleAPI.js file. Because the GoogleAPI object is self-contained, there are no other files that need to be included, but we do need to create the div element with the gblogs id, so that the object knows where to write the HTML (Listing 3).

Listing 3: The HTML File Is Used as the Web Page Where the GoogleAPI Object Renders the Widget (index.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Creating a Custom Blog Widget using the Google Search API</title>
<script type="text/javascript" src="assets/js/GoogleAPI.js"></script>
<link type="text/css" rel="stylesheet" href="assets/css/googleapi.css" />
<div id="gblog">Loading blog posts...</div>

You’ll also notice that I’ve included a CSS file called googleapi.css. The nice thing about creating a custom widget is that you can create your own HTML layout and use your own CSS for the design.

  • + Share This
  • 🔖 Save To Your Account