How to make site specific Google search box

Penulis : Dirman Waktu :Wednesday, October 2, 2013 0 Komentar

s
Here is some code you can use to add Google's search functionality to your website. You can add both a standard Google search box that will search the web at large (the first example) or a site-specific search box that will search only pages within a specific URL (the second example). If you want to restrict searches to your own site, use the second example and provide your site’s URL as the searchable domain.

You'll need an API key from Google. They are freely available for non-commercial applications.

General Google search box :

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
        <title>My GAjax Search</title>

        <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOURKEYHERE" type="text/javascript"></script>
        <script language="Javascript" type="text/javascript">
        //<![CDATA[
        function OnLoad() {
       
          // Create a search control
          var searchControl = new GSearchControl();

          // create a search object
          searchControl.addSearcher(new GwebSearch());

          // tell Google where to draw the searchbox
          searchControl.draw(document.getElementById("search-box"));

        }

        GSearch.setOnLoadCallback(OnLoad);

        //]]>

        </script>
       
    </head>

<body>

        <!-- Search box -->
        <div id="search-box">

        </div>

</body>
</html>

 

Site specific Google search box

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>

        <title>My GAjax Site Search</title>

        <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOURKEYHERE" type="text/javascript"></script>

        <script language="Javascript" type="text/javascript">

        //<![CDATA[

        function OnLoad() {

          // Create a search control

          var searchControl = new GSearchControl();
       

         // create a search object

          var siteSearch = new GwebSearch();

          siteSearch.setUserDefinedLabel("YourSite");

          siteSearch.setUserDefinedClassSuffix("siteSearch");

          siteSearch.setSiteRestriction("example.com");

          searchControl.addSearcher(siteSearch);

          // tell Google where to draw the searchbox

          searchControl.draw(document.getElementById("search-box"));

        }

        GSearch.setOnLoadCallback(OnLoad);

        //]]>

        </script>
    </head>

    <body>
        <!-- Search box -->
        <div id="search-box">

        </div>
    </body>

</html>

Create cross-browser CSS3 Gradient Buttons

Penulis : Dirman Waktu : 0 Komentar

s
For past few months I was working on a project and got to learn lots of new things. I would love to share some good learnings like Create 'CSS3 Gradient Buttons'.

The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values.

CSS:
<style media="all"  type="text/css">
    .btn {
    overflow: hidden;
    zoom:1;
}
.btn input.secondary,
.btn button.secondary {
    background: #3c78c7;
    background: -moz-linear-gradient(top,  #4b97fa 0%, #3c78c7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4b97fa), color-stop(100%,#3c78c7));
    background: -webkit-linear-gradient(top,  #4b97fa 0%,#3c78c7 100%);
    background: -o-linear-gradient(top,  #4b97fa 0%,#3c78c7 100%);
    background: -ms-linear-gradient(top,  #4b97fa 0%,#3c78c7 100%);
    background: linear-gradient(top,  #4b97fa 0%,#3c78c7 100%);
    color: #fff;
}
.btn input.secondary:focus,
.btn button.secondary:focus,
.btn input.secondary:hover,
.btn button.secondary:hover {
    background: #4b97fa;
    background: -moz-linear-gradient(top,  #88bcff 0%, #4b97fa 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#88bcff), color-stop(100%,#4b97fa));
    background: -webkit-linear-gradient(top,  #88bcff 0%,#4b97fa 100%);
    background: -o-linear-gradient(top,  #88bcff 0%,#4b97fa 100%);
    background: -ms-linear-gradient(top,  #88bcff 0%,#4b97fa 100%);
    background: linear-gradient(top,  #88bcff 0%,#4b97fa 100%);
}
.btn input.secondary:active,
.btn button.secondary:active {
    outline:0;
    -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 50, 100, 0.4);
    box-shadow: inset 0px 1px 3px 0px rgba(0, 50, 100, 0.4);
}
/* #### MAIN BUTTON STYLES #### */
.btn input,
.btn button {
    font-size: 18px;   
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

/* input + button styles*/
.btn input,
.btn button {
    border: none;
    padding: 0;
    margin: 0;
    padding: 3px 10px 4px;
    cursor: pointer;
    white-space:  normal;
    box-shadow: none;
    transition: none 0s ease 0s;
    text-align: left;
    -webkit-appearance: button;
}


@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Google Chrome and Safari adjustments */   
    .btn input,
    .btn button {
        height: 22px;
        padding-bottom: 1px;
        line-height: 1.428571; /* 20/14 */
    }   
}
</style>
<!--[if IE]>
<style media="all"  type="text/css">
.btn input,
.btn button {
    overflow: visible;
    font-size: 18px;   
}
.btn input.secondary,
.btn button.secondary {
    background: #3c78c7;  
    color: #fff;
    overflow: visible;
}
.btn input.secondary:focus,
.btn button.secondary:focus,
.btn input.secondary:hover,
.btn button.secondary:hover {
    background: #4b97fa;   
}
</style>
<![endif]-->

HTML:
<div class="btn action"><input type="submit" value="Submit" class="secondary"></div>
Temukan Kami
Google+

Popular Posts

Copyright 2016 Information and Tutorial Technology. All Rights Reserved. ~ Designed by Sudirman Saputra
Scroll to top