How to Integrate Google Custom Search Engine to Blogger Blog

Today am just going to show you how to add or install Google Custom Search Engine to your blogger blog, using this simple steps, and how to make it appear inline, So what this does is that, it allows you to view or search for a Post on your site, Note that this post needs to be indexed by google before they can be displayed on your search engine.

What is Google Custom Search Engine (CSE)

Google Custom Search Engine (CSE) is a service offered by Google to be used by bloggers and business owners to help them or their visitors to navigate the site easily, therefore, by using this search engine on your blog, it makes content indexing very easy and fast, per my knowledge… so lets see the Advantages of using Google Custom Search Engine (CSE)

What are the importants of using Google Custom Search Engine (CSE) 

Google Custom Search Engine (CSE) might have a lot of Advantages, but i will only list the few i know which are:

1. It makes content indexing fast

2. It enable us to earn more money from adsense- if only you have an approved adsense account, Click here to learn how to get an approved adsense fast, if you don’t have one..

3. It allows or helps us to know which of our blogpost are being found on google, since it only shows post that are indexed on our site by google.

4. It also beautifies our blog, and makes it unique, having Google Custom Search Engine (CSE)

What are the Disadvantages of Google Custom Search Engine (CSE)

The only disadvantage i know so far is that, if your post is not indexed by google, then there is no way it will show your post when searched using the Google Custom Search Engine (CSE), and this can affect your blog users and how they navigate your site…

How to Add Google Custom Search Engine (CSE) to our Site or Blog

For us to add this to our blog, we need to follow some steps below… A. Create a CSE Unit First,

you must create a new CSE unit first.

Go to https://cse.google.com

In the column Site to Search, fill in the URL of your blog followed by a slash and star. Example:www.mashbyte.com/*

On Languageselect your blog language. Or adjust it to the language of your blog.

On Name of the search engine, fill as you wish. This is the Google CSE unit name which can be your blog name.

Done? Click the button CREATE in the bottom of the page

On the menu click on Look and feel, and click on Results only.

Then click the button Save & Get Code

Now copy that code and save it somewhere…

How to Add the CSE to our main Search Bar on our blog

Now goto your blogger blog

Create a page with any name , example Search Engine On the page, switch to, HTML tab and Paste the code

Now turn off commenting in the right sidebar to off..

Then Publish your Page….

How to Add the Page to our Theme HTML

Overhere, lets edit our html, by going to theme on our dashboard Make a backup first so that it can be restored if you have an error Now in our theme, we will look for this code

<!-- Search Form -->
          <div class='searchbar'>

if you are using Median Ui theme or Fletro Theme , the replace the following codes… Search for this code..

<!-- Search Form -->
          <div class='searchbar'>
            <form class='search-form' expr:action='data:blog.homepageUrl + &quot;search&quot;' id='search-form' method='get'>
              <input aria-label='Search' autocomplete='off' class='search-input' id='search-input' name='q' placeholder='e.g. ekonomi' type='text'/>

Replace with this…….

!-- Search Form -->
          <div class='searchbar'>
	              <form action='/p/search.html' class='search-form' method='get'>
              <input aria-label='Search' autocomplete='on' class='search-input' id='search-input' name='q' placeholder='Search our Database' type='text'/>
              <button aria-label='Search Button' class='search-button' role='button' type='submit'>

If you are using any other theme , then kindly search for only “Form Action=” and replace it with your cse page url

Now change the highlighted link with your own….

Now don’t change anything on this code, if you want to change or customize it, goto cse.google.com and do it there, be Caustion!!

Note:- We will be updating this method soon… so kindly hit the subscribe button for be abreast with the nest update….

I hope you find this useful, but if in any case you find it difficult to apply this , then leave a comment below for help and a quick reply, or use our Contact page for a personal assistant.

Note: You have the right to share this with anyone of your choice or on your blog….but Don’t forget to link back to MashByte.com.… Read our ToC  or our DMCA here to understand how our Terms very well.

Remember to Subscribe and  share…….