Thêm favicon cho tiện ích LinkList

Đối với Blogspot, khi bạn muốn thêm một tiện ích liệt kê các trang web hoặc blog mà bạn ưa thích thì bạn thường dùng đến tiện ích LinkList. Tính năng của tiện ích này rất đơn điệu, bạn chỉ có thể tùy biến CSS cho các liên kết. Qua bài viết này, mình sẽ giúp bạn sáng tạo thêm một chút, thêm favicon cho các liên kết của tiện ích LinkList.

- Kể từ khi Blogger tích hợp tính năng Favicon thì một liên kết favicon của blogspot có dạng như sau:
http://tenblogcuaban.blogspot.com/favicon.ico
- Theo quy tắc phổ biến, liên kết favicon của một website (được xây dựng trên các nền tảng Wordpress, Joomla, …) có dạng như sau: http://www.tenwebsite.com/favicon.ico.
Hôm nay namkna sẽ hướng dẫn bạn tạo một tiện ích liên kết bạn bè mới. xem hình minh họa bên dưới,

☼ Cách tiến hành: 

   1- Đăng nhập vào Blog

   2- Vào thiết kế (Design)

   3- Chọn Phần tử trang (Page Elements)

   4- Thêm một tiện ích LinkList rồi lần lượt thêm địa chỉ (URL) và tên trang tương ứng cho các liên kết ưa thích mà bạn muốn tạo. 

   5- Sau khi điền xong bạn Lưu tiện ích (widget) lại.

   6- Tiếp theo vào Chỉnh sửa HTMl (Edit HTML)

  7- Chọn Mở rộng tiện ích mẫu (Expand Widget Templates). Dùng từ khóa LinkList để tìm đến đoạn code của tiện ích này như sau:

<b:widget id='LinkList1' locked='false' title='My Favourite Resources' 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>

- Trong đoạn code trên, cần chú ý đến dòng

<li><a expr:href='data:link.target'><data:link.name/></a></li>

- Nó biểu thị các liên kết. Trong đó data:link.target chính là đích đến của các liên kết. Như vậy để tự động thêm favicon vào trước các liên kết thì chúng ta thay thế dòng code nói trên bằng đoạn code như sau:

<li>

  <a expr:href='data:link.target'>

    <img expr:src='data:link.target + &quot;favicon.ico&quot;' />

    <data:link.name/>

  </a>

</li>

  8- Tiếp theo, bạn có thể tùy biến CSS cho tiện ích, bằng cách thêm đoạn code bên dưới vào trước dòng ]]></b:skin>.

#LinkList1 li {
background-color: #C89A2B;
border-top: 2px solid #C89A2B;
border-bottom: 2px solid #C89A2B;
cursor: pointer;
margin: 2px 0;
padding:0;
float:left;
width:50%;
list-style:none;
clear:none
}
#LinkList1 li a {
color: #069 !important;
font-weight: normal !important;
padding-left:5px
}
#LinkList1 li img {
display: inline-block;
height: 16px;
width: 16px;
margin-right: 5px;
vertical-align:middle;
border:none
}
#LinkList1 li:hover {
background-color: #C25A3B;
border-color: #606971
}

  9- ChọLưu Mẫu (Save Template) là hoàn thành.

Theo: Thuthuatbloger.