Skip navigation

This article originally appeared on http://alt-web.com/TUTORIALS/?id=add_google_to_bootstrap_search_bar

Start with a Bootstrap document and the default (light) or inverse (dark) navbar. Your navbar code should look something like this:

 

<nav class="navbar navbar-inverse" role="navigation">

<div class="container">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="#">XYZ Company</a></div>

<!-- add menu items-->

<div class="collapse navbar-collapse" id="navbar1">

<ul class="nav navbar-nav">

<li class="active"><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Services</a></li></ul>

<!-- ADD SEARCH FORM HERE -->

<form class="navbar-form navbar-right" role="search">

<div class="input-group">

<input type="text" class="form-control" placeholder="Search">

<span class="input-group-btn">

<button type="submit" class="btn btn-default">

<span class="glyphicon glyphicon-search"></span>

</button>

</span>

</div>

</form>

</div>

</div>

</nav>

 

How do I make my search bar functional?

Generic search forms in templates are just for show. They don't actually DO anything until you connect them to a bonafide search engine — either a scripted one of your own making or a 3rd party service.

 

Assuming your site is not dynamically driven with server-side code and content stored in a database, building your own search engine is out of the question. Static HTML sites must rely on 3rd party search engine software or services like Google.

NOTE: For best results, your site must be fully indexed by Google. It often takes 3-4 weeks or more for Google to find and fully index new websites.

 

How can I get Google to index my new website sooner?

You can help escalate the process by creating an XML Sitemap and uploading it to your server's root folder. Then submit the sitemap URL to Google through your Google Webmaster Tools Account. Full site indexing still requires several days or weeks. So be patient.

 

Google Search Code:

<script>
//GOOGLE SEARCH
//Enter domain of site to search
var domainroot="example.com"
function Gsitesearch(curobj){
curobj.q.value="site:"+domainroot+" "+curobj.qfront.value
}
</script>
<form class="search" action="http://www.google.com/search" method="get" onSubmit="Gsitesearch(this)">
<input name="q" type="hidden" />
<input name="qfront" type="search" required class="searchField" placeholder="Google Site Search" maxlength="50"/>
<input type="submit" class="search-button" value="SEARCH" />
</form>

 

On line 4 above, change the domainroot="example.com" to your website's actual domain (i.e. www.yourdomain.com or yourdomain.com). Use whichever produces the best results on Google. If unsure, open your browser and type site:www.yourdomain.com in the address bar. Hit Enter/Return/Go. If you don't see any results, try it without the www prefix.

 

By now you're probably asking yourself "How do I combine Google's code with what I already have?"

It's simple.  Starting on line 19 of the Bootstrap navbar code, add Google's <script> above the form tag. Make other substitutions as shown below.

 

<!-- ADD SEARCH FORM HERE -->

<script>
//GOOGLE SEARCH
//Enter domain of site to search.
var domainroot="example.com"
function Gsitesearch(curobj){ curobj.q.value="site:"+domainroot+" "+curobj.qfront.value }
</script>
<form class="search navbar-form navbar-right" action="http://www.google.com/search" method="get"role="search" onSubmit="Gsitesearch(this)">
<div class="input-group"> <input name="q" type="hidden" />
<input class="form-control" name="qfront" type="search" required class="searchField" placeholder="Google Site Search" maxlength="50"/>
<span class="input-group-btn"> <button type="submit" class="search-button btn btn-primary">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</div>
</div>
</nav>

 

And there you have it. A working Search Bar made with Bootstrap and Google’s powerful search engine. Hope you enjoyed this brief tutorial.

 

By Nancy O'Shea, ACP / Web Developer
Web Site: http://alt-web.com

 

Original Article on http://alt-web.com/TUTORIALS/?id=highlight_icons

The beauty of font based icons is that you can style them exactly as you would any other font with CSS color, size, borders, gradients, shadows, transitions...  Font icons re-scale nicely in responsive layouts. And unlike images, font icons have a very small footprint which means you can use a lot of them for social media and web based applications without slowing down your web pages.  If you're new to font icons, take a few minutes to get familiar with them at the links below.

 

Glyphicons - apple, ban-circle, map-marker:

Glyphicons-screenshot.jpg

Font Awesome - apple, ban, map-marker:

Fontawesome-screenshot.jpg

 

HTML:

To get started, add Glyphicons and Font Awesome links to your document's <head> tag.

NOTE: Glyphicons are included in Bootstrap CSS version 3x but not in version 4.

 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

 

Notice the slight syntax difference. Glyphicons are wrapped in <span> tags while Font Awesome icons are wrapped in <i> tags.

 

<h3>Glyphicons:</h3> 
<ul class="list-inline"> 
     <li><span class="glyphicon glyphicon-apple"></span></li> 
     <li><span class="glyphicon glyphicon-ban-circle"></span></li> 
     <li><span class="glyphicon glyphicon-map-marker"></span></li>
</ul> 

<h3>Font Awesome Icons:</h3> 
<ul class="list-inline"> 
     <li><i class="fa fa-apple"></i></li> 
     <li><i class="fa fa-ban"></i></li> 
     <li><i class="fa fa-map-marker"></i></li> 
</ul>


 

Dreamweaver Screenshots:

 

Applying multiple classes to a <span> tag:

 

Applying multiple classes to an <i> tag:

 

CSS:

Add the following CSS code to your custom stylesheet.  Feel free to experiment with different values.

 

.glyphicon {
     padding: 2%;
     color: rgba(255,255,255,1.0);
     font-size: 156px;
     -webkit-transition: all 0.35s ease-in-out;
     -moz-transition: all 0.35s ease-in-out;
     transition: all 0.35s ease-in-out;
     text-shadow: -1px 1px 2px #333;
     cursor:pointer;
}

.glyphicon:hover, 
.glyphicon:active, 
.glyphicon:focus {text-shadow: 2px 3px 15px blue;}

.fa {
     padding: 2%;
     color: rgba(255,255,255,1.0);
     font-size: 156px;
     -webkit-transition: all 0.35s ease-in-out;
     -moz-transition: all 0.35s ease-in-out;
     transition: all 0.35s ease-in-out;
     text-shadow: -1px 1px 2px #333;
     cursor:pointer;
}

.fa:hover,
.fa:active,
.fa:focus {text-shadow: 2px 3px 15px blue;}




 

And there you have it. Hope you enjoyed this brief demonstration with font icons. 

 

By Nancy O'Shea, ACP / Web Developer

Web Site: http://alt-web.com