Widget trao đổi liên kết đẹp cho Blogger – Blogspot
admin 6 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.

32 lượt xem | 0 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



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

https://allfreevn.com
adhella 4 phút trước
Immunohistochemistry shows lesser labeling of ОІENaC in the lithium treated rats compared to that in the controls what are kamagra tablets...
https://allfreevn.com
KtatsReidsen 2 giờ trước
get lyrica for sale buying cheap lyrica price where to get cheap lyrica pill...
https://allfreevn.com
TeoCeada 13 giờ trước
[url=http://tetracyclinetabs.com/]tetracycline 500mg cost[/url]...
https://allfreevn.com
TedCeada 17 giờ trước
[url=https://prednisonetb.com/]generic prednisone cost[/url]...
https://allfreevn.com
JoeCeada 1 ngày trước
[url=https://bupropion.directory/]2018 wellbutrin[/url] [url=https://zoloft2023.com/]zoloft generic brand[/url] [url=https://pleasantspharmacy.com/]online pharmacy non prescription drugs[/url] [url=https://dapoxetine.cyou/]buy priligy uk[/url] [url=https://cialisip.com/]otc generic cialis[/url]...
https://allfreevn.com
JoeCeada 1 ngày trước
[url=https://erythromycintabs.online/]erythromycin 250mg tab[/url] [url=https://zoloft.wiki/]cheap zoloft online[/url] [url=https://cialisip.com/]cialis 10 mg tablet cost[/url]...
https://allfreevn.com
JosephEroLf 1 ngày trước
[url=https://anafranil.cyou/]anafranil 10mg tablets[/url] [url=https://antabuse.ink/]buy generic antabuse[/url] [url=https://anafraniltab.shop/]anafranil ocd[/url] [url=https://abilifytab.shop/]10 mg abilify price[/url] [url=https://ventolin.quest/]ventolin inhalers[/url] [url=https://lasix.charity/]furosemide 20 mg tablets[/url] [url=https://cephalexintabs.monster/]buy cephalexin 250 mg[/url] [url=https://buypropranolol.life/]cheap inderal[/url]...
https://allfreevn.com
exonse 1 ngày trước
ivermectin dosage for rabbits ivermectin for scabies ivermectin causes seizures...