Home Forums Porto – Responsive HTML5 Template FAQ’s How to use Google Custom Search

Viewing 1 post (of 1 total)
  • Author
  • #199

    If you want to use Google Custom Search on your website you have to create an API Key and configure following these steps:

    Method 1: Results Page

    – Go to: http://www.google.com/cse

    You’ll see that the search redirects you to the file – page-search-results.html:

    Open that file and paste there the code you copied from Google.

    Method 2: Overlay / Modal

    If you want to use the Overlay / Modal look and fell, please select that option:

    Then in the HTML, add the script where you want to show the search input field:

    (If you add in the default place, in the header, please add this CSS to make it look better)


    body .gsc-control-cse {
    	background: transparent;
    	border: 0;
    	padding: 0;
    	width: 172px;
    body .gsc-input-box  {
    	border: 1px solid #ccc;
    	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
        border-radius: 20px;
        font-size: 0.9em;
        height: 34px;
        margin: 0;
        padding: 2px 6px;
        width: 170px;
    body input.gsc-search-button,
    body input.gsc-search-button:hover,
    body input.gsc-search-button:focus {
        background-color: #ccc;
        background-image: none;
        border: 0 none;
        border-radius: 100%;
        color: #333;
        filter: none;
        height: auto;
        padding: 6px;
        position: absolute;
        right: 6px;
        top: 3px;
        width: auto;

    The input must look like this:

    And this is the result modal style:

Viewing 1 post (of 1 total)