Tạo chuyên mục nổi bật giống muare.vn

PVS

PVS

Super Moderator
Thành viên BQT
Code hoặc hướng dẫn này được sử dụng trên phiên bản Xenforo cũ đã quá hạn sử dụng. Bạn hãy click để tìm bản mới hơn
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

Untitled.png

​
Mã: 
<div class="portal-categories">
            <div class="right_share" style="float: right; display: inline-flex;">
          
                <div class="plusone shareControl">
                    <div style="text-indent: 0px; margin: 0px; padding: 0px; background: transparent none repeat scroll 0% 0%; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 90px; height: 20px;" id="___plusone_0"><iframe width="100%" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 90px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 20px;" tabindex="0" vspace="0" id="I0_1429512012158" name="I0_1429512012158" src="https://apis.google.com/se/0/_/+1/fastbutton?usegapi=1&amp;count=true&amp;size=medium&amp;hl=vi-VN&amp;origin=http%3A%2F%2Fvnxf.vn&amp;url=http%3A%2F%2Fvnxf.vn%2F&amp;gsrc=3p&amp;ic=1&amp;jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.vi.LTOhYwB69w8.O%2Fm%3D__features__%2Fam%3DMQ%2Frt%3Dj%2Fd%3D1%2Ft%3Dzcms%2Frs%3DAGLTcCOE0KTmi7xhrxzK6NhBlEc2nVthtw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&amp;id=I0_1429512012158&amp;parent=http%3A%2F%2Fvnxf.vn&amp;pfname=&amp;rpctoken=20816286" data-gapiattached="true" title="+1"></iframe></div>
                </div>
          
          
                <div data-share="false" data-show-faces="false" data-action="like" data-layout="button_count" data-href="https://www.facebook.com/vnxf.vn" class="fb-like"></div>
          
            </div>
        <h3 style="margin-bottom: 10px" class="portal-categories-title">Chuyên Mục Nổi Bật</h3>
  
        <h2 class="cat_1"><a title="Điện thoại - Máy tính bảng" href="/forums/dien-thoai.118/"><img alt="Điện thoại - Máy tính bảng" src="/styles/img/portal-cat-icons/dien-thoai.png">
            <span>Điện thoại - Máy tính bảng</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
  
        <h2 class="cat_2"><a title="Phương tiện đi lại" href="/forums/o-to-xe-may-xe-dap.124/"><img alt="Ô tô - Xe máy" src="/styles/img/portal-cat-icons/xe-may.png">
            <span>Ô tô - Xe máy</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
  
        <h2 class="cat_3"><a title="Máy tính - Laptop" href="/forums/may-tinh-linh-kien.117/"><img alt="Máy tính - Laptop" src="/styles/img/portal-cat-icons/may-tinh.png">
            <span>Máy tính - Laptop</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
  
        <h2 class="cat_4"><a title="Điện máy" href="/forums/dien-may-cong-nghe.122/"><img alt="Điện máy" src="/styles/img/portal-cat-icons/dien-may.png">
            <span>Điện máy</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
  
        <h2 class="cat_5"><a title="Thời trang nữ" href="/forums/thoi-trang-nu.206/"><img alt="Thời trang nữ" src="/styles/img/portal-cat-icons/thoi-trang-nu.png">
            <span>Thời trang nữ</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
  
        <h2 class="cat_6"><a title="Thời trang nam" href="/forums/thoi-trang-nam.309/"><img alt="Thời trang nam" src="/styles/img/portal-cat-icons/thoi-trang-nam.png">
            <span>Thời trang nam</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
  
        <h2 class="cat_7"><a title="Nội thất - Nhà đất" href="/forums/bat-dong-san.184/"><img alt="Nội thất - Nhà đất" src="/styles/img/portal-cat-icons/nha-dat.png">
            <span>Nội thất - Nhà đất</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
  
        <h2 class="cat_8"><a title="Sim số - Thẻ cào" href="/forums/sim-so-dep.174/"><img alt="Sim số - Thẻ cào" src="/styles/img/portal-cat-icons/sim-so.png">
            <span>Sim số - Thẻ cào</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
  
        <h2 class="cat_9"><a title="Lao động - Việc làm" href="/forums/viec-lam-tuyen-dung.212/"><img alt="Lao động - Việc làm" src="/styles/img/portal-cat-icons/viec-lam.png">
            <span>Lao động - Việc làm</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
  
        <h2 class="cat_10"><a title="Mẹ và bé" href="/forums/me-va-be.207/"><img alt="Mẹ và bé" src="/styles/img/portal-cat-icons/me-va-be.png">
            <span>Mẹ và bé</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
  
<div class="portal-categories-viewall">
    <span>    <a href="/forums">Xem tất cả chuyên mục »</a></span>  
</div>

<script>
    $('.portal-categories h2 a').click(function(){
        $(this).find('.loadercontainer').show();
    });
</script>
    </div>

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​
 
Bài viết liên quan
Xin hướng dẫn cách làm mục này bởi ngoctuanvnnn,
Lỗi Nội dung không mong muốn bởi muabandalat,
Làm sao để tạo hiển thị đăng nhập google tự động khi truy cập diễn đàn bởi bloghocpiano,
Mong các AE giúp đỡ em tạo Custom thread fields bởi nguyendinhnham,
Nội Dung Chỉ Hiển Thị Vị Trí Trang categories bởi muabandalat,
Xin hỏi addon thêm nội dung từng chuyên mục ( rút gọn ) - ( mở rộng ) ? bởi nhuttran913,
Bài viết mới
Xin hướng dẫn cách làm mục này bởi ngoctuanvnnn,
Bị Lỗi share facebook không hiển thị ảnh đại diện xenforo bởi bloghocpiano,
Lỗi Nội dung không mong muốn bởi muabandalat,
Cho em xin code chèn comment facebook bởi quang9292,
Socials & Languages PREFIXES - Tiền tố mạng xã hội & ngôn ngữ cho XenForo 2.3 bởi PVS,
Bị lỗi ErrorException: Template error: [E_USER_WARNING] Cannot call method first on a non-object (NULL) src/XF/Template/Templater.php:1177 bởi bloghocpiano,
PVS nói:
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ã: 
<div class="portal-categories">
            <div class="right_share" style="float: right; display: inline-flex;">
         
                <div class="plusone shareControl">
                    <div style="text-indent: 0px; margin: 0px; padding: 0px; background: transparent none repeat scroll 0% 0%; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 90px; height: 20px;" id="___plusone_0"><iframe width="100%" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 90px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 20px;" tabindex="0" vspace="0" id="I0_1429512012158" name="I0_1429512012158" src="https://apis.google.com/se/0/_/+1/fastbutton?usegapi=1&amp;count=true&amp;size=medium&amp;hl=vi-VN&amp;origin=http%3A%2F%2Fvnxf.vn&amp;url=http%3A%2F%2Fvnxf.vn%2F&amp;gsrc=3p&amp;ic=1&amp;jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.vi.LTOhYwB69w8.O%2Fm%3D__features__%2Fam%3DMQ%2Frt%3Dj%2Fd%3D1%2Ft%3Dzcms%2Frs%3DAGLTcCOE0KTmi7xhrxzK6NhBlEc2nVthtw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&amp;id=I0_1429512012158&amp;parent=http%3A%2F%2Fvnxf.vn&amp;pfname=&amp;rpctoken=20816286" data-gapiattached="true" title="+1"></iframe></div>
                </div>
         
         
                <div data-share="false" data-show-faces="false" data-action="like" data-layout="button_count" data-href="https://www.facebook.com/vnxf.vn" class="fb-like"></div>
         
            </div>
        <h3 style="margin-bottom: 10px" class="portal-categories-title">Chuyên Mục Nổi Bật</h3>
 
        <h2 class="cat_1"><a title="Điện thoại - Máy tính bảng" href="/forums/dien-thoai.118/"><img alt="Điện thoại - Máy tính bảng" src="/styles/img/portal-cat-icons/dien-thoai.png">
            <span>Điện thoại - Máy tính bảng</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
        <h2 class="cat_2"><a title="Phương tiện đi lại" href="/forums/o-to-xe-may-xe-dap.124/"><img alt="Ô tô - Xe máy" src="/styles/img/portal-cat-icons/xe-may.png">
            <span>Ô tô - Xe máy</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
        <h2 class="cat_3"><a title="Máy tính - Laptop" href="/forums/may-tinh-linh-kien.117/"><img alt="Máy tính - Laptop" src="/styles/img/portal-cat-icons/may-tinh.png">
            <span>Máy tính - Laptop</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
        <h2 class="cat_4"><a title="Điện máy" href="/forums/dien-may-cong-nghe.122/"><img alt="Điện máy" src="/styles/img/portal-cat-icons/dien-may.png">
            <span>Điện máy</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
        <h2 class="cat_5"><a title="Thời trang nữ" href="/forums/thoi-trang-nu.206/"><img alt="Thời trang nữ" src="/styles/img/portal-cat-icons/thoi-trang-nu.png">
            <span>Thời trang nữ</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
        <h2 class="cat_6"><a title="Thời trang nam" href="/forums/thoi-trang-nam.309/"><img alt="Thời trang nam" src="/styles/img/portal-cat-icons/thoi-trang-nam.png">
            <span>Thời trang nam</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
        <h2 class="cat_7"><a title="Nội thất - Nhà đất" href="/forums/bat-dong-san.184/"><img alt="Nội thất - Nhà đất" src="/styles/img/portal-cat-icons/nha-dat.png">
            <span>Nội thất - Nhà đất</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
        <h2 class="cat_8"><a title="Sim số - Thẻ cào" href="/forums/sim-so-dep.174/"><img alt="Sim số - Thẻ cào" src="/styles/img/portal-cat-icons/sim-so.png">
            <span>Sim số - Thẻ cào</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
        <h2 class="cat_9"><a title="Lao động - Việc làm" href="/forums/viec-lam-tuyen-dung.212/"><img alt="Lao động - Việc làm" src="/styles/img/portal-cat-icons/viec-lam.png">
            <span>Lao động - Việc làm</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
        <h2 class="cat_10"><a title="Mẹ và bé" href="/forums/me-va-be.207/"><img alt="Mẹ và bé" src="/styles/img/portal-cat-icons/me-va-be.png">
            <span>Mẹ và bé</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
<div class="portal-categories-viewall">
    <span>    <a href="/forums">Xem tất cả chuyên mục »</a></span> 
</div>

<script>
    $('.portal-categories h2 a').click(function(){
        $(this).find('.loadercontainer').show();
    });
</script>
    </div>


Nguồn: congngheaz.com​
Nhấn để mở rộng...
Đoạn này chép vào đâu đó bác
 
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
 
hii, do bạn không biết cách copy thôi ^^, cần thì ibx trò chuyện mình chỉ cho ^^
 
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.
 
PVS nói:
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ã: 
<div class="portal-categories">
            <div class="right_share" style="float: right; display: inline-flex;">
         
                <div class="plusone shareControl">
                    <div style="text-indent: 0px; margin: 0px; padding: 0px; background: transparent none repeat scroll 0% 0%; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 90px; height: 20px;" id="___plusone_0"><iframe width="100%" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 90px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 20px;" tabindex="0" vspace="0" id="I0_1429512012158" name="I0_1429512012158" src="https://apis.google.com/se/0/_/+1/fastbutton?usegapi=1&amp;count=true&amp;size=medium&amp;hl=vi-VN&amp;origin=http%3A%2F%2Fvnxf.vn&amp;url=http%3A%2F%2Fvnxf.vn%2F&amp;gsrc=3p&amp;ic=1&amp;jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.vi.LTOhYwB69w8.O%2Fm%3D__features__%2Fam%3DMQ%2Frt%3Dj%2Fd%3D1%2Ft%3Dzcms%2Frs%3DAGLTcCOE0KTmi7xhrxzK6NhBlEc2nVthtw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&amp;id=I0_1429512012158&amp;parent=http%3A%2F%2Fvnxf.vn&amp;pfname=&amp;rpctoken=20816286" data-gapiattached="true" title="+1"></iframe></div>
                </div>
         
         
                <div data-share="false" data-show-faces="false" data-action="like" data-layout="button_count" data-href="https://www.facebook.com/vnxf.vn" class="fb-like"></div>
         
            </div>
        <h3 style="margin-bottom: 10px" class="portal-categories-title">Chuyên Mục Nổi Bật</h3>
 
        <h2 class="cat_1"><a title="Điện thoại - Máy tính bảng" href="/forums/dien-thoai.118/"><img alt="Điện thoại - Máy tính bảng" src="/styles/img/portal-cat-icons/dien-thoai.png">
            <span>Điện thoại - Máy tính bảng</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
        <h2 class="cat_2"><a title="Phương tiện đi lại" href="/forums/o-to-xe-may-xe-dap.124/"><img alt="Ô tô - Xe máy" src="/styles/img/portal-cat-icons/xe-may.png">
            <span>Ô tô - Xe máy</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
        <h2 class="cat_3"><a title="Máy tính - Laptop" href="/forums/may-tinh-linh-kien.117/"><img alt="Máy tính - Laptop" src="/styles/img/portal-cat-icons/may-tinh.png">
            <span>Máy tính - Laptop</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
        <h2 class="cat_4"><a title="Điện máy" href="/forums/dien-may-cong-nghe.122/"><img alt="Điện máy" src="/styles/img/portal-cat-icons/dien-may.png">
            <span>Điện máy</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
        <h2 class="cat_5"><a title="Thời trang nữ" href="/forums/thoi-trang-nu.206/"><img alt="Thời trang nữ" src="/styles/img/portal-cat-icons/thoi-trang-nu.png">
            <span>Thời trang nữ</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
        <h2 class="cat_6"><a title="Thời trang nam" href="/forums/thoi-trang-nam.309/"><img alt="Thời trang nam" src="/styles/img/portal-cat-icons/thoi-trang-nam.png">
            <span>Thời trang nam</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
        <h2 class="cat_7"><a title="Nội thất - Nhà đất" href="/forums/bat-dong-san.184/"><img alt="Nội thất - Nhà đất" src="/styles/img/portal-cat-icons/nha-dat.png">
            <span>Nội thất - Nhà đất</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
        <h2 class="cat_8"><a title="Sim số - Thẻ cào" href="/forums/sim-so-dep.174/"><img alt="Sim số - Thẻ cào" src="/styles/img/portal-cat-icons/sim-so.png">
            <span>Sim số - Thẻ cào</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
        <h2 class="cat_9"><a title="Lao động - Việc làm" href="/forums/viec-lam-tuyen-dung.212/"><img alt="Lao động - Việc làm" src="/styles/img/portal-cat-icons/viec-lam.png">
            <span>Lao động - Việc làm</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
        <h2 class="cat_10"><a title="Mẹ và bé" href="/forums/me-va-be.207/"><img alt="Mẹ và bé" src="/styles/img/portal-cat-icons/me-va-be.png">
            <span>Mẹ và bé</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
<div class="portal-categories-viewall">
    <span>    <a href="/forums">Xem tất cả chuyên mục »</a></span> 
</div>

<script>
    $('.portal-categories h2 a').click(function(){
        $(this).find('.loadercontainer').show();
    });
</script>
    </div>

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​
Nhấn để mở rộng...
Hướng dẫn làm luôn các chuyên mục dưới foodter đi bác
 
Đ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.
 
like mạnh bác
PVS nói:
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ã: 
<div class="portal-categories">
            <div class="right_share" style="float: right; display: inline-flex;">
         
                <div class="plusone shareControl">
                    <div style="text-indent: 0px; margin: 0px; padding: 0px; background: transparent none repeat scroll 0% 0%; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 90px; height: 20px;" id="___plusone_0"><iframe width="100%" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 90px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 20px;" tabindex="0" vspace="0" id="I0_1429512012158" name="I0_1429512012158" src="https://apis.google.com/se/0/_/+1/fastbutton?usegapi=1&amp;count=true&amp;size=medium&amp;hl=vi-VN&amp;origin=http%3A%2F%2Fvnxf.vn&amp;url=http%3A%2F%2Fvnxf.vn%2F&amp;gsrc=3p&amp;ic=1&amp;jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.vi.LTOhYwB69w8.O%2Fm%3D__features__%2Fam%3DMQ%2Frt%3Dj%2Fd%3D1%2Ft%3Dzcms%2Frs%3DAGLTcCOE0KTmi7xhrxzK6NhBlEc2nVthtw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&amp;id=I0_1429512012158&amp;parent=http%3A%2F%2Fvnxf.vn&amp;pfname=&amp;rpctoken=20816286" data-gapiattached="true" title="+1"></iframe></div>
                </div>
         
         
                <div data-share="false" data-show-faces="false" data-action="like" data-layout="button_count" data-href="https://www.facebook.com/vnxf.vn" class="fb-like"></div>
         
            </div>
        <h3 style="margin-bottom: 10px" class="portal-categories-title">Chuyên Mục Nổi Bật</h3>
 
        <h2 class="cat_1"><a title="Điện thoại - Máy tính bảng" href="/forums/dien-thoai.118/"><img alt="Điện thoại - Máy tính bảng" src="/styles/img/portal-cat-icons/dien-thoai.png">
            <span>Điện thoại - Máy tính bảng</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
        <h2 class="cat_2"><a title="Phương tiện đi lại" href="/forums/o-to-xe-may-xe-dap.124/"><img alt="Ô tô - Xe máy" src="/styles/img/portal-cat-icons/xe-may.png">
            <span>Ô tô - Xe máy</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
        <h2 class="cat_3"><a title="Máy tính - Laptop" href="/forums/may-tinh-linh-kien.117/"><img alt="Máy tính - Laptop" src="/styles/img/portal-cat-icons/may-tinh.png">
            <span>Máy tính - Laptop</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
        <h2 class="cat_4"><a title="Điện máy" href="/forums/dien-may-cong-nghe.122/"><img alt="Điện máy" src="/styles/img/portal-cat-icons/dien-may.png">
            <span>Điện máy</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
        <h2 class="cat_5"><a title="Thời trang nữ" href="/forums/thoi-trang-nu.206/"><img alt="Thời trang nữ" src="/styles/img/portal-cat-icons/thoi-trang-nu.png">
            <span>Thời trang nữ</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
        <h2 class="cat_6"><a title="Thời trang nam" href="/forums/thoi-trang-nam.309/"><img alt="Thời trang nam" src="/styles/img/portal-cat-icons/thoi-trang-nam.png">
            <span>Thời trang nam</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
        <h2 class="cat_7"><a title="Nội thất - Nhà đất" href="/forums/bat-dong-san.184/"><img alt="Nội thất - Nhà đất" src="/styles/img/portal-cat-icons/nha-dat.png">
            <span>Nội thất - Nhà đất</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
        <h2 class="cat_8"><a title="Sim số - Thẻ cào" href="/forums/sim-so-dep.174/"><img alt="Sim số - Thẻ cào" src="/styles/img/portal-cat-icons/sim-so.png">
            <span>Sim số - Thẻ cào</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
        <h2 class="cat_9"><a title="Lao động - Việc làm" href="/forums/viec-lam-tuyen-dung.212/"><img alt="Lao động - Việc làm" src="/styles/img/portal-cat-icons/viec-lam.png">
            <span>Lao động - Việc làm</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
        <h2 class="cat_10"><a title="Mẹ và bé" href="/forums/me-va-be.207/"><img alt="Mẹ và bé" src="/styles/img/portal-cat-icons/me-va-be.png">
            <span>Mẹ và bé</span>
            <div class="loadercontainer">
            <div class="loader">
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
                <div class="circle">&nbsp;</div>
              </div>
            </div>
        </a>
        </h2>
 
<div class="portal-categories-viewall">
    <span>    <a href="/forums">Xem tất cả chuyên mục »</a></span> 
</div>

<script>
    $('.portal-categories h2 a').click(function(){
        $(this).find('.loadercontainer').show();
    });
</script>
    </div>

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​
Nhấn để mở rộng...
 
3,518 16 4
Bạn phải đăng nhập hoặc đăng ký để bình luận.

Dịch vụ XenForo của VNXF

Zalo 0906081284
avatar Silzedt InboxPVS
[VNXF 2x] Best Statistics Pro – Thống kê nâng cao, tối ưu hiệu năng cho XenForo 1.1 Bảng giá dịch vụ thiết kế, làm diễn đàn XenForo năm 2024

Xử lý sự cố

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

Texlink

Khám phá AI cùng người Việt
Diễn đàn chia sẻ kinh nghiệm massage
Review dịch vụ massage toàn quốc
Cộng Đồng Massage Việt Nam
Cộng đồng AI Việt Nam
Liên hệ đặt Textlink

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Back
Top