• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Thêm favicon cho tiện ích LinkList

28
20/11/2011

Đố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><a expr: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.

{28 bình luậnAdd yours ?}

22:14:00, 20 thg 11, 2011

:5) hay!:L)

Reply
22:20:00, 20 thg 11, 2011

@mAn ĐiezEl Giải pháp này có thể giúp thay thế tiện ích BlogList sử dụng cho trường hợp này. Vì đối với tiện ích BlogList, favicon load rất chậm.

Reply
22:59:00, 20 thg 11, 2011

@Huỳnh Nhật HàVậy em phải thay ngay thôi :D

Reply
23:18:00, 20 thg 11, 2011

@NAD Các bạn cứ vọc đi nhé. Mới đi citi-tour về, vẫn chưa khỏe lắm nên chưa thể trả lời hết các câu hỏi của các bạn. Tuần sau cố gắng sắp xếp. Vẫn đang trong khóa học, hết tháng mới về.

Reply
00:09:00, 21 thg 11, 2011

Hay quá a Hà ơi Nhạc Dance

Reply
12:49:00, 21 thg 11, 2011

Rất hay! Để thay liền :)

Reply
13:27:00, 21 thg 11, 2011

Anh Hà ơi, cái quảng cáo làm trang web nó cứ bị giật giật ấy, anh mau khắc phục đi :D

Reply
Yolks
AUTHOR
21:15:00, 21 thg 11, 2011

Kỉ niệm gần 2 năm làm blog tại blog em , cái temp mới ý mà :4)

Reply
23:10:00, 21 thg 11, 2011

à há, tinh tế thật anh ạ

Reply
16:16:00, 22 thg 11, 2011

Anh ơi, em đã Cài đặt Bộ Yahoo Emoticons cho Comments trên Blog của em rồi, làm đúng như anh chỉ bảo nhưng sao nó lại hiển thị ở trên cùng nhỉ, em muốn nó nằm ngay bên cạnh khung Comments như của mọi người thì phải làm sao hả anh, chỉ giùm em với nhá. Thanks :D)

Reply
21:51:00, 22 thg 11, 2011

@Phạm Minh Tâm À code Bước 2 em đặt sau dòng <h4 id='comment-post-message'><data:postCommentMsg/></h4> là OK thôi.

Reply
01:16:00, 23 thg 11, 2011

code này dùng làm code liên kết blog cũng được ấy nhỉ?hihi

Reply
13:02:00, 23 thg 11, 2011

@ChipKool_Online Quá được ấy chứ :1)

Reply
22:09:00, 23 thg 11, 2011

@ Huỳnh Nhật Hà: Hờhờ... May quá em làm được rồi, cảm ơn anh nhiều nha:1)

Reply
22:19:00, 23 thg 11, 2011

Mà anh có biết tại sao Tien Nghuyen tức VnBlogspot bị hack không nhỉ:E)

Reply
13:32:00, 24 thg 11, 2011

@Phạm Minh TâmTheo mình việc mất tk là một thiệt thòi cho TN nhưng không phải không có cách làm lại, nếu TN đã 1 lần sao lưu blog của mình, thì chỉu việc đăng ký mới một tk khác và nhập blog của mình đã lưu vào là xong. ví dụ mình đã toàn bộ từ www.vnsupercar.net lên www.oquantrong.blogspot.com với 2 tk google khác nhau

Reply
12:55:00, 29 thg 11, 2011

Bác Hà giúp em cái này với
Tối hôm qua em nghịch cái gì mà giờ bấm vào nick của em ở chỗ comment thì lại ra Google+ chứ không ra Pro5 Blogger :7)

Reply
22:02:00, 30 thg 11, 2011

10 ngày chưa có bài mới nhá bác

Reply
03:27:00, 3 thg 12, 2011

- Minh nghi ra mot thu thuat giup cac blogger chuyen nghiep hon, ma cha biet xin post yeu cau thu thuat o dau, admin nhiet tinh giup minh nhe.

Reply
19:28:00, 5 thg 12, 2011

Đoạn code trên trong blog em hok có a Hà ơi, đoạn đó thềm vào đoạn nào thì phù hợp há anh :G)

Reply
17:10:00, 15 thg 5, 2012

Hay wa phai thu moi dc.Moi nguoi ghe tham blog cua minh nha S4foryou.Net

Reply
20:42:00, 25 thg 5, 2012

Có ai giúp tớ chút ko nè: cái list bạn bè 'blogger home' trên blog mình ko tự động update Favicon của các link trang khác, có ai biết chỉ mình khắc phục zới :I) :G)

Reply
15:40:00, 4 thg 6, 2012

bạn ơi, mình copy vào nhưng nó không thành bảng 2 cột như bạn, mà nó hiện ra 1 list, có link có favicon có cái không, mặc dù trang nào cũng có favicon cả

Reply
11:33:00, 10 thg 5, 2013

sao mình không làm được vậy?
Noi that van phong

Reply
11:07:00, 9 thg 8, 2016

site TinMoi.Mobi của mình làm bằng wordpres, thì cái thêm icon cho listlink này phải làm như nào mới được vậy bạn?

Reply
23:53:00, 17 thg 10, 2016

cái gì cũng cần giới hạn

cách trị mụn

Reply
22:55:00, 24 thg 11, 2016

cuộc sống k như cuộc đời


hiep dam

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn