Tạo khung Liên Kết Bạn Bè 3 Cột Kèm Hiệu Ứng Hover Cho Blogspot.

HOÀNG HUY 23:18
Khung liên kết 3 cột này rất tương thích với các blog thủ thuật có kích thước lớn nhé, ưu điểm của cái khung này là responsive, sẽ tự động chỉnh kích thước cho phù hợp với blog.
Tạo khung Liên Kết Bạn Bè 3 Cột Kèm Hiệu Ứng Hover Cho Blogspot.

HƯỚNG DẪN CÁCH CHÈN:

Bước 1: Login Blogspot => Bố Cục thêm tiện ích HTML/JAVASCRIPT
Bước 2: Chèn đoạn code bên dưới vào trong:
<style>
#lien-ket-ban-be::-webkit-scrollbar{width:5px}
#lien-ket-ban-be::-webkit-scrollbar-thumb{background:#484848;border-radius:3px}
#lien-ket-ban-be::-webkit-scrollbar-thumb:active{background:#777}
#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:33.3%;margin:0;padding:0;line-height:normal;display:block;float:left;text-align:center}
.lien-ket-ban-be a{padding-left:25px;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:5px;font-size:15px;font-weight:400;-webkit-transition:.3s;border-radius:3px;-moz-transition:.3s;-o-transition:.3s;color:#000;border:1px solid #e5e5e5}
.lien-ket-ban-be a:hover{color:#f90!important;border:1px solid;text-decoration:none!important}
.lien-ket-ban-be a:before{content:"\f007";font-family:"Font Awesome 5 Free";color:#00c0ef;margin-right:10px;font-size:11px;font-weight:700}
</style>
<div id='lien-ket-ban-be'>
<div class='lien-ket-ban-be'>
<ul>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href='#' target='_blank'>Đặt liên kết</a></li>
<li><a href='#' target='_blank'>Đặt liên kết</a> </li>
<li><a href='#' target='_blank'>Đặt liên kết</a> </li>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href=#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href='#' target='_blank'>Đặt liên kết</a> </li>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href='#' target='_blank'>Đặt liên kết</a></li>
<li><a href='#' target='_blank'>Đặt liên kết</a> </li>
<li><a href='#' target='_blank'>Đặt liên kết</a> </li>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<!--<li><a href='#' target='_blank' title='Liên kết blog'>Đặt liên kết</a></li>-->
</ul>
</div></div>
Bước 3: Chèn code bên dưới vào sau <head>
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://cdn.rawgit.com/hung1001/blog/master/lastest/font-awesome/css/all.css");
loadCSS("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&amp;amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese");
//]]>
</script>
Bước 4: Lưu lại là xong.

Xem Demo

Tác giả: - Admin Trần Huy
Ghi rõ nguồn s2topvn.blogspot.com khi đăng tải lại bài viết này