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

This topic contains 0 replies, has 1 voice, and was last updated by  Support 5 years, 8 months ago. This post has been viewed 4421 times

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

    Support
    Keymaster

    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)

    (css/custom.css)

    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)