Other Share Slide của trang home website congnghe.5giay.vn/

Thảo luận trong 'Development Tutorials' bắt đầu bởi nttruong, 6/6/14.

2votes
5/5, 2 votes

  1. nttruong

    nttruong Well-Known Member

    Bài viết:
    1,518
    Likes :
    776
    Buồn quá! Viết bài share slide ở portal của trang congnghe.5giay.vn!

    Nhưng làm chưa kịp! Tí up nhé. Cuối giờ trưa là có!

    slide

    Demo site: http://ytuonglamgiau.vn/ <<<<< rip nguyên style!

    làm nhé!

    tạo thêm 1 block là EWRblock_RecentNews1:
    Thay toàn bộ code bằng:
    Mã:
    <xen:require css="message_user_info.css" />
    <xen:require css="bb_code.css" />
    <xen:require css="EWRblock_RecentNews1.css" />
    
    
    <div class="feature-slider">
    <div class="slide01">
    <xen:foreach loop="$RecentNews1" value="$news" i="$i">
               <xen:if is="{$i} < 2">
            <div class="items1">
            <xen:if is="{$news.promote_icon} != 'disabled'">
                        <xen:if hascontent="true">
                            <xen:contentcheck>
                            <xen:if is="{$news.attach}">
                                <a href="{xen:link threads, $news}"><img src="{$news.attach.thumbnailUrl}" alt="{$news.attach.filename}" /></a>
                            <xen:elseif is="{$news.medio}" />
                                <div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">
                                    <a href="{xen:link 'full: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}"><img src="{$news.image}" alt="{$news.image}" /></a>
                            <xen:else />
                                <xen:avatar user="$news" size="m" itemprop="photo" />
                            </xen:if>
                            </xen:contentcheck>
                        </xen:if>
                    </xen:if>
                  
                                          <span class="title"><a href="{xen:link threads, $news}">{$news.title}</a></span>
                </div>
                 <xen:elseif is="{$i} < 4"/>
                <div class="items2">
                       <xen:if is="{$news.promote_icon} != 'disabled'">
                        <xen:if hascontent="true">
                            <xen:contentcheck>
                            <xen:if is="{$news.attach}">
                                <a href="{xen:link threads, $news}"><img src="{$news.attach.thumbnailUrl}" alt="{$news.attach.filename}" /></a>
                            <xen:elseif is="{$news.medio}" />
                                <div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">
                                    <a href="{xen:link 'full: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}"><img src="{$news.image}" alt="{$news.image}" /></a>
                            <xen:else />
                                <xen:avatar user="$news" size="m" itemprop="photo" />
                            </xen:if>
                            </xen:contentcheck>
                        </xen:if>
                    </xen:if>
                                         <span class="title"><a href="{xen:link threads, $news}">{$news.title}</a></span>
                    </div>
                     <xen:elseif is="{$i} < 5"/>
                     </div>
                     <div class="slide02">             
                <div class="items3">
                    <xen:if is="{$news.promote_icon} != 'disabled'">
                        <xen:if hascontent="true">
                            <xen:contentcheck>
                            <xen:if is="{$news.attach}">
                                <a href="{xen:link threads, $news}"><img src="{$news.attach.thumbnailUrl}" alt="{$news.attach.filename}" /></a>
                            <xen:elseif is="{$news.medio}" />
                                <div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">
                                    <a href="{xen:link 'full: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}"><img src="{$news.image}" alt="{$news.image}" /></a>
                            <xen:else />
                                <xen:avatar user="$news" size="m" itemprop="photo" />
                            </xen:if>
                            </xen:contentcheck>
                        </xen:if>
                    </xen:if>
                                          <span class="title"><a href="{xen:link threads, $news}">{$news.title}</a></span>
                 </div>
                 <xen:else />
                 <div class="items3 items3_1">
                   
    <xen:if is="{$news.promote_icon} != 'disabled'">
    <xen:if hascontent="true">
    <xen:contentcheck>
    <xen:if is="{$news.attach}">
    <a href="{xen:link threads, $news}"><img src="{$news.attach.thumbnailUrl}" alt="{$news.attach.filename}" /></a>
    <xen:elseif is="{$news.medio}" />
    <div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">
    <a href="{xen:link 'full: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}"><img src="{$news.image}" alt="{$news.image}" /></a>
    <xen:else />
    <xen:avatar user="$news" size="m" itemprop="photo" />
    </xen:if>
    </xen:contentcheck>
    </xen:if>
    </xen:if>
    <span class="title"><a href="{xen:link threads, $news}">{$news.title}</a></span>
                </div>
                </div>
          </xen:if>
        </xen:foreach>  
          
      
    
    
    
       <div class="clear"></div>
    </div>
    - Mở template: EWRblock_RecentNews1.css. Thay toàn bộ bằng:
    Mã:
    .feature-slider:after {
        clear: both;
        content: ".";
        display: block;
        height: 0;
        visibility: hidden;
    }
    #recentNews {
    clear: both;
    }
    
    .items3_1 {
    border-top: 1px solid #fff;
    height: 199px;
    }
    .items3 {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 3;
    width: 290px;
    height: 200px;
    }
    .feature-slider {
    margin-top: 0px;
    -webkit-box-shadow: 0 0 5px #b8b8b8;
    -moz-box-shadow: 0 0 5px #b8b8b8;
    -khtml-box-shadow: 0 0 5px #b8b8b8;
    box-shadow: 0 0 5px #b8b8b8;
    background: #fff;
    float: left;
    width: 690px;
    height: 400px;
    overflow: hidden;
    margin-bottom: 20px;
    }
    .feature-slider .slide01, .feature-slider .slide02 {
    float: left;
    }
    .feature-slider .slide01 {
    width: 400px;
    height: 400px;
    padding: 0;
    margin: 0;
    position: relative;
    }
    .items1 {
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    z-index: 2;
    border-right: 1px solid #fff;
    width: 399px;
    height: 250px;
    }
    .feature-slider .slide01 div {
    position: relative;
    overflow: hidden;
    }
    .items1 img {
    min-width: 450px;
    max-height: 250px;
    }
    .items1 .title {
    width: 379px;
    }
    .feature-slider .title {
    background: url(rgba.php?r=0&g=0&b=0&a=178);
    background: rgba( 0,0,0,0.7);
    _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000);
    position: absolute;
    z-index: 100;
    bottom: 0;
    padding: 5px 10px;
    overflow: hidden;
    width: auto;
    display: block;
    width: auto;
    }
    .feature-slider .title a {
    display: block;
    height: 40px;
    font-size: 13px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    text-shadow: 0 0 0 transparent, 0 0 2px #000;
    line-height: 18px;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    }
    .items2 {
    top: 0px;
    left: 0px;
    z-index: 3;
    width: 198px;
    border-right: 1px solid #fff;
    border-top: 1px solid #fff;
    height: 149px;
    float: left;
    }
    .items2 img {
    min-width: 250px;
    max-height: 150px;
    }
    .feature-slider .slide02 {
    width: 290px;
    height: 200px;
    padding: 0;
    margin: 0;
    }
    .feature-slider .slide02 div img {
    min-width: 300px;
    max-height: 200px;
    overflow: hidden;
    min-height: 200px;
    }
    .items3 .title {
    width: 270px;
    }
    .clear {
    clear: both;
    }
    .feature-slider .slide02 div {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    }
    .items2 .title {
    width: 180px;
    }
    .items1:hover .title, .items2:hover .title, .items3:hover .title {
    background: url(rgba.php?r=0&g=138&b=192&a=229);
    background: rgba( 0,138,192,0.9);
    _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5008AC0,endColorstr=#E5008AC0);
    transition: all 0.8s ease 0s;
    }
    .items1 .title {
    width: 379px;
    }
    Done nhé! Like mạnh, share mạnh! 8-x
     
    Last edited: 6/6/14
    Đang tải...
  2. namchelsea

    namchelsea Member

    Bài viết:
    367
    Likes :
    84
    của bạn trc là vbb thì phải
     
    3Kcorp.vn and instepone like this.
  3. huyne197

    huyne197 Member

    Bài viết:
    183
    Likes :
    43
    Hóng tin bác
     
  4. namchelsea

    namchelsea Member

    Bài viết:
    367
    Likes :
    84
    cái này share hêt rồi mà chẳng khác trang mình là mấy http://congdong24h.com
     
    instepone thích bài này.
  5. nttruong

    nttruong Well-Known Member

    Bài viết:
    1,518
    Likes :
    776
    VBB nào bạn?
     
    instepone thích bài này.
  6. nttruong

    nttruong Well-Known Member

    Bài viết:
    1,518
    Likes :
    776
    Share như style bác là phiên bản cũ của nó! Kg có slide nhé! Hiện tại slide chưa ai share nên mới share thôi!
     
    instepone thích bài này.
  7. namchelsea

    namchelsea Member

    Bài viết:
    367
    Likes :
    84
    bạn share mình cũng thank mà anh em nc chứ ko có ý gì đâu hihi
     
  8. huyne197

    huyne197 Member

    Bài viết:
    183
    Likes :
    43
    Bác cho mình cái đường dẫn được k, k biết tên gì nên k tìm thấy, tk bác
     
    instepone thích bài này.
  9. tongtulenh

    tongtulenh Member

    Bài viết:
    313
    Likes :
    42
    Chờ tin anh, bjo là 11h32 roài :D
     
  10. nttruong

    nttruong Well-Known Member

    Bài viết:
    1,518
    Likes :
    776
    Updated!
     
    instepone thích bài này.
  11. tongtulenh

    tongtulenh Member

    Bài viết:
    313
    Likes :
    42
    EM hỏi anh cái đoạn này với:

    Mã:
    <div class="items3 items3_1">
                    <a href="threads/tai-sao-con-gai-moi-xai-smartphone-nen-chon-android-thay-vi-ios.10290/"><img src="http://s1.storage.5giay.vn/image/2014/06/tai-sao-con-gai-moi-xai-smartphone-nen-chon-android-thay-vi-ios-1583-1401788517-538d9865d1447.jpg" alt="Tại sao con gái mới xài smartphone nên chọn Android thay vì iOS"></a>
                       <span class="title"><a href="{xen:link threads, $news}">{$news.title}</a></span>
                </div>
    Đoạn này là link bài viết của 5giay. em tưởng đoạn này phải thay link động để nó tự cập nhật link bài viết của mỗi diễn đàn khi cài chứ nhỉ?

    Nếu để đoạn này thì mặc định nó sẽ hiển thị mãi bài này của 5s à?
     
    instepone and nttruong like this.
  12. nttruong

    nttruong Well-Known Member

    Bài viết:
    1,518
    Likes :
    776
    Đã thay lại, quên thay chỗ đo
     
    instepone and tongtulenh like this.
  13. namchelsea

    namchelsea Member

    Bài viết:
    367
    Likes :
    84
    đường dẫn gì nói xem bạn
     
    instepone thích bài này.
  14. Lê Tí

    Lê Tí Well-Known Member

    Bài viết:
    1,450
    Likes :
    620
    like phát :)
     
    instepone thích bài này.
  15. namchelsea

    namchelsea Member

    Bài viết:
    367
    Likes :
    84
    Tí đi bộ đội về ùi ak
     
    instepone thích bài này.
  16. dinhchi

    dinhchi Well-Known Member

    Bài viết:
    555
    Likes :
    293
    Không hiểu bác đê 2 cái dòng này làm gì
    Mã:
    <xen:require css="message_user_info.css" />
    <xen:require css="bb_code.css" />
     
    instepone thích bài này.
  17. nttruong

    nttruong Well-Known Member

    Bài viết:
    1,518
    Likes :
    776
    Mặc định của temp nó. Để cũng kg ảnh hưởng gì. Nên kg quan tam thôi
     
    instepone thích bài này.
  18. huyne197

    huyne197 Member

    Bài viết:
    183
    Likes :
    43
    Cái slide portal ak, bác nói có share rồi, bác cho e cái đường dẫn tải slide đó đi bác
     
    instepone thích bài này.
  19. namchelsea

    namchelsea Member

    Bài viết:
    367
    Likes :
    84
    huyne197 thích bài này.
  20. dinhchi

    dinhchi Well-Known Member

    Bài viết:
    555
    Likes :
    293
    sao lại ko ảnh hưởng bác, tự nhiên lôi kéo theo 1 lũ css load cho khỏe trang à :v
     
    instepone thích bài này.
comments powered by Disqus

Chia sẻ trang này

Đang tải...