Hướng Dẫn Tạo Khung Hover Liên Kết Có Dạng Nét Đứt Cực Chất Cho Blogger

Hello xin chào các bạn đã quay trở lại với bài viết của mình,hôm nay mình sẽ hướng dẫn các bạn tạo khung hover liên kết có dạng nét đứt mà Blog mình đang sử dụng này hihi :D



Bước 1 : Các bạn vào bố cục >>Chọn Thêm Tiện Ích>>HTML/Javascript rồi dán code này vào :
<style>
#lien-ket-ban-be::-webkit-scrollbar{width:5px}
#lien-ket-ban-be::-webkit-scrollbar-thumb{background:#4B77BE;border-radius:15px}
#lien-ket-ban-be::-webkit-scrollbar-thumb:active{background:#eee}
#lien-ket-ban-be{padding:0;margin:0;list-style:none}
.lien-ket-ban-be{margin:0;padding:0}
.lien-ket-ban-be ul{padding:6px 0.8px 6px 6px}
.lien-ket-ban-be li{width:50%;margin:0;padding:0;line-height:normal;display:block;float:left;text-align:center}
.lien-ket-ban-be a{box-shadow:0 1px 1px rgba(255,255,255,0.35) inset,0px 1px 1px rgba(0,0,0,0.3);transition: all 0.5s ease 0s;width:auto;text-overflow:ellipsis;overflow:hidden;display:block;-webkit-box-orient:vertical;-webkit-line-clamp:1;white-space:nowrap;margin:0 5px 5px 0;padding:6px;font-size:14.5px;font-weight:400;-webkit-transition:.3s;border-radius:3px;-moz-transition:.3s;-o-transition:.3s;color:#66689c;border:1px dashed #66689c}
.lien-ket-ban-be a:hover{text-decoration:none!important;text-transform:uppercase;border:1px groove #66689c}
.lien-ket-ban-be li.act{width:100%}
</style>
<div id="lien-ket-ban-be">
<div class="lien-ket-ban-be">
<ul>
<li><a href='https://www.starnhanblog.xyz/' target='_blank' title='Star Nhân Blog'> Star Nhân Blog</a></li>

<li><a href='https://www.startinhit.net' target='_blank' title=' Blog chia sẽ thủ thuật'>  Star Tỉnh IT</a></li>


<li><a href='https://hhitcom.blogspot.com' target='_blank' title='Huy Hoàng IT'> Huy Hoàng IT</a></li>

<li><a href='https://www.thanhphongit.tk/index.html' target='_blank' title='Thanh Phong IT'> Thanh Phong IT</a></li>

<li><a href='https://hungstar-it.blogspot.com/' target='_blank' title='Hưng Star IT'> Hưng Star IT</a></li>

<li><a href='https://www.quanchanhkun.tk/' target='_blank' title='Prince Design Blog'> Prince Design Blog</a></li>

<li><a href='https://wwwhuyny.blogspot.com/' target='_blank' title='Gia Huy NY'> Gia Huy NY Blog</a></li>

<li><a href='https://leminhut.blogspot.com/' target='_blank' title='Lê minh út'> Star Út Blog</a></li>

<li><a href='https://www.s2topvn.com/' target='_blank' title='S2Top Vn'> S2TOP VN Blog</a></li>

<li><a href='http://www.nguyenhuyit.tk/' target='_blank' title='Đức Huy Blog'> Đức Huy Blog</a></li>


<li><a href='https://chanhducblogger.blogspot.com/' target='_blank' title='Star Đức Blog'> Star Đức Blog</a></li>

<li><a href='https://tieubaoblog.blogspot.com/' target='_blank' title='Tiểu Bảo Blog'> Tiểu Bảo Blog</a></li>

<li><a href='http://www.phucstar-it.tk/' target='_blank' title='Star Phúc IT'> Star Phúc IT</a></li>

<li><a href='https://www.theloi.xyz/' target='_blank' title='Thế Lợi IT'> Thế Lợi IT</a></li>


<li><a href='http://www.thanhphuit.xyz/' target='_blank' title='Thanh Phú IT'> Thanh Phú IT</a></li>

<li><a href='https://lebalongit.blogspot.com/' target='_blank' title='Lê Bá Long IT'> Lê Bá Long IT</a></li>

<li><a href='https://www.duongngocqui007.cf/' target='_blank' title='Anh Qúy IT Network'> Anh Qúy IT Network</a></li>

<li><a href='https://www.nguyenduyblog.com/' target='_blank' title='Nguyễn Duy Blog'> Nguyễn Duy Blog</a></li>


<li><a href='http://www.ngoctinhit.tk/' target='_blank' title='Ngọc Tính IT'> Ngọc Tính IT</a></li>

<li><a href='http://www.ducduytl.tk/' target='_blank' title='Đức Duy IT'> Đức Duy IT</a></li>

<li><a href='http://www.duyphuong.tk/' target='_blank' title='Duy Phương IT'> Duy Phương IT</a></li>

<li><a href='https://www.sibenit.com/' target='_blank' title='Sĩ Ben Blog'> Sĩ Ben Blog</a></li>
Bước 2 : Chọn lưu lại là xong rồi đó Chúc các bạn thành công!

Nguồn : Codedayroi.net

Tác giả: Phú Cường Blogger

Tôi là Cường, sinh viên năm cuối ngành Điện tử - Viễn thông trường Đại học Bách Khoa Hà Nội. Say hello to you!

  • Không được backlink và nói tục. Hãy là một độc giả có ý thức.

    26 nhận xét:

    1. Chúc các bạn ngày mới vui vẻ

      Trả lờiXóa
      Trả lời
      1. cho lk em lên 1 đê a

        Xóa
      2. thêm cái màu càng tốt =))

        Xóa
      3. Mún thêm màu gì a thêm cho

        Xóa
      4. màu nào nổi nhất á

        Xóa
      5. Ok mai a thêm màu theo blog của em

        Xóa
    2. Trả lời
      1. Mơn ông nhé thấy hay thì chia sẻ cho bạn bè cùng biết nhé =))

        Xóa
    3. :v còn mấy cái khung liên kết nào đẹp k

      Trả lờiXóa
    4. Hay nhỉ. Temp nhìn lạ mắt phết <3!

      Trả lờiXóa
    5. tui hay tương tác nè làm cái màu coi :v

      Trả lờiXóa
    6. Nhếch ở đâu thì ghi nguồn hộ vào nhé

      Trả lờiXóa
    7. https://nguyenthimytram.blogspot.com/
      - Đã đặt cho anh
      - tên NTMT Blog
      Mô tả : NTMT Blog

      Trả lờiXóa
      Trả lời
      1. Cố gắng phát triển blog rồi quay lại em nhé

        Xóa