Share block Hotnews dạng slide dùng CSS3 cho xenforo.

Thảo luận trong 'Style & Template Questions' bắt đầu bởi vbt.dongnguyen, 28/8/14.

1votes
5/5, 1 vote

  1. vbt.dongnguyen

    vbt.dongnguyen Member

    Bài viết:
    180
    Likes :
    102
    Share rồi đó bạn.
     
  2. Captain

    Captain New Member

    Bài viết:
    37
    Likes :
    15
    Có tự cập nhật tin không vậy bác . sao e thấy cái EWRblock_RecentNews4 nó ngắn hơn mấy code hot new khác :D
     
  3. vbt.dongnguyen

    vbt.dongnguyen Member

    Bài viết:
    180
    Likes :
    102
    Mình tự viết lại mà bạn, nó tự cập nhật chứ hok lẻ cập nhật tay trời.
    Bạn cứ làm, lỗi chổ nào lên đây mình sửa hộ, hoặc teamview giúp bạn luôn.
     
    AC_Khanh01 thích bài này.
  4. Captain

    Captain New Member

    Bài viết:
    37
    Likes :
    15
    Cám ơn bạn , để mình test thử :D . Cám ơn lần 2 vì sự nhiệt tình của bạn :">
     
    bibiduy thích bài này.
  5. AC_Khanh01

    AC_Khanh01 Member

    Bài viết:
    221
    Likes :
    61
    Ngon quá! :x
    Thanks vbt.dongnguyen! :-bd
    Nhưng cái phần Hotnew, làm mà không thấy hiện ra gì cả :)
     
    Last edited: 29/8/14
  6. huyne197

    huyne197 Member

    Bài viết:
    183
    Likes :
    43
    oanh dau
     
  7. vbt.dongnguyen

    vbt.dongnguyen Member

    Bài viết:
    180
    Likes :
    102
    Bạn đổi cái này lại chưa: <xen:foreach loop="$RecentNews4" value="$news">
    Nếu bạn cho nó vào block hotnews thì sửa RecentNews4 lại thành HotNews bạn nhé.
    Nhớ Set News Posts Per Page cho nó lấy 20 bài mới hiện nhé.
     
    AC_Khanh01 thích bài này.
  8. Captain

    Captain New Member

    Bài viết:
    37
    Likes :
    15
    Link file js của bác chưa trỏ đến link trực tiếp kìa . Code này mình dùng k đc rùi , bác có demo hok , của mình làm nó có hiện đâu
     
  9. vbt.dongnguyen

    vbt.dongnguyen Member

    Bài viết:
    180
    Likes :
    102
    Hí hí mình share nhầm code, sr bạn, bạn lấy lại cái này nhé:
    Mình mang nó ra luôn rồi đó, bạn có thể xem bên web mình: http://zshare.vn
    EWRblock_RecentNews3
    Mã:
    <xen:require css="EWRblock_RecentNews3.css" />
    <script type="text/javascript">
        $(document).ready(function(){
        $('.block_img_1').resizecrop({
          width:390,
          height:150,
          vertical:"top"
        });
    $('.block_img_2').resizecrop({
          width:297,
          height:150,
          vertical:"top"
        });
    $('.block_img_3').resizecrop({
          width:229,
          height:150,
          vertical:"top"
        });
    $('.block_img_4').resizecrop({
          width:228,
          height:150,
          vertical:"top"
        });
    $('.block_img_5').resizecrop({
          width:229,
          height:150,
          vertical:"top"
        });
      });
    </script>
    <div id="recentSlider">
            <div class="topstories" id="topstories">
                <div class="grid_holder">
              
            <xen:foreach loop="$RecentNews3" value="$news" i="$i">  
                    <xen:if is="{$i}>20">
                    <xen:elseif is="{$i}>=10 && {$i}<=10" />
                <a class="a_block_first a_block a_block_1" href="{xen:link threads, $news}"> <span class="block_img_1" style="width: 390px; height: 150px; overflow: hidden; display: inline-block; vertical-align: middle; position: relative;"><img class="resizecrop" style="width: 390px; top: 0px; left: 0px; position: relative; display: block;" src="attachments/{$news.attach.filename}.{$news.attach.attachment_id}"></span>
                        <div class="txt_holder">
                            <p> <span class="txts">{xen:helper snippet, $news.title, 25}</span> <span class="bg"></span> </p>
                          
                            <div class="timestamp"> <span class="txts">Ngày {$news.day} {$news.month}</span> <span class="bg"></span> </div>
                          
                        </div>
                </a>                                       
          
            <xen:elseif is="{$i}>=11 && {$i}<=11" />
                <a class="a_block_first a_block a_block_2" href="{xen:link threads, $news}"> <span class="block_img_2" style="width: 297px; height: 150px; overflow: hidden; display: inline-block; vertical-align: middle; position: relative;"><img class="resizecrop" style="width: 297px; top: 0px; left: 0px; position: relative; display: block;" src="attachments/{$news.attach.filename}.{$news.attach.attachment_id}"></span>
                        <div class="txt_holder">
                            <p> <span class="txts">{xen:helper snippet, $news.title, 25}</span> <span class="bg"></span> </p>
                            <div class="timestamp"> <span class="txts">Ngày {$news.day} {$news.month}</span> <span class="bg"></span> </div>
                        </div>
                </a>                                       
          
            <xen:elseif is="{$i}>=12 && {$i}<=12" />
                <a class="a_block_first a_block a_block_3" href="{xen:link threads, $news}"> <span class="block_img_3" style="width: 229px; height: 150px; overflow: hidden; display: inline-block; vertical-align: middle; position: relative;"><img class="resizecrop" style="height: 150px; left: -55px; top: 0px; position: relative; display: block;" src="attachments/{$news.attach.filename}.{$news.attach.attachment_id}"></span>
                        <div class="txt_holder">
                            <p> <span class="txts">{xen:helper snippet, $news.title, 25}</span> <span class="bg"></span> </p>
                            <div class="timestamp"> <span class="txts">Ngày {$news.day} {$news.month}</span> <span class="bg"></span> </div>
                        </div>
                </a>                                       
          
            <xen:elseif is="{$i}>=13 && {$i}<=13" />
                <a class="a_block_first a_block a_block_4" href="{xen:link threads, $news}"> <span class="block_img_4" style="width: 228px; height: 150px; overflow: hidden; display: inline-block; vertical-align: middle; position: relative;"><img class="resizecrop" style="height: 150px; left: -43px; top: 0px; position: relative; display: block;" src="attachments/{$news.attach.filename}.{$news.attach.attachment_id}"></span>
                        <div class="txt_holder">
                            <p> <span class="txts">{xen:helper snippet, $news.title, 25}</span> <span class="bg"></span> </p>
                            <div class="timestamp"> <span class="txts">Ngày {$news.day} {$news.month}</span> <span class="bg"></span> </div>
                        </div>
                </a>                                       
          
            <xen:elseif is="{$i}>=14 && {$i}<=14" />
                <a class="a_block_first a_block a_block_5" href="{xen:link threads, $news}"> <span class="block_img_5" style="width: 229px; height: 150px; overflow: hidden; display: inline-block; vertical-align: middle; position: relative;"><img class="resizecrop" style="width: 229px; top: 0px; left: 0px; position: relative; display: block;" src="attachments/{$news.attach.filename}.{$news.attach.attachment_id}"></span>
                        <div class="txt_holder">
                            <p> <span class="txts">{xen:helper snippet, $news.title, 25}</span> <span class="bg"></span> </p>
                            <div class="timestamp"> <span class="txts">Ngày {$news.day} {$news.month}</span> <span class="bg"></span> </div>
                        </div>
                </a>                                       
             </xen:if>
            </xen:foreach>
                </div>
            </div>
        </div>
    EWRblock_RecentNews3.css
    Mã:
    .topstories {
        width: 680px;
        padding-bottom: 20px;
        min-width: 300px;
        height: 281px;
    }
    
    .topstories div, p {
        margin: 0;
        padding: 0;
    }
    
    
    
    .topstories .a_block_1 {
        width: 382px;
        height: 150px;
    }
    
    
    
    .topstories .a_block_2 {
        width: 296px;
        height: 150px;
    }
    
    .topstories .a_block_3 {
        width: 226px;
        height: 150px;
    }
    
    .topstories .a_block_4 {
        width: 225px;
        height: 150px;
    }
    
    .topstories .a_block_5 {
        width: 225px;
        height: 150px;
    }
    
    
    .topstories .a_block_first {
        margin-left: 0px;
    }
    
    .topstories .a_block {
        float: left;
        display: inline;
        position: relative;
        margin-left: 1px;
        margin-bottom: 1px;
        text-decoration: none;
        overflow: hidden;
    }
    
    .topstories .a_block img {
        float: left;
        display: inline;
    }
    
    .topstories .a_block .txt_holder {
        position: absolute;
        bottom: 0;
        left: 0;
        cursor: pointer;
        -background: #100502;
        width:100%;
      
    height:28px;
    -webkit-transition: -webkit-transform 0.5s ease;
        -moz-transition: -moz-transform 0.5s ease-in;
      
        -webkit-transition-property: height;
        -webkit-transition-duration: 0.2s;
        -webkit-transition-timing-function: linear;
        -webkit-transition-delay: 0.1s;
        /* Standard syntax   overflow: hidden;*/
        transition-property: height;
        transition-duration: 0.2s;
        transition-timing-function: linear;
        transition-delay: 0.1s;
      
    }
    
    .topstories .a_block .txt_holder:hover {
    height: 130px;
    
    }
    topstories .a_block .block_img_2:hover {
    height: 130px;
    }
    
    .topstories .a_block .txt_holder p {
        font-family: Arial,Helvetica,sans-serif;
        font-size: 15px;
        line-height: 16px;
        text-decoration: none;
        color: white;
        padding: 8px 10px;
        position: relative;
    }
    
    .topstories .a_block .txt_holder p .txts {
        position: relative;
        z-index: 10;
    }
    
    .topstories .a_block .txt_holder p .bg {
        position: absolute;
        width: 100%;
        height: 155px;
        top:0px;
        left: 0;
        background: #003350;
        filter: alpha(opacity=60);
        -moz-opacity: 0.6;
        opacity: 0.6;
        -display: none;
        border: 0;
      
    }
    
    .topstories .a_block .txt_holder .timestamp, .topstories .a_block .txt_holder .badge {
        position: absolute;
        top: -20px;
        -background: #49853e;
        color: #DDD;
        font-size: 10px;
        line-height: 20px;
        padding: 0 10px;
        text-transform: uppercase;
        border: 0;
    }
    
    .topstories .a_block .txt_holder .timestamp .txts, .topstories .a_block .txt_holder .badge .txts {
        position: relative;
        z-index: 10;
        font-family: georgia,serif;
    }
    
    Inherited from div.timestamp
        .topstories .a_block .txt_holder .timestamp, .topstories .a_block .txt_holder .badge {
        color: #DDD;
        font-size: 10px;
        line-height: 20px;
        text-transform: uppercase;
      
      
    }
    
    Inherited from div.txt_holder
        .topstories .a_block .txt_holder {
        cursor: pointer;
      
    }
    
    .topstories .a_block .txt_holder .timestamp .bg {
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
        background: #49853E;
        filter: alpha(opacity=60);
        -moz-opacity: 0.60;
        opacity: 0.60;
        -display: none;
        border: 0;
      
    }
    
     
    Last edited: 29/8/14
    AC_Khanh01 and Captain like this.
  10. Captain

    Captain New Member

    Bài viết:
    37
    Likes :
    15
    Code này nó lấy ảnh kèm để hiển thị , bác có thể chỉnh lại cho nó lấy ảnh ở host khác đc hok . Như mấy cái Hotnew khác e thấy có cái lấy ảnh host ngoài đc ý
     
    vbt.dongnguyen thích bài này.
  11. vbt.dongnguyen

    vbt.dongnguyen Member

    Bài viết:
    180
    Likes :
    102
    Đây mình chỉnh rồi, bạn thay bằng cái này nhé.
    Mã:
    <xen:require css="EWRblock_RecentNews3.css" />
    <script type="text/javascript">
        $(document).ready(function(){
        $('.block_img_1').resizecrop({
          width:390,
          height:150,
          vertical:"top"
        });
    $('.block_img_2').resizecrop({
          width:297,
          height:150,
          vertical:"top"
        });
    $('.block_img_3').resizecrop({
          width:229,
          height:150,
          vertical:"top"
        });
    $('.block_img_4').resizecrop({
          width:228,
          height:150,
          vertical:"top"
        });
    $('.block_img_5').resizecrop({
          width:229,
          height:150,
          vertical:"top"
        });
      });
    </script>
    <div id="recentSlider">
            <div class="topstories">
                <div class="grid_holder">
              
            <xen:foreach loop="$RecentNews3" value="$news" i="$i">  
                    <xen:if is="{$i}>20">
                    <xen:elseif is="{$i}>=1 && {$i}<=1" />
                    <xen:if is="{$news.promote_icon} != 'disabled'">
                    <xen:if hascontent="true">
    
    <a class="a_block_first a_block a_block_1" href="{xen:link threads, $news}">
    <span class="block_img_1" style="width: 390px; height: 150px; overflow: hidden; display: inline-block; vertical-align: middle; position: relative;">
    
    
                                <xen:contentcheck>
                                <xen:if is="{$news.attach}">
                                    <img class="resizecrop" style="width: 390px; top: 0px; left: 0px; position: relative; display: block;" src="attachments/{$news.attach.filename}.{$news.attach.attachment_id}" alt="{$news.attach.filename}" height="170" />
                                <xen:elseif is="{$news.medio}" />
                                    <div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">
                                    <img class="resizecrop" style="width: 390px; top: 0px; left: 0px; position: relative; display: block;" src="styles/8wayrun/EWRmedio_play.png" />
                                    </div>
                                <xen:elseif is="{$news.image}" />
                                    <img class="resizecrop" style="width: 390px; top: 0px; left: 0px; position: relative; display: block;" src="http://res.cloudinary.com/tint/image/fetch/w_500,h_333,c_thumb/{$news.image}" alt="{$news.image}" />
                                <xen:else />
                                   <img class="resizecrop" style="width: 390px; top: 0px; left: 0px; position: relative; display: block;" src="styles/noimg.jpg" height="170" />
                                </xen:if>
                                </xen:contentcheck>
    </span>
                        <div class="txt_holder">
                            <p> <span class="txts">{$news.title}</span> <span class="bg"></span> </p>
                          
                            <div class="timestamp"> <span class="txts">Ngày {$news.day} {$news.month}</span> <span class="bg"></span> </div>
                          
                        </div>
                </a>                                       
    </xen:if>
    </xen:if>
            <xen:elseif is="{$i}>=2 && {$i}<=2" />
    <xen:if is="{$news.promote_icon} != 'disabled'">
    <xen:if hascontent="true">
    
    <a class="a_block_first a_block a_block_2" href="{xen:link threads, $news}">
    <span class="block_img_2" style="width: 297px; height: 150px; overflow: hidden; display: inline-block; vertical-align: middle; position: relative;">
    
    
                                <xen:contentcheck>
                                <xen:if is="{$news.attach}">
                                    <img class="resizecrop" style="width: 297px; top: 0px; left: 0px; position: relative; display: block;" src="attachments/{$news.attach.filename}.{$news.attach.attachment_id}" alt="{$news.attach.filename}" height="170" />
                                <xen:elseif is="{$news.medio}" />
                                    <div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">
                                    <img class="resizecrop" style="width: 297px; top: 0px; left: 0px; position: relative; display: block;" src="styles/8wayrun/EWRmedio_play.png" />
                                    </div>
                                <xen:elseif is="{$news.image}" />
                                    <img class="resizecrop" style="width: 297px; top: 0px; left: 0px; position: relative; display: block;" src="http://res.cloudinary.com/tint/image/fetch/w_500,h_333,c_thumb/{$news.image}" alt="{$news.image}" />
                                <xen:else />
                                    <img class="resizecrop" style="width: 297px; top: 0px; left: 0px; position: relative; display: block;" src="styles/noimg.jpg" height="170" />
                                </xen:if>
                                </xen:contentcheck>
    </span>
                        <div class="txt_holder">
                            <p> <span class="txts">{$news.title}</span> <span class="bg"></span> </p>
                          
                            <div class="timestamp"> <span class="txts">Ngày {$news.day} {$news.month}</span> <span class="bg"></span> </div>
                          
                        </div>
                </a>                                       
    </xen:if>
    </xen:if>
                    <xen:elseif is="{$i}>=3 && {$i}<=3" />
    <xen:if is="{$news.promote_icon} != 'disabled'">
    <xen:if hascontent="true">
    
    <a class="a_block_first a_block a_block_3" href="{xen:link threads, $news}">
    <span class="block_img_3" style="width: 229px; height: 150px; overflow: hidden; display: inline-block; vertical-align: middle; position: relative;">
    
    
                                <xen:contentcheck>
                                <xen:if is="{$news.attach}">
                                    <img class="resizecrop" style="height: 150px; -left: -55px; top: 0px; position: relative; display: block;" src="attachments/{$news.attach.filename}.{$news.attach.attachment_id}" alt="{$news.attach.filename}" height="170" />
                                <xen:elseif is="{$news.medio}" />
                                    <div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">
                                    <img class="resizecrop" style="height: 150px; -left: -55px; top: 0px; position: relative; display: block;" src="styles/8wayrun/EWRmedio_play.png" />
                                    </div>
                                <xen:elseif is="{$news.image}" />
                                    <img class="resizecrop" style="height: 150px; -left: -55px; top: 0px; position: relative; display: block;" src="http://res.cloudinary.com/tint/image/fetch/w_500,h_333,c_thumb/{$news.image}" alt="{$news.image}" />
                                <xen:else />
                                    <img class="resizecrop" style="height: 150px; -left: -55px; top: 0px; position: relative; display: block;" src="styles/noimg.jpg" height="170" />
                                </xen:if>
                                </xen:contentcheck>
    </span>
                        <div class="txt_holder">
                            <p> <span class="txts">{$news.title}</span> <span class="bg"></span> </p>
                          
                            <div class="timestamp"> <span class="txts">Ngày {$news.day} {$news.month}</span> <span class="bg"></span> </div>
                          
                        </div>
                </a>                                       
    </xen:if>
    </xen:if>                                  
          
            <xen:elseif is="{$i}>=4 && {$i}<=4" />
    <xen:if is="{$news.promote_icon} != 'disabled'">
    <xen:if hascontent="true">
    
    <a class="a_block_first a_block a_block_4" href="{xen:link threads, $news}">
    <span class="block_img_4" style="width: 228px; height: 150px; overflow: hidden; display: inline-block; vertical-align: middle; position: relative;">
    
    
                                <xen:contentcheck>
                                <xen:if is="{$news.attach}">
                                    <img class="resizecrop" style="-height: 150px; width: 228px; -left: -43px; top: 0px; position: relative; display: block;" src="attachments/{$news.attach.filename}.{$news.attach.attachment_id}" alt="{$news.attach.filename}" height="170" />
                                <xen:elseif is="{$news.medio}" />
                                    <div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">
                                    <img class="resizecrop" style="-height: 150px; width: 228px; -left: -43px; top: 0px; position: relative; display: block;" src="styles/8wayrun/EWRmedio_play.png" />
                                    </div>
                                <xen:elseif is="{$news.image}" />
                                    <img class="resizecrop" style="-height: 150px; width: 228px; -left: -43px; top: 0px; position: relative; display: block;" src="http://res.cloudinary.com/tint/image/fetch/w_500,h_333,c_thumb/{$news.image}" alt="{$news.image}" />
                                <xen:else />
                                    <img class="resizecrop" style="-height: 150px; width: 228px; -left: -43px; top: 0px; position: relative; display: block;" src="styles/noimg.jpg" height="170" />
                                </xen:if>
                                </xen:contentcheck>
    </span>
                        <div class="txt_holder">
                            <p> <span class="txts">{$news.title}</span> <span class="bg"></span> </p>
                          
                            <div class="timestamp"> <span class="txts">Ngày {$news.day} {$news.month}</span> <span class="bg"></span> </div>
                          
                        </div>
                </a>                                       
    </xen:if>
    </xen:if>                                          
          
            <xen:elseif is="{$i}>=5 && {$i}<=5" />
    <xen:if is="{$news.promote_icon} != 'disabled'">
    <xen:if hascontent="true">
    
    <a class="a_block_first a_block a_block_5" href="{xen:link threads, $news}">
    <span class="block_img_5" style="width: 229px; height: 150px; overflow: hidden; display: inline-block; vertical-align: middle; position: relative;">
    
    
                                <xen:contentcheck>
                                <xen:if is="{$news.attach}">
                                    <img class="resizecrop" style="width: 229px; top: 0px; left: 0px; position: relative; display: block;" src="attachments/{$news.attach.filename}.{$news.attach.attachment_id}" alt="{$news.attach.filename}" height="170" />
                                <xen:elseif is="{$news.medio}" />
                                    <div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">
                                    <img class="resizecrop" style="width: 229px; top: 0px; left: 0px; position: relative; display: block;" src="styles/8wayrun/EWRmedio_play.png" />
                                    </div>
                                <xen:elseif is="{$news.image}" />
                                    <img class="resizecrop" style="width: 229px; top: 0px; left: 0px; position: relative; display: block;" src="http://res.cloudinary.com/tint/image/fetch/w_500,h_333,c_thumb/{$news.image}" alt="{$news.image}" />
                                <xen:else />
                                    <img class="resizecrop" style="width: 229px; top: 0px; left: 0px; position: relative; display: block;" src="styles/noimg.jpg" height="170" />
                                </xen:if>
                                </xen:contentcheck>
    </span>
                        <div class="txt_holder">
                            <p> <span class="txts">{$news.title}</span> <span class="bg"></span> </p>
                          
                            <div class="timestamp"> <span class="txts">Ngày {$news.day} {$news.month}</span> <span class="bg"></span> </div>
                          
                        </div>
                </a>                                       
    </xen:if>
    </xen:if>                                      
             </xen:if>
            </xen:foreach>
                </div>
            </div>
        </div>
    Nhớ sửa link ảnh ở các đoạn:
    <img class="resizecrop" style="width: 229px; top: 0px; left: 0px; position: relative; display: block;" src="styles/noimg.jpg" height="170" /> cho đúng nha ban.
     
    Captain and AC_Khanh01 like this.
  12. Captain

    Captain New Member

    Bài viết:
    37
    Likes :
    15
    Chuẩn CMNR . Thanks bác nhieu ạ :-*
     
  13. manhcuong_177

    manhcuong_177 New Member

    Bài viết:
    30
    Likes :
    7
    Share luôn cả cái RecentNews của blackberryvietnam.net đc k bạn
     
    vbt.dongnguyen thích bài này.
  14. vbt.dongnguyen

    vbt.dongnguyen Member

    Bài viết:
    180
    Likes :
    102
    OK tối share cho bạn nhé, tối qua thức cả đêm tới giờ rồi, giờ ngủ giấc đã.
     
    manhcuong_177, AC_Khanh01 and bibiduy like this.
  15. AC_Khanh01

    AC_Khanh01 Member

    Bài viết:
    221
    Likes :
    61
    Server website bác làm thế nào mà load nhanh vậy? :D load cứ gọi là vèo vèo ấy :D
     
  16. vbt.dongnguyen

    vbt.dongnguyen Member

    Bài viết:
    180
    Likes :
    102
    Hosting của BKNS.VN đấy bạn.
     
    AC_Khanh01 and bibiduy like this.
  17. bibiduy

    bibiduy Member

    Bài viết:
    511
    Likes :
    59
    mình củng đang dùng BKNS
     
  18. vbt.dongnguyen

    vbt.dongnguyen Member

    Bài viết:
    180
    Likes :
    102
    KKK thằng bạn, cũng dùng chung BKNS với mình à.
    Đang đăng kí cái chứng chỉ SSL cho Domain mình nè, mai là có chứng chỉ sài rồi nhé tèn tén ten :D
     
  19. AC_Khanh01

    AC_Khanh01 Member

    Bài viết:
    221
    Likes :
    61
    Dùng SSL có làm chậm tốc độ forums chút nào không nhỉ? :)
     
  20. vbt.dongnguyen

    vbt.dongnguyen Member

    Bài viết:
    180
    Likes :
    102
    Có mà chỉ chậm lại một xíu thôi bạn, vì tạo kết nối an toàn mà, nên phải gửi thêm 1 đoạn mã xác minh lên máy chủ nửa chứ.
     
    AC_Khanh01 thích bài này.
comments powered by Disqus

Chia sẻ trang này

Đang tải...