Gia Huy NY BLOG

Blog chia sẻ ảnh chất lượng cao - thủ thuật hay - ảnh bìa chất

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

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

Lê Võ Gia Huy Designer

Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
Các bạn hãy đóng góp ý kiến của mình vào đây giúp tôi nhé !
Mọi chi tiết xin liên hệ:
Email : giahuylevo412@gmail.com
Facebook: https://www.facebook.com/giahuynyblog/
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!

  • 9 nhận xét: