Góc Học Trò - Hoctro's Place: Cài đặt "Hello Video World!" - phần mềm tìm kiếm hình ảnh của Google

3.22.2026

Cài đặt "Hello Video World!" - phần mềm tìm kiếm hình ảnh của Google

Bạn,

Cái GS Video Bar Solution thật tuyệt diệu! Không tốn chỗ và nhìn rất mỹ thuật trên trang mẫu của Goggle

Tôi quyết chí làm bằng được cái phụ tùng này, tất nhiên là lợi dụng ưu thế sửa chữa thêm bớt dữ liệu có sẵn của Beta.

Bạn có thể thấy trang mẫu trên trang nhà tiếng Anh của tôi:

Nếu bạn muốn làm theo, thì đây là ba bước đơn giản:

1. Tải về template bạn đang có trên trang, rồi then lấy một chìa khóatừ Google.

2. Thêm các dòng sau từ thẻ </head> , rồi thay phần chữ đậm với chìa khóa bạn có ở bước 1. "Save" template của bạn.

  <script

src='http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAA8UsdRzPglCG4j-KxFJ5BGdbNuZw' type='text/javascript'/>
  <link href='http://www.google.com/uds/css/gsearch.css' rel='stylesheet'
type='text/css'/>
  <script src='http://www.google.com/uds/solutions/videobar/gsvideobar.js'
type='text/javascript'/>
  <link href='http://www.google.com/uds/solutions/videobar/gsvideobar.css'
rel='stylesheet' type='text/css'/>

3. Thêm phụ tùng mới:

a. Như thường lệ, tới Template->Edit HTML, nhớ bật "Expand Widget Templates" lên. Tìm những dòng sau:

  </b:section>
    </div>
  <div id='sidebar-wrapper'>

b. Thêm những dòng này ngay đằng trước các dòng ở phần 3a:

<b:widget id='TextList1' locked='false' title='Interesting Video Search' type='TextList'>
<b:includable id='main'>



<h2><data:title/></h2>
<div id='videoPlayer'>Loading...</div>
<div class='widget-content'>
   <center>
   <div class='video-tags'>
     <b:loop values='data:items' var='item'>
       <a expr:href='"javascript:vbm.execute(\"" + data:item + "\")"'><data:item/></a>
       <span class='tag-sep'>|</span>
     </b:loop>
   </div>

   <div class='horizontalVideobar' id='videoBarMiddle'>Loading...</div>
   </center>

   <script type='text/javascript'>
    var vbm;
    var options = {
        largeResultSet : true,
        horizontal : true,
        thumbnailSize : GSvideoBar.THUMBNAILS_SMALL
      }
      // set up the right bar as the master
      vbm = new GSvideoBar(
                  document.getElementById("videoBarMiddle"),
                  document.getElementById("videoPlayer"),
                  options
                  );

      vbm.execute("beatles");
   </script>
   <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

c. Thêm vào các từ, tên ca sĩ, v.v. bạn thích bằng cách tới Template->Page Element, rồi ấn vào "Edit" trong hình chữ nhật có tên là "Interesting Video ..."

Vậy là xong rồi đó bạn

Ghi chú kỹ thuật
(Bạn không cần biết phần dưới đây để lắp ráp các phần trên, đây chỉ là vài dòng tán hươu tán vượn với các hackers khác thôi.)

Lần hack này, cái tôi đắc ý nhất là làm thành công cái danh sách chỉ với mã Beta, mà không dùng ngôn ngữ JavaScript.

   <div class='video-tags'>
     <b:loop values='data:items' var='item'>
       <a expr:href='"javascript:vbm.execute(\"" + data:item + "\")"'><data:item/></a>
       <span class='tag-sep'>|</span>
     </b:loop>
   </div>

Vòng lặp di hết các dơn vị trong danh sách, và in ra từng chữ, cũng như tạo ra liên kết để bạn ấn vào. Liên kết làm rất khó, vì tôi phải gọi một hàm javascript với thông số là một string nằm trong 2 dấu móc đôi (")

<a expr:href='"javascript:vbm.execute(\"" + data:item + "\"")"'><data:item/></a>

Cuối cùng tôi cũng là được dấu móc đôi bằng cách dùng \" của ngôn ngữ C, thì mới chạy, trong khi dùng " thì không xong.

Chúc bạn một ngày thật an lành,

Hoctro.