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

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
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​
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
ừ, đọc cmt bên đấy có thấy :))
 
  • Like
Reactions: THB

5svn

Private
Tham gia
10/03/2015
Bài viết
22
Được Like
21
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​
Đoạn này chép vào đâu đó bác
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
vào template: EWRblock_RecentNews nha
 

chimcanh

MasterCorporal
Tham gia
12/05/2015
Bài viết
235
Được Like
182
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
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
hii, do bạn không biết cách copy thôi ^^, cần thì ibx trò chuyện mình chỉ cho ^^
 

aiquoc

Gefreiter
Tham gia
29/07/2015
Bài viết
96
Được Like
23
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.
 

aiquoc

Gefreiter
Tham gia
29/07/2015
Bài viết
96
Được Like
23
Mình đang cần, mong ae giúp đỡ. thank
 

aiquoc

Gefreiter
Tham gia
29/07/2015
Bài viết
96
Được Like
23
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​
Hướng dẫn làm luôn các chuyên mục dưới foodter đi bác
 

ntphong

Private
Tham gia
23/07/2015
Bài viết
45
Được Like
24
Đ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.
 

tuannt

MasterCorporal
Tham gia
07/04/2015
Bài viết
251
Được Like
140
code lỗi hay sao vậy bác, thực hiện theo hd mà nó hiện thế này
mua-re.png
 

sanxecu

Private
Tham gia
24/05/2016
Bài viết
34
Được Like
20
like mạnh bác
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​
 

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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom