Có nhiều bạn hỏi cách làm chuyên mục nổi bật giống muare ở ngoài trang chủ, mình đã rip phần này cho các bạn. Thật ra thì nó rất đơn giản. chỉ là html thuần mà thôi. Đầu tiên các bạn cần có 1 addon portal ở đây mình cài là EWRportal của 8wayrun Mã: Chuyên Mục Nổi Bật Điện thoại - Máy tính bảng Ô tô - Xe máy Máy tính - Laptop Điện máy Thời trang nữ Thời trang nam Nội thất - Nhà đất Sim số - Thẻ cào Lao động - Việc làm Mẹ và bé Xem tất cả chuyên mục » Tiếp theo Các bạn chỉnh sửa thay toàn bộ code của EWRblock_RecentNews.css hoặc thêm vào bên dưới cuối cùng của EWRblock_RecentNews.css template: Mã: .portal-categories { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; float: left; margin-bottom: 20px; width: 100%; } h3.portal-categories-title, .portalListTitle h3 { font-size: 15px; font-weight: bold; margin-bottom: 5px; text-transform: uppercase; } .portal-categories h2.cat_6, .portal-categories h2.cat_1 { width: 49%; } .portal-categories h2 { background: none repeat scroll 0px 0px #FFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; float: left; margin-bottom: 10px; margin-left: 1%; text-align: center; } .portal-categories h2 a { border: 1px solid #CCC; -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; color: #111; display: block; font-weight: bold; min-height: 100px; padding: 10px 0px; position: relative; } .portal-categories h2 a span { display: block; } .portal-categories h2.cat_2, .portal-categories h2.cat_3, .portal-categories h2.cat_4, .portal-categories h2.cat_5, .portal-categories h2.cat_7, .portal-categories h2.cat_8, .portal-categories h2.cat_9, .portal-categories h2.cat_10 {width: 24%} .portal-categories-viewall { background: none repeat scroll 0px 0px transparent; border: 1px solid #DEDEDE; -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; float: left; text-align: center; width: 100%; } .portal-categories-viewall { text-align: center; } .portal-categories-viewall a { color: #666; display: block; font-size: 13px; font-weight: bold; padding: 5px; } .portal-categories h2 a:hover { text-decoration:none; border:1px solid #666; opacity:0.8 } .portal-categories h2 a:active, .portal-categories h2 a:focus{background-color:#f5f5f5} .loadercontainer { bottom:30%; display:none; height:20px; left: -50%; margin:0; position:absolute; width:100% } .loader { display:block; height:10px; margin-top:38px; position:relative; width:100% } .circle{display:inline-block; position:relative; -webkit-animation:dotloader 2.5s infinite; -moz-animation:dotloader 2.5s infinite; -ms-animation:dotloader 2.5s infinite; -o-animation:dotloader 2.5s infinite; animation:dotloader 2.5s infinite } .circle+.circle{ margin-left: -25px; -webkit-animation:dotloader 2.5s 0.2s infinite; -moz-animation:dotloader 2.5s 0.2s infinite; -ms-animation:dotloader 2.5s 0.2s infinite; -o-animation:dotloader 2.5s 0.2s infinite; animation:dotloader 2.5s 0.2s infinite } .circle+.circle+.circle{ margin-left: -25px; -webkit-animation:dotloader 2.5s 0.4s infinite; -moz-animation:dotloader 2.5s 0.4s infinite; -ms-animation:dotloader 2.5s 0.4s infinite; -o-animation:dotloader 2.5s 0.4s infinite; animation:dotloader 2.5s 0.4s infinite } .circle+.circle+.circle+.circle{ margin-left: -25px; -webkit-animation:dotloader 2.5s 0.6s infinite; -moz-animation:dotloader 2.5s 0.6s infinite; -ms-animation:dotloader 2.5s 0.6s infinite; -o-animation:dotloader 2.5s 0.6s infinite; animation:dotloader 2.5s 0.6s infinite } @keyframes "dotloader"{ 0%,20%{ width:4px; height:4px; -webkit-border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; border-radius:2px; left:0%; background-color:rgba(0,0,0,0) } 30%,70%{ width:8px; height:8px; -webkit-border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -khtml-border-radius:4px; border-radius:4px; left:50%; background-color:rgba(0,0,0,0.5) } 80%,100% { width:4px; height:4px; -webkit-border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; border-radius:2px;left:100%; background-color:rgba(0, 0, 0, 0) }} @-moz-keyframes dotloader{ 0%,20%{ width:4px; height:4px; -moz-border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; border-radius:2px;left:0%; background-color:rgba(0,0,0,0) } 30%,70%{ width:8px; height:8px; -moz-border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -khtml-border-radius:4px; border-radius:4px; left:50%; background-color:rgba(0,0,0,0.5) } 80%,100%{ width:4px; height:4px; -moz-border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; border-radius:2px; left:100%; background-color:rgba(0, 0, 0, 0) } } @-webkit-keyframes "dotloader" { 0%,20%{ width:4px; height:4px; -webkit-border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; border-radius:2px; left:0%; background-color:rgba(0,0,0,0) } 30%,70%{ width:8px; height:8px; -webkit-border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -khtml-border-radius:4px; border-radius:4px;left:50%; background-color:rgba(0,0,0,0.5) } 80%,100%{ width:4px; height:4px; -webkit-border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; border-radius:2px; left:100%; background-color:rgba(0, 0, 0, 0) }} @-ms-keyframes "dotloader"{ 0%,20%{ width:4px; height:4px; -webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; border-radius:2px;left:0%; background-color:rgba(0,0,0,0) } 30%,70%{ width:8px; height:8px; -webkit-border-radius:4px; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -khtml-border-radius:4px; border-radius:4px; left:50%; background-color:rgba(0,0,0,0.5) } 80%,100%{ width:4px; height:4px; -webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; border-radius:2px; left:100%; background-color:rgba(0, 0, 0, 0) }} @-o-keyframes "dotloader"{0%,20%{ width:4px; height:4px; -webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; border-radius:2px;left:0%; background-color:rgba(0,0,0,0 )} 30%,70%{ width:8px; height:8px; -webkit-border-radius:4px; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -khtml-border-radius:4px; border-radius:4px; left:50%; background-color:rgba(0,0,0,0.5) } 80%,100%{ width:4px; height:4px; -webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; border-radius:2px; left:100%; background-color:rgba(0, 0, 0, 0) }} @media (max-width:800px) { .portal-categories{margin-top:12px} } @media (max-width:610px) { .portal-categories h2 a span{font-size:12px } } @media (max-width:480px) { {width: 48%;} .portal-categories h2 {margin-right:1%} .portal-categories h2 a{height:100px} .portal-categories h2.cat_1, .portal-categories h2.cat_2, .portal-categories h2.cat_3, .portal-categories h2.cat_4, .portal-categories h2.cat_5, .portal-categories h2.cat_6, .portal-categories h2.cat_7, .portal-categories h2.cat_8, .portal-categories h2.cat_9, .portal-categories h2.cat_10 {width: 48%} .portal-categories h2 a img {width: 80px;} } } Lưu lại và tận hưởng. Chúc các bạn thành công. Nguồn: congngheaz.com
Thật sự BQT cài cái java khá ức chế mỗi lần coppy code về dán vào khun soãn thào là nó ra 1 lút như là bè rao muốn khống để nào đề sửa
Cho mình hỏi thăm, phần recenthread muốn cho hiển thị một cột, và hiển thị cho nhiều trang, mỗi trang 10 bài viết thì làm thế nào? xin ae hướng dẫn giúp.
Đang cần cái này, bác bổ sung giúp cái link hình ảnh hay file hình icon từng box giúp mình với, làm mà thiếu mấy cái icon rùi bác ơi. thank bác.