Thêm favicon cho tiện ích LinkList

Thêm favicon cho tiện ích LinkList 20 Tag:  Favicons   20/11/2011   Thời lượng đọc: 1:41   Đối với Blogspot, khi bạn muốn thêm một tiện ích ...

Thêm favicon cho tiện ích LinkList

20
20/11/2011 Thời lượng đọc: 1:41 
Đố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.

Bây giờ hãy xem xét cấu trúc XML của một tiện ích LinkList. Trước tiên Đăng nhập Blogger, vào Design >> Page Elements. 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. Sau đó vào Edit HTML chọn Expand Widget Templates. Dùng từ khóa LinkList để tìm đến đoạn code của tiện ích này như sau:

  1. <b:widget id='LinkList1' locked='false' title='My Favourite Resources' type='LinkList'>
  2. <b:includable id='main'>
  3. <b:if cond='data:title'><h2><data:title/></h2></b:if>
  4.  <div class='widget-content'>
  5.    <ul>
  6.      <b:loop values='data:links' var='link'>
  7.        <li><aexpr:href='data:link.target'><data:link.name/></a></li>
  8.      </b:loop>
  9.    </ul>
  10.   </div>
  11. </b:includable>
  12. </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:

  1. <li>
  2.   <a expr:href='data:link.target'>
  3.     <img expr:src='data:link.target + &quot;favicon.ico&quot;'/>
  4.     <data:link.name/>
  5.   </a>
  6. </li>

Cuối cùng, bạn có thể tùy biến CSS cho tiện í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
}

Lưu Template là hoàn thành.

COMMENTS

Name

Banner,2,Code,8,CSS,2,DNS cho Blogger,6,Favicon,1,HTML,6,JavaScript,2,Kiếm tiền với Youtube,1,Labels,1,Mật khẩu cho bài đăng,1,Nhãn,1,Search Google,1,Template Blogger,1,theme blogger,1,Thủ thuật Blogger,45,Thủ thuật Youtube,2,Tiệc ích Password,3,Tiện ích,9,Tiện ích bài viết liên quan,2,Trang,1,Wifi,1,Xóa bản quyền,1,
ltr
item
Khám Phá Blogger: Thêm favicon cho tiện ích LinkList
Thêm favicon cho tiện ích LinkList
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiq_t_Avd0-Qb8137Fz2fRgTm1kSAQ5ETqg3xDWskyOeWNhOLvLHF0Yj14JoGKjoZZb_YgCMGamYUq2bpCt_B5Sck01REzYCgqTqR45uAkp55dDtd_RaQt1p_w5gL0ni2AigIWfa_GhcA/s1600/favicon4links.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiq_t_Avd0-Qb8137Fz2fRgTm1kSAQ5ETqg3xDWskyOeWNhOLvLHF0Yj14JoGKjoZZb_YgCMGamYUq2bpCt_B5Sck01REzYCgqTqR45uAkp55dDtd_RaQt1p_w5gL0ni2AigIWfa_GhcA/s72-c/favicon4links.GIF
Khám Phá Blogger
https://blogger.affimart.com/2012/05/them-favicon-cho-tien-ich-linklist.html
https://blogger.affimart.com/
http://blogger.affimart.com/
http://blogger.affimart.com/2012/05/them-favicon-cho-tien-ich-linklist.html
true
4203661997903332293
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy