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

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.2361.html
​
Mã: 
[FONT=Consolas]<div class="portal-categories">[/FONT][/FONT][/COLOR]
            <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&count=true&size=medium&hl=vi-VN&origin=http%3A%2F%2Fvnxf.vn&url=http%3A%2F%2Fvnxf.vn%2F&gsrc=3p&ic=1&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&id=I0_1429512012158&parent=http%3A%2F%2Fvnxf.vn&pfname=&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"> </div>
                <div class="circle"> </div>
                <div class="circle"> </div>
                <div class="circle"> </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"> </div>
                <div class="circle"> </div>
                <div class="circle"> </div>
                <div class="circle"> </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"> </div>
                <div class="circle"> </div>
                <div class="circle"> </div>
                <div class="circle"> </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"> </div>
                <div class="circle"> </div>
                <div class="circle"> </div>
                <div class="circle"> </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"> </div>
                <div class="circle"> </div>
                <div class="circle"> </div>
                <div class="circle"> </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"> </div>
                <div class="circle"> </div>
                <div class="circle"> </div>
                <div class="circle"> </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"> </div>
                <div class="circle"> </div>
                <div class="circle"> </div>
                <div class="circle"> </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"> </div>
                <div class="circle"> </div>
                <div class="circle"> </div>
                <div class="circle"> </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"> </div>
                <div class="circle"> </div>
                <div class="circle"> </div>
                <div class="circle"> </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"> </div>
                <div class="circle"> </div>
                <div class="circle"> </div>
                <div class="circle"> </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> [COLOR=#032A46][FONT=Times New Roman][FONT=Consolas]    </div>[/FONT]
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ã: 
[FONT=Consolas].portal-categories {[/FONT][/FONT][/COLOR]
    -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;}
    } [COLOR=#032A46][FONT=Times New Roman][FONT=Consolas]}[/FONT]

Lưu lại và tận hưởng. Chúc các bạn thành công.


Nguồn: VNXF.VN​
 
  • Chủ đề
    vnxf vnxf.vn
    • Đăng nhập bằng tài khoản VFO hoặc Google

    Bài viết mới nhất

    Thống kê

    Chủ đề
    100,752
    Bài viết
    467,583
    Thành viên
    339,851
    Thành viên mới nhất
    Đông Âu

    Bài viết được quan tâm nhiều

    Top