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

Read more »

Công cụ tạo khung chứa code

1_Công cụ tạo Css cho khung chứa code thêm Gradient Background

Code Frame Dimensions TTP © 2014
Height:	px (pixels) /***khi vượt quá chiều cao sẽ xuất hiện scrollbar**/
Width:	Percent Pixels
Styles
Background Color:	#   [ More Colors...]
Gradient Background:	> None Black 3D #1 Black 3D Brown Red 3D Brown 3D Grey Blue 3D Wax 3D #1 White 3D #2 Olive 3D #2 Wax Flat White 3D Thêm Gradient vào background
Text Size:	8pt 9pt 10pt 12pt 14pt 16pt 18pt 22pt
Text Style & Weight:	Italic Bold
Text Color:	#   [ More Colors...]
Text Alignment:	Left Center Right Justified
Font Family:	Arial Helvetica Verdana Tahoma Times Roman Georgia Garamond Cursive Consolas Monospace
Padding:	0px 5px 8px 10px 15px 20px
Border Width:	0 pixels 1 pixel 2 pixels 3 pixels 4 pixels 5 pixels 6 pixels 10 pixels
Border Style:	Solid Dashed Dotted Double Groove Ridge Inset Outset None
Border Color:	#   [ More Colors...]
Border Radius:	2px 5px 10px 15px None
Add:Border-Left	2px 3px 4px 5px None solid #   [ More Colors...]
Contents Code here( only for Demo):
Text on Code Frame:	/*****Code only Demo*****/ $(function() { $('a').click(function() { $('body').remove(); // Whaatt??!!!! }); });
Generated code: Copy and paste Css code into'style'tag.
<!-- HTML Codes by Testtem... --> <style type="text/css"> code{ font-family:Consolas; } pre{ background-color:#F2F9FF; height:120px;width:96.5%; font-size:10pt;color:#2682B3; padding:10px;text-align:left; border:1px solid #E3E3E3; border-left:4px solid #E3E3E3; overflow:auto;white-space:pre } </style> <pre><code> /*****Code only Demo*****/ $(function() { $('a').click(function() { $('body').remove(); // Whaatt??!!!! }); }); </code></pre>

Khi chọn màu trong color_picker các bạn phải click vào để submit

2_Thêm tag cho khung chứa code:

^↑Ảnh Demo

_Nếu muốn thêm tag cho khung chứa code như ảnh trên ta thêm <css> vào thẻ style:

Css

pre[rel] {
    padding-top: 15px;
}
pre[rel]:before {
    content: attr(rel);
    font: normal 12px/22px Arial, Sans-Serif;
    color: white;
    background-color: #369;
    padding: 0 10px;
    margin: 0 8px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}
/*Thay đổi màu cho thuộc tính REL**/
pre[rel="HTML"]:before{background-color:#336699}
pre[rel="CSS"]:before{background-color:#9999DD}
pre[rel="Javascript"]:before{background-color:#963}

Và trong thẻ body ta dùng cấu trúc như bên dưới:

Html

<pre rel="Html"><code>
   Nội dung code
Nhập nội dung code đã được  mã hóa  ở đây
</code></pre>

Html có thể thay thế bằng: Css , Javascript tùy nội dung code.
Hoặc bạn có thể dùng Công cụ  mã hóa và thêm "rel" tag

Bạn có thể test thử trên Test Html Editor
Link to this page:
<a href="http://testtemplatekhoi.blogspot.com/2014/12/cong-cu-tao-khung-chua-code.html">Công cụ tạo khung chứa code</a> from testtemplatekhoi.blogspot.com

Read more »