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,0px1px 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 5px0;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

Admin: Lê Quốc Dũng

Chào mừng bạn đã đến với Blog của tôi. Website chia sẻ Thủ Thuật - Phần Mềm - Ảnh Đẹp - PSD tổng hợp, ... được cập nhật liên tục. Mong được mọi người quan tâm.