Widget trao đổi liên kết đẹp cho Blogger – Blogspot
admin 5 năm trước

Widget trao đổi liên kết đẹp cho Blogger – Blogspot

Trong bài viết này, mình sẽ hướng dẫn cho bạn tạo một cái Widget trao đổi liên kết đẹp và tiện lợi, giúp bạn có thể trao đổi liên kết với blog/ website nào mà bạn muốn hợp tác để phát triển lâu dài.

Vì mình chuộng sự đơn giản và đẹp nên thiết kế của mình cũng không cầu kỳ hoa lá cành cho lắm, bạn hãy xem hình bên dưới sẽ rõ.

Còn tính tiện lợi ở đây là gì, đó là vì đây là một Widget, nó giúp bạn có thể chỉnh sửa một cách dễ dàng trong phần quản lý giao diện (Layout) của Blogger.

Nhìn những hình trên chắc chắn bạn đã hình dung được cái Widget này nó tuyệt vời như thế nào rồi phải không bạn. Và giờ mình bắt đầu tạo widget này thôi nào.

Hướng dẫn tạo Widget trao đổi liên kết cho Blogger

Bước 1: Bạn thêm đoạn CSS này vào cặp thẻ <style>

.allfreevn-lk-widget{margin:0;padding:0}
.allfreevn-lk-widget li{margin:0;padding:0;line-height:normal;display:block;float:left;width:33.33333333333%;text-align:center}
.allfreevn-lk-widget a{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:block;margin:0 5px 5px 0;padding:5px 8px;-webkit-transition:.3s;letter-spacing:-.5px;border:1px solid #424242;border-radius:3px;-moz-transition:.3s;-o-transition:.3s;color:#777!important;font-weight: normal;background: rgba(0,0,0,.1);}
.allfreevn-lk-widget a:hover{color: #fd4326!important;border:1px solid}

– Trong đoạn CSS trên, hãy chú ý dòng text-overflow:ellipsis, khi bạn đặt tên của liên kết quá dài thì nó sẽ tự động chuyển thành dấu 3 chấm. Nếu bạn không thích như thế thì hãy xóa nó đi.

Bước 2: Bạn thêm đoạn code này vào nơi bạn muốn đặt Widget trao đổi liên kết, và nhớ đặt bên trong cặp thẻ <b:section>...</b:section>

<b:widget id='LinkList1' locked='false' title='Trao đổi liên kết' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
<div class='allfreevn-lk-widget'>
<ul>
<b:loop values='data:links' var='link'>
<li><a target='_blank' rel='nofollow' expr:href='data:link.target' expr:title='data:link.name'><data:link.name/></a></li>
</b:loop>
</ul>
</div><b:include name='quickedit'/>
</b:includable>
</b:widget>

– Đoạn code trên rất tuyệt, nó giúp cho bạn khi tên của liên kết biến thành dấu 3 chấm và bạn không thấy rõ là gì thì khi bạn rê chuột vào sẽ thấy dòng chú thích cho tên liên kết đó một cách đầy đủ.

Lời kết

Vậy là xong hướng dẫn tạo Widget trao đổi liên kết cho Blogger rồi đấy, mong rằng với hướng dẫn này sẽ giúp bạn có được rất nhiều bạn hữu xung quanh cùng trao đổi liên kết với bạn.
Nếu trong quá trình cài đặt mà gặp trục trặc gì thì vui lòng để lại thông tin của bạn vào bình luận bên dưới, mình sẽ nhiệt tình giúp đỡ bạn.
Nếu thấy hay thì ngại gì chia sẻ thông tin này cho các bạn của bạn cùng xem chứ.
Chúc bạn thành công.

17 lượt xem | 1 Bình luận
Hiện tại tác giả vẫn chưa cập nhật chia sẻ của mình
  1. Unknown

    Bạn cho mình hỏi cách tạo scroll bar dọc khi mà nội dung quá dài hả bạn?
    Trước mình có tìm nhưng chỉ toàn thấy scroll cho cả 1 widget làm nó tràn lên cả tiêu đề widget, giờ mình chỉ muốn thanh cuộn đó chưa mỗi nội dung widget thôi thì phải làm ntn vậy?

Bình luận gần đây

https://allfreevn.com
bùi thủy 1 tuần trước
sao giờ em không tải ảnh nhỏ được ạ...
https://allfreevn.com
Phuongnguyen 2 tháng trước
Rất tuyệt...
https://allfreevn.com
dfafa 2 tháng trước
rất tốt...
https://allfreevn.com
mina 2 tháng trước
rất tốt....
https://allfreevn.com
Kim Yến 3 tháng trước
Cảm ơn bạn đã chia sẻ...
https://allfreevn.com
Kim Yến 3 tháng trước
HAy lắm bạn ơi...
https://allfreevn.com
Kim Yến 4 tháng trước
hay quá bạn ơ...
https://allfreevn.com
Kim Yến 4 tháng trước
Cảm ơn bạn đã chia sẻ nhé...
https://allfreevn.com
Kim Yến 5 tháng trước
Cảm ơn bạn rất nhiều...
https://allfreevn.com
Akuna 9 tháng trước
ủa, không down được, yêu cầu quyền truy cập là sao ta? Share file mà không để public. Kì ta...