TẠO WIDGET LIÊN KẾT BẠN BÈ ĐẸP CHO BLOGSPOT

TẠO WIDGET LIÊN KẾT BẠN BÈ ĐẸP CHO BLOGSPOT

Chào các bạn mình là Nguyên , thì hôm nay mình xin chia sẻ các bạn một thủ thuật nhỏ đó chính là thêm widget liên kết bạn bè với màu xanh tươi mát kết hợp với hiệu ứng hover.
                                         Hình Minh Họa

Các bước thực hiện:

Bước 1: Vào Blogger -> Bố cục -> Html/Javascript -> thêm toàn bộ code này:
<style>
#zstips-lkbb-widget{padding:0;margin:0;list-style:none}
.zstips-lkbb-widget{margin:0;padding:0}
.zstips-lkbb-widget li{margin:0;padding:0;line-height:normal;display:block;width:50%;float:left}
.zstips-lkbb-widget a {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
    margin: 0 5px 5px 0;
    padding: 6px 15px;
    font: 400 16px Roboto!important;
    -webkit-transition: .3s;
    letter-spacing: -.5px;
    background: rgb(30, 135, 240);
    border-radius: 50px 50px 50px 6px;
    -moz-transition: .3s;
    -o-transition: .3s;
    color: #fff;
    border: 1px solid;
}
.zstips-lkbb-widget a:hover{color: #1e87f0;background-color: #ffffff;border-radius: 50px 50px 50px 0px; border: 1px solid;}
</style>
<div id='zstips-lkbb-widget'>
<div class='zstips-lkbb-widget'>
<li><a href='#' target='_blank' title=''>Liên Kết Trống</a></li>
<li><a href='#' target='_blank' title=''>Liên Kết Trống</a></li>
<li><a href='#' target='_blank' title=''>Liên Kết Trống</a></li>
<li><a href='#' target='_blank' title=''>Liên Kết Trống</a></li>
<li><a href='#' target='_blank' title=''>Liên Kết Trống</a></li>
<li><a href='#' target='_blank' title=''>Liên Kết Trống</a></li>
<li><a href='#' target='_blank' title=''>Liên Kết Trống</a></li>
<li><a href='#' target='_blank' title=''>Liên Kết Trống</a></li>
<li><a href='#' target='_blank' title=''>Liên Kết Trống</a></li>
<li><a href='#' target='_blank' title=''>Liên Kết Trống</a></li>
</div></div>

Bước 2: Thay dấu # thành Url của bạn và thay liên kết trống thành Tên bạn muốn hiển thị 


Kết Thúc:


- Chúc các bạn thành công !
- Và ghé thăm tường mình mỗi ngày nhé !
                                              Via: Blog Sẻ Chia Thủ Thuật
Share:

Nhận Xét

6 comments: