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

Thảo luận trong 'Template Modifications' bắt đầu bởi PVS, 07/05/2015.

  1. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,804
    Đã được thích:
    7,062
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    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
    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​
     
  2. ismartcom005

    ismartcom005 Thượng Đế

    Tham gia:
    14/04/2015
    Bài viết:
    839
    Đã được thích:
    794
    Điểm thành tích:
    93
    Giới tính:
    Nam
    lại leech từ congngheaz về à thím :D, như đã nói, chẳng cần recentnews đâu, rawhypertext là html là đc
     
    Kun, THB, ndkhoa and 1 other person like this.
  3. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,804
    Đã được thích:
    7,062
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    ừ, đọc cmt bên đấy có thấy :))
     
    THB thích bài này.
  4. ndkhoa

    ndkhoa Thượng Đế

    Tham gia:
    09/04/2015
    Bài viết:
    138
    Đã được thích:
    134
    Điểm thành tích:
    43
    Giới tính:
    Nam
    thôi đi thým, tui không bik raw hypertext là cái quái gì cả..? :D
     
    THB thích bài này.
  5. ismartcom005

    ismartcom005 Thượng Đế

    Tham gia:
    14/04/2015
    Bài viết:
    839
    Đã được thích:
    794
    Điểm thành tích:
    93
    Giới tính:
    Nam
    thím ko bik thì kệ thím, mình bik đc rồi :D
     
  6. ndkhoa

    ndkhoa Thượng Đế

    Tham gia:
    09/04/2015
    Bài viết:
    138
    Đã được thích:
    134
    Điểm thành tích:
    43
    Giới tính:
    Nam
    vãi thým Hội :eek:
     
    THB thích bài này.
  7. 5svn

    5svn Thượng Đế

    Tham gia:
    10/03/2015
    Bài viết:
    22
    Đã được thích:
    21
    Điểm thành tích:
    3
    Giới tính:
    Nam
    Web:
    Đoạn này chép vào đâu đó bác
     
  8. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,804
    Đã được thích:
    7,062
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    vào template: EWRblock_RecentNews nha
     
  9. chimcanh

    chimcanh Thượng Đế

    Tham gia:
    12/05/2015
    Bài viết:
    235
    Đã được thích:
    175
    Điểm thành tích:
    43
    Giới tính:
    Nam
    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
     
  10. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,804
    Đã được thích:
    7,062
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    hii, do bạn không biết cách copy thôi ^^, cần thì ibx trò chuyện mình chỉ cho ^^
     
  11. aiquoc

    aiquoc Thượng Đế

    Tham gia:
    29/07/2015
    Bài viết:
    93
    Đã được thích:
    20
    Điểm thành tích:
    8
    Giới tính:
    Nam
    Nghề nghiệp:
    Seafood
    Web:
    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.
     
  12. aiquoc

    aiquoc Thượng Đế

    Tham gia:
    29/07/2015
    Bài viết:
    93
    Đã được thích:
    20
    Điểm thành tích:
    8
    Giới tính:
    Nam
    Nghề nghiệp:
    Seafood
    Web:
    Mình đang cần, mong ae giúp đỡ. thank
     
  13. aiquoc

    aiquoc Thượng Đế

    Tham gia:
    29/07/2015
    Bài viết:
    93
    Đã được thích:
    20
    Điểm thành tích:
    8
    Giới tính:
    Nam
    Nghề nghiệp:
    Seafood
    Web:
    Hướng dẫn làm luôn các chuyên mục dưới foodter đi bác
     
  14. zmanly

    zmanly Thượng Đế

    Tham gia:
    15/10/2015
    Bài viết:
    61
    Đã được thích:
    40
    Điểm thành tích:
    18
    Bạn có thể hướng dẫn sử dụng raw hypertext như thế nào không ?
     
  15. ntphong

    ntphong Thượng Đế

    Tham gia:
    23/07/2015
    Bài viết:
    45
    Đã được thích:
    23
    Điểm thành tích:
    8
    Giới tính:
    Nam
    Web:
    Đ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.
     
  16. tuannt

    tuannt Thượng Đế

    Tham gia:
    07/04/2015
    Bài viết:
    244
    Đã được thích:
    136
    Điểm thành tích:
    43
    Giới tính:
    Nam
    Web:
    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
     
  17. sanxecu

    sanxecu Thượng Đế

    Tham gia:
    24/05/2016
    Bài viết:
    34
    Đã được thích:
    16
    Điểm thành tích:
    8
    Nơi ở:
    VN
    like mạnh bác
     

Chia sẻ trang này