Trang trí cho khung kết quả tìm kiếm tùy chỉnh Google (Google Search Custom)

Mặc định trong kết quả 'tìm kiếm tùy chỉnh' liên kết đến trang mà bạn tạo như:/p/search.htmlthì background mặc định là nền trắng.
Bạn muốn thay đổi và trang trí cho khung kết quả tìm kiếm trong tìm kiếm tùy chỉnh google GCS?

thay đổi khung và background như ảnh trên.
Những bài viết về chèn thêm Công cụ tìm kiếm tùy chỉnh thì có hướng dẫn rất nhiều, nhưng khi chèn code<script>vào trang riêng ví dụ như trang này   bạn có thể thêm thẻ<style>bên dưới vào trang mà bạn tạo kết quả tìm kiếm tùy chỉnh để thay đổi phong cách cho bạn

Css

<style>
#___gcse_0 {
    padding: 0;
    text-align: left;
    width: 98%;
    border: 10px outset #666600;
    -webkit-box-shadow: 3px 10px 5px 0 rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 10px 5px 0 rgba(0, 0, 0, 0.75);
    box-shadow: 3px 10px 5px 0 rgba(0, 0, 0, 0.75);
}
.gsc-control-cse {
    font-family: Arial, sans-serif;
    border-color: #eee;
    background-color: #eeF;
}
.gsc-tabData.gsc-tabdActive {
    display: block;
    background: blanchedalmond;
}
.gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {
    border-color: #FFFFFF;
    background-color: #eee;
}
.gsc-orderby-container {
    text-align: right;
    background: transparent;
    display: none;
}
.gsc-results .gsc-cursor-box {
    margin: 10px 0;
    background: #333;
    height: 20px;
    padding: 10px 20px;
    text-align: center;
}
.gsc-results .gsc-cursor-box .gsc-cursor-current-page {
    border-color: #FF9900;
    background: #333;
    color: #FFF;
    font: 14px arial;
}
.gsc-results .gsc-cursor-box .gsc-cursor-page {
    border-color: #E9E9E9;
    background: #333;
    color: #FFF;
    font: 14px arial;
}
.gsc-cursor-box .gsc-cursor-page:hover, .gsc-cursor-box .gsc-cursor-page:focus {
    text-decoration: none !important;
    color: #DD4B39 !important;
    cursor: pointer;
}
.gsc-results .gsc-cursor-box .gsc-cursor-current-page {
    text-decoration: none;
    color: #F90;
}
</style>

Còn hình ảnh dưới đây là kết quả mặc định của GCS:

Bạn có thể test thử GCS trong site này và tùy biến theo phong cách của riêng bạn.
Hoặc có thể test thử vào khung tìm kiếm ngay bên dưới.
Hy vọng hữu ích.

Bạn có thể test thử trên Test Html Editor
Link to this page:

<a href="http://testtemplatekhoi.blogspot.com/2015/05/trang-tri-cho-khung-ket-qua-tim-kiem.html">Trang trí cho khung kết quả tìm kiếm tùy chỉnh Google (Google Search Custom)</a>from testtemplatekhoi.blogspot.com

Share on Google Plus

About Testtem