Addon Share code RecentNews đẹp cho Xenporta

Discussion in 'Add-ons Xenforo' started by tranvcuong94, Jun 20, 2016.

  1. tranvcuong94

    tranvcuong94 Thượng Đế

    Joined:
    Nov 6, 2015
    Messages:
    102
    Likes Received:
    75
    Trophy Points:
    28
    Gender:
    Male
    Share code RecentNews 3 cột cho Xenporta

    Xem DEMO

    Ảnh DEMO

    huong-dan-tao-recentnew-dep.JPG


    Hướng dẫn: Trước hết bạn phải cài Xenporta bạn nào chưa có xem tại đây

    Bước 1:
    Bạn download file đính kèm.
    Bước 2: Upload file RecentNews.php vào thư mục website /library/EWRporta/Block
    Bước 3:
    Import file RecentNews.xml tại admin.php -> Home -> XenPorta -> Block -> Install block
    Bước 4:
    Kéo RecentNews vào Layout: PORTAL

    keo-recentnews.JPG

    Hướng dẫn sửa code:

    Appearance -> Styles -> Giao diện sử dụng-> Templates -> EWRblock_RecentNews
    Nhớ thay đổi link ảnh http://cnttqn.com/ thành link domain website của bạn


    PHP:
    <xen:require css="message_user_info.css" />
    <
    xen:require css="bb_code.css" />
    <
    xen:require css="EWRblock_RecentNews.css" />
    <
    div id="Block1">
    <
    div class="block-title"><a href="http://cnttqn.com/forums/thu-thuat-tin-hoc/" title="Tin tức"><span>Tin tức Sự kiện span>a>div>
    <
    ul class="block1">
    <
    xen:foreach loop="$RecentNewsvalue="$newsi="$i">
    <
    xen:if is="{$i}<7">

            <
    li>
            <
    div class="block-content" id="{$news.thread_id}">
                <
    div class="img-thumb">
          
                <
    xen:if is="{$news.promote_icon} != 'disabled'">
                    <
    xen:if hascontent="true">

                                <
    xen:contentcheck>
                                <
    xen:if is="{$news.attach}">
                                    <
    a href="{xen:link threads, $news}" class="pin_pic_img_a"><img src="http://res.cloudinary.com/tint/image/fetch/w_250,h_150,c_thumb/http://cnttqn.com/{$news.attach.thumbnailUrl}"  />a>
                                <
    xen:elseif is="{$news.medio}/>
                                    <
    div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">
                                        <
    a href="{xen:link 'full:media/media/popout', $news.medio}" class="OverlayTrigger"><img src="styles/8wayrun/EWRmedio_play.png" width="160" height="90" />a>
                                    
    div>
                                <
    xen:elseif is="{$news.image}/>
                                    <
    a href="{xen:link threads, $news}" class="pin_pic_img_a"><img src="{$news.image}alt="{$news.image}/>a>
                                <
    xen:else />
                                    <
    a href="{xen:link threads, $news}" class="pin_pic_img_a"><img src="http://cnttqn.com/images/not-img.jpg" />a>
                                
    xen:if>
                                
    xen:contentcheck>
                    
    xen:if>
                
    xen:if>
          
                
    div>
                <
    div class="thread-info">
                <
    a href="{xen:link threads, $news}" title="{$news.title}class="title">{$news.title}a>

                <
    class="desc">{xen:helper snippet$news.message100}p>
                
    div>
            
    div>
            
    li>
    xen:if>
    xen:foreach>
    ul>
    div>
    EWRblock_RecentNews.css

    PHP:
    @media (min-width:128px)

    {
    #Block1 .block1 li {width:100%;overflow:hidden;float:left;background-color: #FDFDFD;}
    #Block1 .block1 .block-content {margin:7px;min-height:250px}
    #Block1 .block1 .img-thumb {height:auto;overflow:hidden}
    #Block1 .block1 .img-thumb img {width:100%;height:100%}
    #Block1 .block1 .thread-info {padding:6px}
    #Block1 .block1 .title {font-size:14px;line-height:18px; color: #0C4C80;font-weight:bold}
    #Block1 .block-content {-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); -khtml-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 3px #676C6E;background-color: #FFF;-webkit-border-radius:3px; -moz-border-radius:3px; -khtml-border-radius:3px; border-radius:3px}
    #Block1 .block-content .desc {padding-top:10px; color: #2E2E30;}
    .block-title {
        
    backgroundurl(http://cnttqn.com/styles/default/bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365/icon_red_top.png) no-repeat left top;
        
    background-size236px 40px;
        
    margin-left6px;
        
    border-bottom2px #0C4C80 solid;
            
    background-color#FDFDFD;
    }
    .
    block-title span {
    font-familyUTM_Headerarial;
    text-transformuppercase;
    color#FFF;
    displayinline-block;
    line-height30px;
    padding0 40px 0 30px;
    backgroundurl(http://cnttqn.com/styles/default/bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365/title-box-top.png) no-repeat right top;
    background-size300px 300px;
    font-weightnormal;
    margin-top10px;
    font-size14px;
        
    font-weightbold;
    }
    #Block1 .block-title span {
    background-position100% -40px;
    }
    }
    @
    media (min-width:540px)
    {
    #Block1 .block1 li {
    width265px !important;
    height263px !important;
    overflow:hidden;float:left;background-color#FDFDFD;}[/COLOR]
    #Block1 .block1 .block-content {margin:7px;min-height:250px}
    #Block1 .block1 .img-thumb {height:auto;overflow:hidden}
    #Block1 .block1 .img-thumb img {width:100%;height:100%}
    #Block1 .block1 .thread-info {padding:6px}
    #Block1 .block1 .title {font-size:14px;line-height:18px; color: #0C4C80;font-weight:bold}
    #Block1 .block-content {-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); -khtml-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 3px #676C6E;background-color: #FFF;-webkit-border-radius:3px; -moz-border-radius:3px; -khtml-border-radius:3px; border-radius:3px}
    #Block1 .block-content .desc {padding-top:10px; color: #2E2E30;}
    .block-title {
        
    backgroundurl(http://cnttqn.com/styles/default/bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365/icon_red_top.png) no-repeat left top;
        
    background-size236px 40px;
        
    margin-left6px;
        
    border-bottom2px #0C4C80 solid;
            
    background-color#FDFDFD;
    }
    .
    block-title span {
    font-familyUTM_Headerarial;
    text-transformuppercase;
    color#FFF;
    displayinline-block;
    line-height30px;
    padding0 40px 0 30px;
    backgroundurl(http://cnttqn.com/styles/default/bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365/title-box-top.png) no-repeat right top;
    background-size300px 300px;
    font-weightnormal;
    margin-top10px;
    font-size14px;
        
    font-weightbold;
    }
    #Block1 .block-title span {
    background-position100% -40px;
    }
    }
    @
    media (min-width:740px)
    {
    #Block1 .block1 li {
    width265px !important;
    height263px !important;
    overflow:hidden;float:left;background-color#FDFDFD;
    }
    #Block1 .block1 .block-content {margin:7px;min-height:250px;}
    #Block1 .block1 .img-thumb {height:120px;overflow:hidden}
    #Block1 .block1 .img-thumb img {width:100%;height:100%}
    #Block1 .block1 .thread-info {padding:6px}
    #Block1 .block1 .title {font-size:14px;line-height:18px; color: #0C4C80;font-weight:bold}
    #Block1 .block-content {-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); -khtml-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 3px #676C6E;background-color: #FFF;-webkit-border-radius:3px; -moz-border-radius:3px; -khtml-border-radius:3px; border-radius:3px}
    #Block1 .block-content .desc {
    padding-top:10pxcolor#2E2E30;
        
    font-familytahoma;
        
    font-size14px;
        
    line-height21px;
        
    text-alignjustify;
    }
    .
    block-title {
        
    backgroundurl(cnttqn.com/styles/default/bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365/icon_red_top.pngno-repeat left top;
        
    background-size264px 40px;
        
    margin-left: -26px;
        
    border-bottom2px #0C4C80 solid;
     
    }
    .
    block-title span {
    font-familyUTM_Headerarial;
    text-transformuppercase;
    color#FFF;
    displayinline-block;
    line-height30px;
    padding0 40px 0 30px;
    backgroundurl(http://cnttqn.com/styles/default/bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365/title-box-top.png) no-repeat right top;
    background-size300px 300px;
    font-weightnormal;
    margin-top10px;
    font-size14px;
        
    font-weightbold;
    }
    #Block1 .block-title span {
    background-position100% -40px;
    }
    .
    fb2
    {
    padding-top:5px;
    }
    }

    CSS có sử dụng Responsive cho mobile.

    Chúc các bạn thành công.


    Cập nhật RecentNews đẹp cho Xenporta v2
     

    Attached Files:

    Last edited: Mar 29, 2017
    ngoinhama, MacKen, Blue and 1 other person like this.
  2. PVS

    PVS Cộng Sự Đặc Biệt Staff Member

    Joined:
    Feb 28, 2015
    Messages:
    11,804
    Likes Received:
    7,062
    Trophy Points:
    113
    Gender:
    Male
    Location:
    Huế
    Home Page:
    tks bạn đã chia sẻ :D, đơn giản nhưng khá đẹp, à mà mình vào trang demo thì khung cuối cùng lỗi hiển thị như sau:

    Untitled.png
     
  3. lamtraumvn

    lamtraumvn Thượng Đế

    Joined:
    Apr 12, 2016
    Messages:
    22
    Likes Received:
    13
    Trophy Points:
    3
    Gender:
    Male
    Location:
    thanh xuan - ha noi
    anh ơi, em làm đúng hướng dẫn rồi mà không thấy nó hiện recentnew để kéo vào là sao nhỉ, với cả đúng là trong demo bị lỗi cái recentnew cuối, 2 bài viết bị trôi xuống dưới
     
  4. tranvcuong94

    tranvcuong94 Thượng Đế

    Joined:
    Nov 6, 2015
    Messages:
    102
    Likes Received:
    75
    Trophy Points:
    28
    Gender:
    Male
    Ok bạn. Mình đã sửa.
     
    PVS likes this.
  5. tranvcuong94

    tranvcuong94 Thượng Đế

    Joined:
    Nov 6, 2015
    Messages:
    102
    Likes Received:
    75
    Trophy Points:
    28
    Gender:
    Male
    Bạn đã import chưa. bạn vào Home -> XenPorta -> Layouts xem đã có portal chưa.
     
  6. PVS

    PVS Cộng Sự Đặc Biệt Staff Member

    Joined:
    Feb 28, 2015
    Messages:
    11,804
    Likes Received:
    7,062
    Trophy Points:
    113
    Gender:
    Male
    Location:
    Huế
    Home Page:
    perfect (y)
     
  7. Blue

    Blue Admin - Founder Staff Member

    Joined:
    Feb 25, 2015
    Messages:
    796
    Likes Received:
    1,246
    Trophy Points:
    93
    Gender:
    Male
    Cám ơn bạn vì đóng góp vô cùng hữu ích này. Tiếp tục phát huy nhé :)
     
    HoangThuong and tranvcuong94 like this.
  8. chimcanh

    chimcanh Thượng Đế

    Joined:
    May 12, 2015
    Messages:
    235
    Likes Received:
    175
    Trophy Points:
    43
    Gender:
    Male
    Dùng thừ trên điện thoại chưa ban ?
     
  9. tranvcuong94

    tranvcuong94 Thượng Đế

    Joined:
    Nov 6, 2015
    Messages:
    102
    Likes Received:
    75
    Trophy Points:
    28
    Gender:
    Male
    CSS có sử dụng Responsive cho mobile bạn nhé. Đã test
     
  10. seoer6

    seoer6 Thượng Đế

    Joined:
    Sep 10, 2017
    Messages:
    2
    Likes Received:
    0
    Trophy Points:
    1
    Gender:
    Male
    Location:
    hà nội
    Các bác cho em hỏi làm sao tạo được 3 cái blocks : RecentNews -RecentNews1 -RecentNews2 như trên ảnh chủ top vậy ? thanks
     
  11. onlyonelove

    onlyonelove Thượng Đế

    Joined:
    Nov 3, 2015
    Messages:
    370
    Likes Received:
    200
    Trophy Points:
    43
    Gender:
    Male
    Occupation:
    Code tập sự
    Location:
    Đồng Nai
    Home Page:
    k biết trên xenporta2 thì làm thế nào nhỉ
     
  12. MANHLETN

    MANHLETN Thượng Đế

    Joined:
    Feb 27, 2018
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    1
    Location:
    TN
    Chủ thớt cho mình hỏi làm thành 4 cột thì chỉnh như thế nào?
     

Share This Page