Tùy chỉnh thanh tìm kiếm của Google (Google Custom Search)

Google Custom Search một trong những công cụ  trong danh sách các điểm cộng gần như vô tận. Từ cung cấp các kết quả tìm kiếm liên quan đến lựa chọn cho chỉ mục theo yêu cầu. GCS là một lợi ích cho tất cả Blog chủ sở hữu trang web. Nhưng một điều không phù hợp tại chỗ là khung tìm kiếm của nó cực kì đơn giản , và không bắt mắt chút nào. Trong bài này Karl sẽ nói cho bạn làm thế nào để thay đổi hình thức  Search Box GC của bạn thành hộp tìm kiếm CSS3.






Giả sử bạn đã thiết lập công cụ tìm kiếm của Google tìm kiếm Tuỳ chỉnh của bạn nếu bạn không sau đó kiểm tra hướng dẫn này. Có nhiều biến thể GCS, nhưng thông thường mã có chứa một thẻ <script>, hoặc tương tự thế này:




<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"> 
  google.load('search', '1', {language : 'en', style : google.loader.themes.ESPRESSO});
  google.setOnLoadCallback(function() {
    var customSearchControl = new google.search.CustomSearchControl('XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY');
    customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);
    customSearchControl.draw('cse');
  }, true);
</script>
đây bạn có thể không thực sự thấy nơi để áp dụng các style. Bây giờ hãy copy và dán các mã sau đây (cũng hoạt động theo cách tương tự như trên), và tùy chỉnh theo ý bạn:



<form id="search-form_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL of the Page where the Result is to be shown"> 
  <input value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" name="cx" type="hidden"/> 
  <input value="FORID:11" name="cof" type="hidden"/> 
  <input id="q" style="width:150px;" name="q" size="70" type="text" /> 
  <input value="Search" name="sa" type="submit"/> 
</form> 



id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" là thứ bạn cần thay cho phù hợp với id mình đã đăng kí.LÀM SAO ĐỂ TÙY CHỈNH KHUNG SEARCH CỦA BẠN?1- Đầu tiên là bạn hãy Sao lưu mẫu của mình để tránh rủi ro.2- Hãy chắc chắn là code GCS bạn chèn vào là duy nhất, nếu có hãy xóa chúng trước.3- Tiếp theo, bạn vào Mẫu >> Chỉnh sửa HTML và chèn đoạn code nào bạn muốn dưới đây vào trước ]]></b:skin> :
Mẫu 1:



#search-form{
background: #eaf8fc;
background-image: -moz-linear-gradient(#fff, #d4e8ec);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
-moz-border-radius: 35px;
border-radius: 35px;
border-width: 1px;
border-style: solid;
border-color: #c4d9df #a4c3ca #83afb7;            
width: 250px;
height: 35px;
padding: 10px;
margin: 10px auto 10px;
overflow: hidden;
}
#search, #submit
{
float: left;
}
#search
{
padding: 5px 9px;
height: 23px;
width: 380px;
border: 1px solid #a4c3ca;
font: normal 13px 'trebuchet MS', arial, helvetica;
background: #f1f1f1;
-moz-border-radius: 50px 3px 3px 50px;
 border-radius: 50px 3px 3px 50px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);            
        }
#submit
{  
background: #6cbb6b;
background-image: -moz-linear-gradient(#95d788, #6cbb6b);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));
-moz-border-radius: 3px 50px 50px 3px;
border-radius: 3px 50px 50px 3px;
border-width: 1px;
border-style: solid;
border-color: #7eba7c #578e57 #447d43;
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
 -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;     
height: 35px;
margin: 0 0 0 10px;
padding: 0;
width: 70px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #23441e;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  }
#submit:hover
  {  
background: #95d788;
background-image: -moz-linear-gradient(#6cbb6b, #95d788);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));
  } 
#submit:active
  {  
            background: #95d788;
   outline: none;
           
             -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
             -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
             box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;  
  }
 
  #submit::-moz-focus-inner
  {
    border: none;
  }  
  
  /* ----------------------- */
        
        #search::-webkit-input-placeholder {
           color: #9c9c9c;
           font-style: italic;
        }
        
        #search:-moz-placeholder {
           color: #9c9c9c;
           font-style: italic;
        }    
        
        #search.placeholder {
           color: #9c9c9c !important;
           font-style: italic;
        }  
        
        #search:focus
        {
            border-color: #8badb4;
            background: #fff;
            outline: none;
        }



Mẫu 2





/* search-form 
-------------------------------------- */
.searchform {
 display: inline-block;
 zoom: 1; /* ie7 hack for display:inline-block */
 *display: inline;
 border: solid 1px #d2d2d2;
 padding: 3px 5px;
 
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius: 2em;
 
 -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
 -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
 box-shadow: 0 1px 0px rgba(0,0,0,.1);
 
 background: #f1f1f1;
 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
 background: -moz-linear-gradient(top,  #fff,  #ededed);
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
 -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
.searchform input {
 font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
 background: #fff;
 padding: 6px 6px 6px 8px;
 width: 202px;
 border: solid 1px #bcbbbb;
 outline: none;
 
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius: 2em;
 
 -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
 -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
 box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.searchform .searchbutton {
 color: #fff;
 border: solid 1px #494949;
 font-size: 11px;
 height: 27px;
 width: 27px;
 text-shadow: 0 1px 1px rgba(0,0,0,.6);
 
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius: 2em;
 
 background: #5f5f5f;
 background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
 background: -moz-linear-gradient(top,  #9e9e9e,  #454545);
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
 -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}


Mẫu 3:






#searchform {
 background: #e1e1e1; /* Fallback color for non-css3 browsers */
 width: 365px;

 /* Gradients */
 background: -webkit-gradient( linear,left top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225)));
 background: -moz-linear-gradient( center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%);

 /* Rounded Corners */
 border-radius: 17px;
 -webkit-border-radius: 17px;
 -moz-border-radius: 17px;

 /* Shadows */
 box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
 -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
 -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
}

/*** TEXT BOX ***/
input[type="text"]{
 background: #fafafa; /* Fallback color for non-css3 browsers */

 /* Gradients */
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230)));
 background: -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%);

 border: 0;
 border-bottom: 1px solid #fff;
 border-right: 1px solid rgba(255,255,255,.8);
 font-size: 16px;
 margin: 4px;
 padding: 5px;
 width: 250px;

 /* Rounded Corners */
 border-radius: 17px;
 -webkit-border-radius: 17px;
 -moz-border-radius: 17px;

 /* Shadows */
 box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
 -webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
 -moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
}

/*** USER IS FOCUSED ON TEXT BOX ***/
input[type="text"]:focus{
 outline: none;
 background: #fff; /* Fallback color for non-css3 browsers */

 /* Gradients */
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(235,235,235)));
 background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%);
}

/*** SEARCH BUTTON ***/
input[type="submit"]{
 background: #44921f;/* Fallback color for non-css3 browsers */

 /* Gradients */
 background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(79,188,32)), color-stop(0.15, rgb(73,157,34)), color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21)));
 background: -moz-linear-gradient( center top, rgb(79,188,32) 0%, rgb(73,157,34) 15%, rgb(62,135,28) 88%, rgb(49,114,21) 100%);

 border: 0;
 color: #eee;
 cursor: pointer;
 float: right;
 font: 16px Arial, Helvetica, sans-serif;
 font-weight: bold;
 height: 30px;
 margin: 4px 4px 0;
 text-shadow: 0 -1px 0 rgba(0,0,0,.3);
 width: 84px;
 outline: none;

 /* Rounded Corners */
 border-radius: 30px;
 -webkit-border-radius: 30px;
 -moz-border-radius: 30px;

 /* Shadows */
 box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
 -moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2);
 -webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
}
/*** SEARCH BUTTON HOVER ***/
input[type="submit"]:hover {
 background: #4ea923; /* Fallback color for non-css3 browsers */

 /* Gradients */
 background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
 background: -moz-linear-gradient( center top, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);
}
input[type="submit"]:active {
 background: #4ea923; /* Fallback color for non-css3 browsers */

 /* Gradients */
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
 background: -moz-linear-gradient( center bottom, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);
}
  

Mẫu  4:





#searchform {
 width: 400px;
 height: 50px;
 background: #f2f2f2;
 padding: 6px 10px;
 border: 1px solid #b5b5b5;
 
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 
 -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
 -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
 box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
}

input[type="text"] {
 float: left;
 width: 230px;
 padding: 15px 5px 5px 5px;
 margin-top: 5px;
 margin-left: 3px;
 border: 1px solid #999999;
 
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;

 -moz-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;
 -webkit-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;
 box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;
}

input[type="submit"].solid {
 float: left;
 cursor: pointer;
 width: 130px;
 padding: 8px 6px;
 margin-left: 20px;
 background-color: #f8b838;
 color: rgba(134, 79, 11, 0.8);
 text-transform: uppercase;
 font-weight: bold;
 border: 1px solid #99631d;
 
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 
 text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(64, 38, 5, 0.9); 
 
 -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;
 -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;
 box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;

 -webkit-transition: background 0.2s ease-out;
}
 
input[type="submit"].solid:hover, input[type="submit"].solid:focus {
 background: #ffd842;
  
 -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;
 -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;
 box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;
}
 
input[type="submit"].solid:active {
 background: #f6a000;
 position: relative;
 top: 5px;
 border: 1px solid #702d00;
 
 -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
 -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
 box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
}


Comments

  1. sao mình thử mà không được nhỉ, có điều mình sử dụng WordPress ;(
    bỏ vào nó chẳng work gì cả bạn à ;((

    ReplyDelete
  2. Bạn muốn sử dụng Google Custom Search hay WP Search Engine?
    Nếu dùng Google Custom Search thì bạn nên thiết kế style cho nó trước rồi chèn code sau.
    Nếu dùng WP Search Engine thì bạn làm theo mẫu sau:
    <form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
    <input type="text" class="field" name="s" id="s" value="<?php _e('Search in this site...') ?>" onfocus="if (this.value == '<?php _e('Search in this site...') ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php _e('Search in this site...') ?>';}" />
    <input class="submit btn" type="image" src="Địa chỉ hình ảnh mà bạn muốn" value="Go" />
    </form>

    Nếu không muốn dùng ảnh thì bạn sửa code trong cái đoạn input cuối cùng nếu không thì để vậy cũng được

    ReplyDelete
  3. Style bạn tự thiết kế nhé. Còn nếu bạn dùng GCS thì bạn đưa theme mình chèn cho, chứ mình đâu biết cấu trúc blog bạn thế nào? Nói thật chứ về WP thì mình đang còn gà lắm. :-d

    ReplyDelete
    Replies
    1. tks bạn, mình tính dùng Google custom search cho blog cùi của mình, vẫn đang test thôi nên chưa làm gì đc nhiều, mình thử lấy id của cái gcs của mình và làm như bạn thì ko đc, đang điên đầu với em nó thật ;(, còn về phần gcs bên WP cũng chỉ chèn vào widget như blogger thôi, nhưng đưa vào nó ko chạy được ...

      blog: tienloc.net, cái search trên header, vẫn vứt đấy chưa có time mò tiếp ;((

      Delete

Post a Comment

Popular posts from this blog

Leveraging the Fast TikTok API on Apify for Efficient Data Scraping

Cách chuyển hướng Blog cũ sang Blog mới trong Blogspot