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.