Tạo widget "Kết nối bạn bè" giống OwlTek

Có thể bạn thích

Hôm nay mình sẽ hướng dẫn các bạn thêm widget Kết nối bạn bè giống Owl Tek Blog. Cùng bắt đầu nào!

Widget "Kết nối bạn bè" giống OwlTekBlog

Đầu tiên, các bạn cần tạo một widget HTML/Javascript mới trong phần Bố cục.
Chèn đoạn mà sau đây vào:

<div class="friend">
<table>
<tr>
<td><img src='https://owltek.blogspot.com/favicon.ico'/>
<a href='https://owltek.blogspot.com/' target='_blank'>
OwlTek</a><span><marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2">OwlTek</marquee></span></td>
<td><img src='https://owltek.blogspot.com/favicon.ico'/>
<a href='https://owltek.blogspot.com/' target='_blank'>
OwlTek</a><span><marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2">OwlTekv</marquee></span></td>
</tr>
<tr>
<td>
<img src='https://owltek.blogspot.com/favicon.ico'/>
<a href='https://owltek.blogspot.com/' target='_blank'>
OwlTek</a><span><marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2">OwlTek</marquee></span>
</td>
<td>
<img src='https://owltek.blogspot.com/favicon.ico'/>
<a href='https://owltek.blogspot.com/' target='_blank'>
OwlTek</a><span><marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2">OwlTek</marquee></span>
</td>
</tr>
<tr>
<td><img src='https://owltek.blogspot.com/favicon.ico'/>
<a href='https://owltek.blogspot.com/' target='_blank'>OwlTek</a><span><marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2">OwlTek</marquee></span></td>
<td><img src='https://owltek.blogspot.com/favicon.ico'/>
<a href='https://owltek.blogspot.com/' target='_blank'>
OwlTek</a><span><marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2">OwlTek</marquee></span></td>
</tr>
</table>
</div>

Chèn thêm đoạn CSS này vào dưới đoạn trên:

<style>
.friend{    height: 320px;
    overflow: auto;}
.friend td{    padding: 4px 3px;
    background: linear-gradient(135deg,#353638 50%,#2a2b2d 50%);}
.friend img{top: 4px;
    border-radius: 100%;
    border: 2px solid #eee;
    background:#fff;max-width:16px;max-height:auto}
.friend span{display:block;font-size: 13px;text-align:center;}
.friend a{    font-size: 17px;
    margin-left: 8px;
    font-weight: 700;
    color: #fff!important;max-width: 16px; max-height: 16px;}
.friend a:hover{opacity:.7}
.friend td{width:50%}
.friend td:hover{opacity:.7}
.friend table{width:100%}
.connect a{display: block;
    padding: 6px 0;
    border-radius: 40px;
    text-align: center;
    background: linear-gradient(135deg,#2193b0,#6452cd);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;}
.connect a:hover{opacity:.7}

.friend::-webkit-scrollbar { width:0}
.connect a:before{content: '\f0c1';
    font-family: FontAwesome;
    font-weight: normal;
    margin-right: 8px;
    border-radius: 100%;
    background: rgb(255,255,255,.2);
    padding: 4px 5px;}
</style>

Cách sử dụng widget

Widget vẫn còn sơ sài và cách sử dụng hơi phức tạp tí, cần sự chịu khó của bạn ^^.

Thêm liên kết mới

Để thêm liên kết mới, các bạn thêm đoạn mã sau vào trong thẻ <tr>...</tr>

<td><img src='https://owltek.blogspot.com/favicon.ico'/> <a href='https://owltek.blogspot.com/' target='_blank'> Owl Tek Blog</a><span><marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2">Chia sẻ thủ thuật lập trình</marquee></span></td>

• Phần màu xanh lá: Các bạn thay bằng một link ảnh, hoặc một link favicon.
• Phần màu đỏ: Thay bằng URL dẫn đến trang blog/website đó.
• Phần màu xanh dương: Thay bằng tiêu đề của blog/website đó.
• Phần màu hồng: Mô tả của blog/website đó.

Vì đây là widget 2 cột, do đó trong mỗi thẻ <tr>...</tr>, các bạn chỉ được thêm 2 liên kết mới mà thôi. Sang liên kết thứ 3,5,7,... các bạn cần để nó trong một thẻ <tr> mới.

Đây cũng là một tiện ích nhỏ nếu như bạn muốn phân tầng độ ưu tiên những blog bạn bè thân thiết của bạn.

Bonus nút liên kết

Nếu cần thiết, bên dưới widget bạn nên để một button dẫn đến trang liên kết để người chưa liên kết có thể kết nối với bạn, chỉ cần bỏ <!-- ->, hay đổi URL là có thể sử dụng.

Kết nối bạn bè với Owl Tek Blog

Sau khi đọc xong, bạn đã muốn kết nối với Owl Tek chưa? ^^ Kết nối ngay tại: owltek.blogspot.com/connect