Tiện ích Favicon Link Exchange cho Blogger

Trao đổi liên kết là một trong những cách làm tăng lượng truy cập cho blog và cũng giúp phổ biến blog của bạn ra cộng đồng dân cư mạng. Chắn hẳn bạn từng biết đến các kiểu trao đổi liên kết như Text Link Exchange, Logo Link Exchange, Banner Link Exchange.

Hôm nay xin giới thiệu một kiểu trao đổi liên kết mới là Favicon Link Exchange. Đây cũng là biển thể của Logo Link Exchange nhưng logo ở đây là icon 16x16 dưới các định dạng file như .ico, .png, .jpg, .gif. Với ý tưởng trao đổi liên kết bằng favicon là biểu tượng cho một blog, tôi tạo ra một tiện ích gọi là Favicon Link Exchange. Tiện ích này có thể đặt trong một tiện ích HTML/JavaScript hoặc đặt ở cuối bài viết.



Dưới đây là code cho tiện ích.

<table border="0" cellpadding="0" cellspacing="2" align="center">
<tbody><tr>
<td><a href="URL_Blog_1" target="_blank" title="Tiêu đề Blog_1"><img alt="" src="URL_favicon_Blog_1" class="favicon" title="Tiêu đề Blog_1" /></a></td>
<td><a href="URL_Blog_2" target="_blank" title="Tiêu đề Blog_2"><img alt="" src="URL_favicon_Blog_2" class="favicon" title="Tiêu đề Blog_2" /></a></td>
<td><a href="URL_Blog_3" target="_blank" title="Tiêu đề Blog_3"><img alt="" src="URL_favicon_Blog_3" class="favicon" title="Tiêu đề Blog_3" /></a></td>
…// bạn thêm vào theo định dạng HTML tương tự
…// bạn thêm vào theo định dạng HTML tương tự
<td><a href="URL_Blog_n" target="_blank" title="Tiêu đề Blog_n"><img alt="" src="URL_favicon_Blog_n" class="favicon" title="Tiêu đề Blog_n" /></a></td>
</tr>
</tbody></table>
<style type="text/css">
.favicon {width:16px;height:16px;padding: 2px;border: 1px solid #7b68ee;}
</style>

Việc bạn cần làm là lần lượt thay địa chỉ blog, tiêu đề blog và địa chỉ icon blog trong đoạn code ở trên.

* Nếu muốn đặt tiện ích trên sidebar thì đặt toàn bộ đoạn code ở trên trong một tiện ích HTML/JavaScript.

* Nếu muốn đặt tiện ích ở cuối bài viết thì khi chỉnh sửa HTML của Template, chọn Mở rộng mẫu tiện ích, đặt trước dòng ]]></b:skin> với đoạn code bên dưới.

.favicon {width:16px;height:16px;padding: 2px;border: 1px solid #7b68ee;}

Sau đó tìm dòng <div class='post-footer-line post-footer-line-3'> rồi đặt trước nó với đoạn code bên dưới.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border="0" cellpadding="0" cellspacing="2" align="center">
<tbody><tr>
<td><a href="URL_Blog_1" target="_blank" title="Tiêu đề Blog_1"><img alt="" src="URL_favicon_Blog_1" class="favicon" title="Tiêu đề Blog_1" /></a></td>
<td><a href="URL_Blog_2" target="_blank" title="Tiêu đề Blog_2"><img alt="" src="URL_favicon_Blog_2" class="favicon" title="Tiêu đề Blog_2" /></a></td>
<td><a href="URL_Blog_3" target="_blank" title="Tiêu đề Blog_3"><img alt="" src="URL_favicon_Blog_3" class="favicon" title="Tiêu đề Blog_3" /></a></td>
…// bạn thêm vào theo định dạng HTML tương tự
…// bạn thêm vào theo định dạng HTML tương tự
<td><a href="URL_Blog_n" target="_blank" title="Tiêu đề Blog_n"><img alt="" src="URL_favicon_Blog_n" class="favicon" title="Tiêu đề Blog_n" /></a></td>
</tr>
</tbody></table>
</b:if>

More about →

Cách tạo favicon cho blog

Favicon là gì vậy? Favicon là từ viết tắt cho cụm từ tiếng Anh “favorite icon” có nghĩa là “biểu tượng ưa thích nhất”. Nó thường là biểu tượng hình vuông có kích cỡ 16×16, 32×32 hoặc 64×64 pixel có liên quan đến một website nào đó mà chúng ta sử dụng trên thanh địa chỉ của công cụ trình duyệt, trên các thanh Favorites hoặc Bookmarks của công cụ trình duyệt.

Favicon của Blogger là một chữ B màu trắng nằm trong hộp màu cam. Bạn cũng có thể tạo Favicon cho website hoặc blog của bạn một cách dễ dàng. Bạn cần tạo một hình favicon rồi upload nó lên một webhost hình ảnh, sau đó copy code liên kết trực tiếp của favicon rồi đưa vào một đoạn code HTML rồi dán vào Template.

Nếu không có thời gian nhiều thì bạn cũng có thể theo một cách dễ hơn và nhanh chóng chỉ trong vài phút thì có thể có được favicon.

Bước 1: Tìm một hình ảnh định dạng .jpg, .gif hoặc .png format mà bạn muốn làm favicon. Chỉnh kích cỡ hình thành dạng vuông ví dụ 250x250, 125x125 pixel hoặc nhỏ hơn. Bạn không cần lo ngại rằng hình của bạn quá lớn nhé. Công cụ dưới đây sẽ làm nhỏ hình của bạn lại cho thích hợp.Bạn cũng có thể tự tạo favicon tại địa chỉ favicon.cc.

Bước 2: Đến trang web Favicon Generator.

Chọn Browse hình mà bạn muốn làm favicon. Chọn “Upload it”. Sau đó bạn chỉ việc copy dòng code của favicon.

Bước 3: Đăng nhập Blogger, vào Bố cục (Layout) – Chỉnh sửa HTML (Edit HTML). Dán đoạn code vừa copy vào sau thẻ mở <head> như thế này.

<head>
<b:include data='blog' name='all-head-content'/>

<!--[if IE]>
<link href='URL_favicon' rel='shortcut icon' type='image/x-icon'/>
<![endif]-->
<link href='URL_favicon' rel='icon' type='image/x-icon'/>

<title><data:blog.pageTitle/></title>

Lưu Template là xong.

Mở blog của bạn và bạn sẽ thấy favicon sẽ hiện ra chỉ trong vài phút sau đó. Lưu ý favicon hiển thị tốt trên các công cụ trình duyệt như Firefox, Safari, Opera. Đối với IE có lúc hiển thị có lúc không hiển thị.

More about →