Càng sử dụng nhiều tiện ích thì thời gian toàn bộ nội dung blog được tải về hiển thị trên trình duyệt người đọc càng lâu. Làm sao để đọc giả cảm thấy mình được "phục vụ" ngay khi vừa gõ xong địa chỉ blog là vấn đề được nhiều người quan tâm đặc biệt trong tình hình mạng internet ở Việt Nam không phải lúc nào cũng ổn định.

Kinh nghiệm cá nhân cho thấy chúng ta nên sử dụng hạn chế đến mức có thể số tiện ích (gadget) trên blog. Trong số các tiện ích của Blogger, HTML/JavaScript có lẽ được dùng nhiều nhất. Nếu blog bạn sử dụng nhiều tiện ích loại này, một cách có thể làm giảm đáng kể là ghép nội dung của chúng vào một và ngăn nhau bởi tên (title) nằm giữa thẻ <h2> và </h2> như hình:

Một cách khác cũng có thể ghi Tên tiện ích 1 vào phần title và nội dung của nó ở dưới, các nội dung khác thì để lại như trên. Nhìn chung nếu sử dụng template mẫu của Blogger thì việc ghép này sẽ thấy hiển thị tương tự như nhiều tiện ích khác nhau:

Và tất nhiên tốc độ tải về của blog cải thiện thêm một ít.

Bạn có cách làm nào khác hay hơn không? Xin chia sẻ ở dưới để chúng ta cùng thảo luận.

Xin chào tất cả anh em Blogger! Đã lâu lắm rồi Thủ Thuật Blog không viết bất kỳ bài mới nào cho đứa con tinh thần của mình. Việc học, việc làm và nổi lo kiếm sống cứ như dòng xoáy cuốn phăng mình đi mà không sao thoát được. Ngoảnh lại bài viết cuối cùng được đăng trên blog cách nay đã 7 tháng. Cứ tưởng chừng như vừa mới hôm qua. Vừa ngỡ ngàng, vừa ngơ ngác mọi thứ đã thay đổi quá nhiều ...

Cộng đồng blog Việt Nam đã xuất hiện khá nhiều blog nổi bật và từng bước tiến lên chuyên nghiệp. Về mặt kỹ thuật Blogger nay đã có thêm nhiều tính năng mới, đáng kể nhất trong đó là tính năng tạo trang và công cụ thiết kế giao diện hoàn toàn khác biệt. Đó là những lý do thôi thúc sự quay lại của Thủ Thuật Blog.

Cùng với sự trở lại của mình Thủ Thuật Blog sẽ tiếp tục chia sẻ với bạn những hướng dẫn về cách làm blog mà trong đó chủ yếu dành cho Blogger.com. Bên cạnh đó trang cũng sẽ có thêm những nội dung mới đặc biệt về mạng xã hội. Tất nhiên trong đó không thiếu những nội dung mà nhiều người quan tâm.

Nhân dịp kỷ niệm sinh nhật lần thứ 10 Blogger giới thiệu nhiều tính năng mới. Một trong số đó là tính năng "read more" (đọc thêm) mà trước giờ chúng ta phải làm thủ công nay đã có thể thực hiện một cách dễ dàng bằng một đoạn code ngắn.

Tính năng này được gọi là Jump Breaks và bạn có thể sử dụng ngay nếu blog của bạn được tạo sau thời điểm tháng 09/2009. Khi đó nếu sử dụng trình soạn thảo mới, bạn chỉ cần nhấn chọn biểu tượng như hình:



Hoặc bạn bổ sung đoạn code như hình (nếu sử dụng trình soạn bài đăng cũ):



Nói thêm, nếu đã từng sử dụng WordPress, chắc chắc bạn không lạ gì đoạn code trên. Hãy nhớ gõ chính xác ngay cả khoảng trắng nữa nhé!

<!-- more -->

Trong trường hợp blog của bạn đã được tạo khá lâu, hãy bổ sung đoạn code sau đây vào ngay sau <data:post.body/> (Đăng nhập Blogger, chọn Layout, Chỉnh sửa HTML, đánh dấu Mở rộng tiện ích mẫu để tìm)

<b:if cond='data:post.hasJumpLink'> 
<div class='jump-link'> 
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a> 
</div> 
</b:if >

Bạn sẽ thấy kết quả như hình dưới đây:



Trong trường hợp cần tùy biến chữ "Read more", hãy nhấn sửa đổi thành phần Bài đăng blog trên layout.



Chúng ta cùng chúc mừng sinh nhật lần thứ 10 của Blogger đi nào!

Với mong muốn tôn vinh những blogger đã và đang có những đóng góp hữu ích cho cộng đồng blogger Việt Nam, một nhóm blogger gồm 6 người đã tự đứng ra vận động tài trợ và tổ chức cuộc thi Bình chọn Blog Việt 2009.

Tổng giải thưởng của cuộc thi này lên đến 10 triệu đồng trong đó blog đoạt giải nhất sẽ được thưởng số tiền 5 triệu. Ngoài ra còn nhiều giải thưởng cho các blog đoạt giải theo các tiêu chí khác nhau: Blog sao sáng, Blog sắc màu, Blog hi-tech, Blog cộng đồng, Blog Việt 2009. Ban tổ chức nhận đăng ký ngay từ hôm nay cho đến hết ngày 15/09/2009.

Để tham gia cuộc thi bạn chỉ cần truy cập www.binhchonblogviet.com, nhấp vào trang Đăng ký và điền đầy đủ thông tin.

Ngoài ra bạn có thể soạn email theo mẫu sau đây gửi về địa chỉ btc@binhchonblogviet.com với tiêu đề (Subject) "Đơn đăng ký tham gia cuộc thi bình chọn Blog Việt 2009":

• Họ và tên:……………………………………
• Địa chỉ:…………………………………………
• Điện thoại liên lạc:………………………….
• Email:………………………………………….
• Địa chỉ blog:……………………………………
• 1 đoạn văn mô tả ngắn gọn dài khoảng 100 – 150 từ giới thiệu về blog của bạn:
• 1 đoạn video clip (tùy chọn) giới thiệu blog của mình. (tùy chọn)
• 1 ảnh thumbnail kích cỡ 150×150px của blog bạn. (tùy chọn)
• 6 ảnh full-screen mô tả hoạt động của blog (tùy chọn)

Lưu ý: Các mục (tùy chọn) sẽ không được sử dụng như là lợi thế cạnh tranh trong việc đánh giá các blog tham gia.

Chúc bạn "rinh" giải thưởng hấp dẫn này!

Cập nhật (06/10/2009):

Hôm nay ngày 06.10.2009 Ban tổ chức đã công bố danh sách 15 blog lọt vào vòng bình chọn trong đó có Thủ Thuật Blog.

1. Ngôn Phạm blog
2. ThuThuatBlog.com
3. Thegioiblog.net
4. Tip4PC
5. Danhbaweb20.com
6. Tôi yêu Google
7. Mr Live
8. Blog học tập
9. Truyện mới
10. Travel to Hoi An
11. IT Pro
12. Gostep.info
13. Tunblog.com/blog
14. Tùy Bút Trần Đăng Khoa
15. Minh Hai Blog

Một trong những cách để bài viết của bạn được nhiều người biết đến chính là việc sử dụng các dịch vụ bookmark và chia sẻ nội dung. Ở Việt Nam, LinkHay và TagVN có lẽ là hai địa chỉ được nhiều người dùng nhất.

Bạn có thể tự chia sẻ bài viết của mình lên các dịch vụ này để tìm kiếm đọc giả.
Đây là code sử dụng cho Blogger. Hãy chọn một trong hai file này để tải về:

• File 1: LinkHay và TagVn
• File 2: AddThis (*), LinkHay, TagVn và Yahoo! Messenger

Cách chèn vào blog:

Đăng nhập Blogger, vào thẻ Bố cục (Layout) -> Chỉnh sửa HTML (Edit HTML), đánh dấu chọn Mở rộng tiện ích mẫu (Expand widget templates), tìm:

<div class='post-footer'>
<!-- Dán code ở đây -->
    <div class='post-footer-line post-footer-line-1'>
      <span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
          <span class='fn'><data:post.author/></span>
        </b:if>
      </span>

Thay <!-- Dán code ở đây --> bằng nội dung của 1 trong 2 tệp tin .txt đã tải về bên trên.

Hình dưới là hiển thị File 2 trên blog:



* AddThis là nút nhúng số 1 trên internet giúp người đọc đánh dấu và chia sẻ nội dung đến tất cả các mạng xã hội thông dụng. Chỉ cần sử dụng 1 nút nhúng này thay vì dùng nút nhúng của từng dịch vụ riêng lẻ.

Khi đăng bài viết có sử dụng bảng (table) bạn sẽ gặp lỗi hiện khoảng trắng giữa tiêu đề bài viết và nội dung bảng. Bảng càng có kích thước lớn, khoảng trắng này càng rộng. Để đăng bảng một cách dễ dàng, Thủ Thuật Blog xin hướng dẫn bạn cách khắc phục bên dưới:

Bước 1. Hãy tạo một lớp (class) mới như dưới đây và dán vào bất cứ chỗ nào trong CSS của template (Đăng nhập Blogger, chọn Edit HTML, dán đoạn mã dưới ngay bên cạnh các khai báo # hoặc .)

.bang br {
  display: none
}

Bước 2. Khi post bảng, bạn bổ sung thêm phần in đậm như thế này:

<div class="bang">
<table border="1">
<tr><th>Heading</th><th>Another Heading</th></tr>
<tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr>
<tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr>
</table>
</div>

Lưu ý phần chữ màu nổi bật, bạn có thể đổi thành chữ khác, nhưng đã khai báo như thế nào thì phải sử dụng tương ứng trong div.

Bạn sẽ thấy không còn khoảng trống nữa!

Tiếp theo hướng dẫn kèm biểu tượng chia sẻ bài viết qua Yahoo! Messenger lần này chúng ta sẽ đến với cách đính kèm link dưới bài viết giúp cho đọc giả có thể dễ dàng chia sẻ cho bạn bè của mình qua các chương trình tin nhắn tức thời.

Ý tưởng này bắt nguồn từ hướng dẫn thực hiện trên WordPress của Cộng đồng WordPress Việt Nam.

Và đây là đoạn mã để chúng ta sử dụng cho Blogger: Tải về

Bạn có thể điều chỉnh các giá trị màu (border: 1px solid #cccccc; background:#999999; color: #333333; ) và cỡ chữ (font-size: 11px;) cho thích hợp với Template đang dùng.

CÁCH CHÈN VÀO BLOG:

Đăng nhập Blogger, vào thẻ Bố cục (Layout) -> Chỉnh sửa HTML (Edit HTML), đánh dấu chọn Mở rộng tiện ích mẫu (Expand widget templates) và tìm đoạn code dưới (Nhấn Ctrl + F và nhập từ khóa line-3 để tìm dễ hơn!):

<div class='post-footer-line post-footer-line-3'>
      <!-- Nơi chèn code -->
       <span class='post-location'>
        <b:if cond='data:top.showLocation'>
          <b:if cond='data:post.location'>
            <data:postLocationLabel/>
            <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
          </b:if>
        </b:if>
      </span>
      </div>
      

Hãy thay <!-- Nơi chèn code --> bằng đoạn mã bên trên và lưu lại.

Box này chỉ xuất hiện phía dưới bài viết ở trang con. Nếu bạn không sử dụng Readmore hãy comment để được giúp đỡ.

Xong!

Cách đây khá lâu tôi có giới thiệu một cách chèn biểu tượng chia sẻ bài viết qua Yahoo! Messenger vào Blogger. Khi một ai đó nhấn lên biểu tượng này trình Yahoo! Messenger sẽ khởi động (nếu chưa mở ứng dụng này) sau đó chỉ phải chọn nickname có trong danh sách bạn bè và gửi.

Tuy nhiên đoạn code trong hướng dẫn đó có thể gặp lỗi ở phiên bản mới của Yahoo! Messenger. Vì vậy nếu bạn đang sử dụng hãy sửa đổi lại như trong tệp tin này (Tải về).

Hãy thay link hình http://i240.photobucket.com/albums/ff259/thuthuatblog/y225.gif có trong tệp tin .txt bằng link biểu tượng Yahoo! Messenger riêng của bạn (nếu cần).

Đọc thêm phần hướng dẫn Cách chèn vào Blogger để biết vị trí mình muốn.

Một điều lưu ý trước khi thực hiện thao tác trên hãy sao lưu template đề phòng thao tác sai còn có cái để phục hồi!

Chúc thành công!

Khá nhiều bạn đọc yêu cầu được hướng dẫn làm menu ngang như menu có trên Thủ Thuật Blog. Thật ra tạo menu kiểu này không khó, quan trọng bạn phải nắm được một số kiến thức về CSS nhất định. Để bạn dễ hiểu tôi sử dụng hướng dẫn thiết kế menu ngang được giới thiệu trên WordPress.org và sau đó chúng ta ứng dụng chúng cho trường hợp của Blogger.

TÌM HIỂU CÁCH TẠO MENU NGANG:

Giả sử chúng ta có đoạn code sau đây:

<div id="navmenu">
<ul>
 <li><a href="http://www.thuthuatblog.com">Trang chủ</a></li>
 <li><a href="http://www.thuthuatblog.com/2009/05/phan-loai-noi-dung-tren-thu-thuat-blog.html">Phân loại</a></li>
 <li><a href="http://www.thuthuatblog.com/2007/09/danh-sch-blog.html">Danh sách blog</a></li>
 <li><a href="http://www.thuthuatblog.com/rss.xml">RSS</a></li>
</ul>
</div>

Nếu nhúng đoạn code này vào template Blogger hoặc qua tiện ích HTML/JavaScript, mặc định, đoạn code trên sẽ hiển thị như sau:

• Trang chủ


• Phân loại


• Danh sách blog


• RSS

Bây giờ chúng ta áp dụng CSS để đoạn navmenu trên tạo thành hàng ngang:

#navmenu ul {
        margin: 0; 
        padding: 0; 
 list-style-type: none; 
        list-style-image: none; 
}

#navmenu li {
       display: inline; 
}

Nhưng các chữ lại dính kế nhau nhìn chưa được đẹp đúng không? Chúng ta bổ sung khoảng trắng vào chúng và thêm màu cho link, cũng như đổi màu khi rê chuột vào đối tượng:

#navmenu ul {
        margin: 0; 
        padding: 0; 
 list-style-type: none; 
        list-style-image: none; 
}

#navmenu li {
       display: inline; 
       padding: 5px 20px 5px 20px;
}

#navmenu a {  /* Màu link */
       text-decoration:none; 
       color: blue; 
}

#navmenu a:hover {  /* Màu link khi rê chuột vào */
       color: purple; 
}

Thuộc tính a và a:hover định dạng các link nhưng nằm giữa <li> và </li> nên ta gom lại cho dễ nhìn (***):

#navmenu ul {
        margin: 0; 
        padding: 0; 
 list-style-type: none; 
}

#navmenu li {
       display: inline; 
       list-style-image: none; 
}

#navmenu ul li a { 
       text-decoration:none; 
       color: blue; 
       padding: 5px 20px 5px 20px; 
}

#navmenu ul li a:hover { 
       color: purple; 
}

Tuỳ thuộc vào template, khi sử dụng chúng ta có thể kết hợp màu nền, hình nền, kiểu border, font chữ, màu chữ, kích thước chữ, chiều ngang của menu (width)... vào các thành phần trên.

Ví dụ mẫu:

#navmenu ul {
        margin: 0; 
        padding: 0; 
 list-style-type: none; 
}

#navmenu li {
       display: inline; 
       list-style-image: none; 
}

#navmenu ul li a {  
       text-decoration:none; 
       color: #ffffff;      
       background: #ff0000; 
       border-right: 2px solid #000000; 
       padding: 5px 20px 5px 20px; 
}

#navmenu ul li a:hover {  
       color: #f8f400;    
       font-size: 14px;   
       background: #0000ff; 
       text-decoration:underline; 
}

ỨNG DỤNG VÀO BLOGGER:

Như vậy bạn đã hiểu nguyên tắc làm menu ngang:

1. Cần có một đoạn CSS như trên được dán vào giữa <b:skin><![CDATA[/* và ]]></b:skin> trong Template. (đã đề cập ở trên)


2. Cần một đoạn mã chứa các link của menu ngang

Tất nhiên bạn vẫn có thể sử dụng đoạn mã chứa link menu ngang chèn thẳng vào Template của blog. Nhưng ở đây tôi hướng dẫn cách làm thông qua tiện ích Linklist của Blogger.

Đăng nhập vào Blogger, từ layout thêm vào tiện ích Linklist, bạn cần bổ sung các link và tên menu ngang của mình như hình sau đó lưu lại.

Nếu quan sát kỹ bạn thấy tôi không đặt tên cho tiện ích, không thêm Trang chủ và RSS vào dữ liệu của Linklist, do chúng ta thêm vào bằng cách khác.

LinkList mà bạn vừa tạo có được điều khiển bằng đoạn mã như thế này:

<b:widget id='LinkList1' locked='false' title='' type='LinkList'/>

Hãy để ý ID của nó là duy nhất, có dạng LinkList#, với ký tự # là số duy nhất. Nếu bạn sử dụng nhiều LinkList, ký tự # sẽ lần lượt là: 1, 2, 3, ...

Tiếp tục tôi gợi ý bạn cắt đoạn mã vừa nêu cho vào notepad (khoan hãy lưu lại Template nhé), tạo div có tên navmenu, bổ sung một số thành phần thiết yếu và chúng ta sẽ được như thế này:

      <div id='navmenu'>
        <b:section class='navmenu' id='navmenu-id' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'/>
</b:section>
      </div>

Và bây giờ hãy copy hết chúng đặt vào template. Tuỳ thuộc vào template và vị trí đặt menu mong muốn mà chúng ta có cách xử lý khác nhau. Cách xử lý này đòi hỏi bạn phải có kiến thức thiết kế, CSS cũng như những hiểu biết nhất định về mã nguồn template của Blogger.

Đây là template mẫu Minima (mặc định), nếu bạn dùng template khác, tất nhiên sẽ không giống!:

<body>
  <div id='outer-wrapper'><div id='wrap2'>

    <!-- skip links for text browsers -->
    <span id='skiplinks' style='display:none;'>
      <a href='#main'>skip to main </a> |
      <a href='#sidebar'>skip to sidebar</a>
    </span>
<!-- Chèn vào đây nếu muốn đặt menu ngang phía trên header của blog -->
    <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Thủ Thuật Blog.com(Header)' type='Header'/>
</b:section>
    </div>

<!-- Chèn vào đây nếu muốn đặt menu ngang phía dưới header của blog -->

    <div id='content-wrapper'>

      <div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol' showaddelement='no'/>
      </div>

      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
<b:widget id='HTML8' locked='false' title='' type='HTML'/>
</b:section>
      </div>

BỔ SUNG "TRANG CHỦ" VÀ "RSS":

Nếu bạn đưa hẳn link Trang chủ (http://yourblog.blogspot.com) vào dữ liệu của LinkList, khi đó chúng ta khó sắp xếp làm sao cho Trang chủ nằm đầu tiên. Do đó cách đơn giản nhất là chúng ta làm bằng ... tay!

Hãy đánh dấu Expand Widget Templates (Mở rộng tiện ích mẫu):


Dùng từ khoá LinkList để tìm tiện ích của chúng ta và bạn sẽ tìm thấy như sau:

<div id='navmenu'>
        <b:section class='navmenu' id='navmenu-id' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
   <ul>
      <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
 </div>
</b:includable>
</b:widget>
</b:section>
      </div>

Và tôi đã bổ sung phần chữ màu đỏ:

<div id='navmenu'>
        <b:section class='navmenu' id='navmenu-id' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
   <ul>
       <li><a expr:href='data:blog.homepageUrl' title='Trang chủ'>Trang chủ</a></li>
       <li><a expr:href='data:blog.homepageUrl + "2009/05/phan-loai-noi-dung-tren-thu-thuat-blog.html"' title='Phân loại nội dung'>Phân loại</a></li>
       <li><a expr:href='data:blog.homepageUrl + "2008/01/i-nt-v-blog-v-tc-gi.html"' title='Về tác giả'>Tác giả</a></li>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
             <li><a expr:href='data:blog.homepageUrl + "2007/12/quy-nh-s-dng-cc-ni-dung-trn-th-thut.html"' title='Quy định'>Quy định</a></li>
       <li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"' title='Nhận xét'>Nhận xét</a></li>
       <li class='last'><a expr:href='data:blog.homepageUrl + "rss.xml"' title='RSS'>RSS</a></li>
   </ul>
 </div>
</b:includable>
</b:widget>
</b:section>
      </div>

Bạn đã biết tôi thêm bằng cách nào rồi chứ?

Đến đây coi như chúng ta đã làm xong! Nếu có gặp khó khăn hãy comment dưới bài viết này để được giúp đỡ. Chúc thành công!

Google vừa bổ sung hộp tìm kiếm vào gói Web Elements (*). Với hộp tìm kiếm này, kết quả truy vấn sẽ được hiển thị ngay bên dưới hộp tìm kiếm đi kèm thẻ hiện từ ưu tiên có hình thức khá giống với Search Box, một tiện ích mới được bổ sung vào Blogger.

Đặc biệt hộp tìm kiếm này cho phép người dùng AdSense thêm mã nhà xuất bản để kiếm tiền khi người dùng nhấn xem các quảng cáo đi kèm. Việc này khắc phục được nhược điểm của tiện ích Search Box của Blogger.

Truy cập http://www.google.com/webelements/customsearch/, bạn được yêu cầu đăng nhập (nếu chưa đăng nhập trước đó), ngay bên cạnh Configure (Cấu hình) hãy trỏ chuột chọn Search my site and use AdSense for Search, nhập mã nhà xuất bản có dạng pub-xxxxxxxxxxxxxxxx (tìm trong tài khoản AdSense) và lấy code.



Người dùng nên đặt code vào vị trí đủ rộng để kết quả tìm kiếm xuất hiện trông dễ nhìn hơn.

Bạn có thể thử nghiệm hộp tìm kiếm phía trên bài viết này. Tuy nhiên một nhược điểm được tìm thấy đó là màu sắc trong kết quả tìm kiếm lại không tự động điều chỉnh phù hợp với blog. Không biết bạn có gợi ý nào hay hơn?

(*) Google Web Elements cho phép thêm các sản phẩm Google yêu thích vào trang web của bạn. Ngoài sản phẩm được nêu, bạn có thể sử dụng nhiều sản phẩm khác như Lịch, Tin tức, Bản đồ, Trình diễn,...

Cập nhật:

Cám ơn gợi ý của Ngankvn@ về cách chuyển đổi màu sắc. Sau khi tìm hiểu, Thủ Thuật Blog xin gợi ý bạn cách điều chỉnh màu trong kết quả tìm kiếm như sau:

Chúng ta có thể thêm đoạn mã sau đây vào phần CSS của template (Giữa thẻ <b:skin><! và ]]></b:skin>):

/* Màu tiêu đề kết quả */
#cse .gsc-control-cse .gs-title{
 color: #FFCC66;
 font-weight: bold;
 font-size:12px;
} 
/* Màu đoạn text chú thích */
#cse .gsc-control-cse .gs-snippet{
 color: #FFFFFF;
}
/* Màu URL phía dưới kết quả */
#cse .gsc-control-cse .gs-visibleUrl{
 color: #008000;
}

Lưu ý: Nhớ điều chỉnh lại các giá trị màu sau dấu # của thuộc tính color hoặc dùng biến màu (ví dụ: $textcolor) tìm thấy trong template.

Cách khác: Cũng tương tự nhưng bạn chèn kèm dưới đoạn code lấy được trong phần đầu vào tiện ích HTML/JavaScript:

<style type="text/css">
/* Màu tiêu đề kết quả */
#cse .gsc-control-cse .gs-title{
 color: #FFCC66;
 font-weight: bold;
 font-size:12px;
} 
/* Màu đoạn text chú thích */
#cse .gsc-control-cse .gs-snippet{
 color: #FFFFFF;
}
/* Màu URL phía dưới kết quả */
#cse .gsc-control-cse .gs-visibleUrl{
 color: #008000;
}
</style>