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

Không Liên Quan nhưng dưới footer của bác vẫn còn domain cũ là PART24.net

© 2014 PART24.NET. Thiết kế bởi vbt.dongnguyen.

 

Hihi cảm ơn bạn nè.
Tại mình ko muốn đổi vì định lấy tên đó làm tên cty luôn ấy mà

 

Share cái RecentNews của blackberryvietnam.net đi bạn, đang hóng quá trời

 

đang hoàn thiện 70% http://design-wedding.com/
tác phẩm của vbt.dongnguyen.

 

Thôi chết mình quên mất 2 hôm nay sr bạn.
Tối nay có hàng cho bạn, nhất định là vậy hihi.
Tối làm xong cái design-wedding rồi mình rip cho bạn ngay

 

Sẵn share cái này của span.vn đi b ới . hè hè

 

Đây của bạn đây, sr để bạn đợi lâu hihi.
EWRblock_RecentNews2

Mã:

<xen:require css="message_user_info.css" />
<xen:require css="bb_code.css" />
<xen:require css="EWRblock_RecentNews2.css" />

<div id="RecentNews2">
    <xen:foreach loop="$RecentNews2" value="$news">
        <div class="section sectionMain2 RecentNews2" id="{$news.thread_id}">

            <div class="primaryContent2 {xen:if {$option.leftdate}, 'leftDate'}">
                <div class="subHeading2">
                    <div style="float: right; white-space: nowrap;">
                       
                        <xen:if is="{$visitor.permissions.EWRporta.canPromote}">
                            &nbsp; (<a href="{xen:link 'threads/edit', $news}" class="OverlayTrigger">{xen:phrase edit}</a>)
                        </xen:if>
                    </div>

                    <h2><a href="{xen:link threads, $news}" class="newsTitle">{$news.title}</a></h2>
                </div>

                <div class="messageContent baseHtml">
                    <div class="postedBy">
                        <span class="posted iconKey"><div class="sticky"></div>{xen:phrase by_x_at_y,
                            'user=<a href="{xen:link members, $news}" class="username">{$news.username}</a>',
                            'date=<a href="{xen:link threads, $news}">{xen:time $news.post_date, 'absolute'}</a>'} <xen:datetime time="$news.promote_date" /></span>
                        <span class="views">({xen:number $news.view_count} {xen:phrase views} / {xen:number $news.first_post_likes} {xen:phrase likes})</span>
                        <span class="comments iconKey"><div class="new"></div><a href="{xen:link threads/unread, $news}">{xen:number $news.reply_count} {xen:phrase comments}</a></span>
                    </div>

                         <p style="text-align:center">
                         <a href="{xen:link threads, $news}">
                            <xen:if is="{$news.attach}">
                                <img class="imgresize" src="attachments/{$news.attach.filename}.{$news.attach.attachment_id}" alt="{$news.attach.filename}" />
                            <xen:elseif is="{$news.medio}" />
                                <div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">
                                <img class="imgresize" src="styles/8wayrun/EWRmedio_play.png" />
                                </div>
                            <xen:elseif is="{$news.image}" />
                                <img class="imgresize" src="{$news.image}" alt="{$news.image}" />
                            <xen:else />
                                <img class="imgresize" src="styles/noimg.jpg" />
                            </xen:if>
                          </a>
                           </p>
                    <div class="newsText">{xen:helper snippet, $news.message, 300}</div>
                    <div class="clearFix"></div>
                </div>

                <div class="sectionFooter2">
                    <xen:if is="{$option.social}">
                        <xen:if hascontent="true">
                            <div class="sharePage">
                                <xen:require css="share_page.css" />

                                <xen:contentcheck>
                                    <xen:hook name="RecentNews2_share_page_options" params="{xen:array 'url={xen:link canonical:threads, $news}'}">
                                    <xen:if is="{$xenOptions.tweet.enabled}">
                                        <div class="tweet shareControl">
                                            <a href="http://twitter.com/share" class="twitter-share-button"
                                                data-count="horizontal"
                                                data-lang="{xen:helper twitterLang, $visitorLanguage.language_code}"
                                                data-url="{xen:link canonical:threads, $news}"
                                                {xen:if {$news.title}, 'data-text="{$news.title}"'}
                                                {xen:if {$xenOptions.tweet.via}, 'data-via="{$xenOptions.tweet.via}"'}
                                                {xen:if {$xenOptions.tweet.related}, 'data-related="{$xenOptions.tweet.related}"'}>{xen:phrase tweet}</a>
                                        </div>
                                    </xen:if>
                                    <xen:if is="{$xenOptions.plusone}">
                                        <div class="plusone shareControl">
                                            <div class="g-plusone" data-size="medium" data-count="true" data-href="{xen:link canonical:threads, $news}" data-lang="{$visitorLanguage.language_code}"></div>
                                        </div>
                                    </xen:if>
                                    <xen:if is="{$xenOptions.facebookLike}">
                                        <div class="facebookLike shareControl">
                                            <xen:container var="$facebookSdk">1</xen:container>
                                            <fb:like href="{xen:link canonical:threads, $news}" layout="button_count" action="{$xenOptions.facebookLikeAction}" font="trebuchet ms" colorscheme="@fbColorScheme"></fb:like>
                                        </div>
                                    </xen:if>
                                    </xen:hook>
                                </xen:contentcheck>
                            </div>
                        </xen:if>
                    <xen:else />
                        <div class="categories">
                            <ul>
                                <xen:if is="{$visitor.permissions.EWRporta.canPromote}">
                                    <a href="{xen:link 'threads/category', $news}" class="button OverlayTrigger">+</a>
                                </xen:if>
                                <xen:foreach loop="$news.categories" value="$subCat">
                                    <li><a href="{xen:link 'articles', $subCat}" class="button">{$subCat.category_name}</a></li>
                                </xen:foreach>
                            </ul>
                        </div>
                    </xen:if>

                    <div class="continue2">
                        <a class="iconKey2 button2" href="{xen:link threads, $news}">
                            <div class="redirect2"></div>
                            {xen:phrase continue_reading}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </xen:foreach>

    <xen:if hascontent="true">
    <div class="section sectionMain2">
        <xen:contentcheck>
        <xen:if is="{$option.pagenav} && {$option.count} > {$option.limit}">
            <xen:pagenav link="articles" linkdata="{$category}" page="{$page}" perpage="{$option.limit}" total="{$option.count}" />
        </xen:if>
        </xen:contentcheck>
    </div>
    </xen:if>
</div>

EWRblock_RecentNews2.css

Mã:

#RecentNews2 {
background: none repeat scroll 0% 0% #fafafa;
border: 1px solid #D6D6D6;
border-radius: 6px;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);

}

.RecentNews2 .subHeading2 {
    margin: 5px auto;
    font-size: 18px;
    color: #000;
    line-height: 28px;
    padding: 0px;
}
.RecentNews2 .subHeading2 a { color: #000; }
.RecentNews2 .subHeading2 h2 { font-size: 1.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.RecentNews2 .messageUserBlock { float: right; margin-left: 10px; }

.RecentNews2 .newsDate { float: left; margin: 0px 10px 10px 0px; padding: 0px 10px 5px; width: 35px; font-weight: bold; text-align: center; }
.RecentNews2 .newsDate .newsMonth { padding: 10px 0px 5px !important; margin: 0px -10px 5px !important; text-transform: uppercase; }
.RecentNews2 .newsDate .newsDay { font-size: 26px; }

.RecentNews2 .leftDate .newsDate { margin-left: -45px; }
.RecentNews2 .leftDate .newsText { margin-left: 25px; }

.RecentNews2 .messageContent { font-size: 13px; }
.RecentNews2 .messageContent .postedBy {
    margin-bottom: 15px;
    font-size: 14px;
    color: #898989;
}
.RecentNews2 .messageContent .username { font-weight: bold; }
.RecentNews2 .messageContent .comments { float: right; font-weight: bold; }
.RecentNews2 .messageContent .clearFix { clear: right; }

.RecentNews2 .iconKey2 div
{
    background: transparent url('@imagePath/xenforo/xenforo-ui-sprite.png') no-repeat 10000px 0;
    width: 16px;
    height: 16px;
    float: left;
    margin-right: 4px;
}
.RecentNews2 .iconKey2 .sticky    { background-position:   0px -16px; }
.RecentNews2 .iconKey2 .redirect2  { background-position: -48px -16px; }
.RecentNews2 .iconKey2 .new       { background-position: -64px -16px; }
.sectionFooter2 {
    overflow: hidden;
    font-size: 11px;
    color: #65A5D1;
    -background: url('styles/default/xenforo/gradients/category-23px-light.png') repeat-x scroll center top #D7EDFC;
    -padding: 4px 10px;
    -border-bottom: 1px solid #A5CAE4;
    line-height: 16px;
}
.RecentNews2 .sectionFooter2 { -margin: 10px -10px -10px; text-align: right; position: relative; }
.RecentNews2 .sectionFooter2 .continue2 { padding-top: 5px; font-size: 12px; border-bottom: solid 1px #d1d1d1;}
.RecentNews2 .sectionFooter2 .continue2 .redirect { margin: 3px 4px 0px 0px; }
.button2 {
    font-style: normal;
    font-size: 12px;
    font-family: Calibri,"Trebuchet MS",Verdana,Geneva,Arial,Helvetica,sans-serif;
    color: #000;
    -background: url('styles/default/xenforo/gradients/form-button-white-25px.png') repeat-x scroll center top #DCDCEB;
    padding: 0px 6px;

    text-align: center;

    text-shadow: 0px 0px 0px transparent, 0px -1px 2px #FFF;
    outline: medium none;
    line-height: 21px;
    display: inline-block;
    height: 23px;
}
a.button2 {
    display: inline-block;
    color: #000;
    text-decoration: none;
}
.RecentNews2 .sectionFooter2 .categories { padding-top: 5px; float: left; }
.RecentNews2 .sectionFooter2 .categories li { display: inline; }

.RecentNews2 .sectionFooter2 .sharePage { position: absolute; }
.RecentNews2 .sectionFooter2 .shareControl { margin-top: 6px !important; }
.imgresize {
max-width: 70%;
max-height: 70%;
}
.primaryContent2 {
    background-color: #FCFCFF;
    padding: 10px;
    -border-bottom: 1px solid #d1d1d1;
}

 

Của bạn đây nhé nhớ tùy chỉnh lại đúng với thông số block bạn thêm code.
Mình cũng đang để demo bên forum mình bạn xem demo sống tại: http://www.zshare.vn
EWRblock_HotNews

Mã:

<xen:require css="EWRblock_HotNews.css" />
        <!-- include jQuery + carouFredSel plugin -->
        <script type="text/javascript" language="javascript" src="js/jquery.carouFredSel-6.2.1-packed.js"></script>
        <!-- fire plugin onDocumentReady -->
        <script type="text/javascript" language="javascript">
            $(function() {

                //    Basic carousel, no options
                $('#foo0').carouFredSel();

                //    Basic carousel + timer, using CSS-transitions
                $('#foo1').carouFredSel({
                    auto: {
                        pauseOnHover: 'resume',
                        progress: '#timer1'
                    }
                }, {
                    transition: true
                });

                //    Scrolled by user interaction
                $('#foo2').carouFredSel({
                    auto: false,
                    prev: '#prev2',
                    next: '#next2',
                    pagination: "#pager2",
                    mousewheel: true,
                    swipe: {
                        onMouse: true,
                        onTouch: true
                    }
                });

                //    Variable number of visible items with variable sizes
                $('#foo3').carouFredSel({
                    width: 360,
                    height: 'auto',
                    prev: '#prev3',
                    next: '#next3',
                    auto: false
                });

                //    Responsive layout, resizing the items
                $('#foo4').carouFredSel({
                    responsive: true,
                    width: '100%',
                    scroll: 2,
                    items: {
                        width: 170,
                    //    height: '100%',    //    optionally resize item-height
                        visible: {
                            min: 2,
                            max: 6
                        }
                    }
                });

                //    Fuild layout, centering the items
                $('#foo5').carouFredSel({
                    width: '100%',
                    scroll: 3
                });

            });
        </script>
        <div class="wrapper2">
        <div class="header_rc"><div class="title_rc">Bài viết ngẩu nhiên</div></div>
        <div class="list_carousel responsive" >
            <ul id="foo5">
            <xen:foreach loop="$HotNews" value="$news">  
                <li style="width: 220px; height: 170px;">
              
                <a href="{xen:link threads, $news}">
                            <xen:if is="{$news.attach}">
                                <img class="imgresize" src="attachments/{$news.attach.filename}.{$news.attach.attachment_id}" alt="{$news.attach.filename}" />
                            <xen:elseif is="{$news.medio}" />
                                <div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">
                                <img class="imgresize" src="styles/8wayrun/EWRmedio_play.png" />
                                </div>
                            <xen:elseif is="{$news.image}" />
                                <img class="imgresize" src="{$news.image}" alt="{$news.image}" />
                            <xen:else />
                                <img class="imgresize" src="styles/noimg.jpg" />
                            </xen:if>
                            <div class="titletext">{xen:helper snippet, $news.title, 45}</div>
                              </a>
                          </li>
                          </xen:foreach>
            </ul>
        </div>
        </div>

EWRblock_HotNews.css

Mã:

            #intro {
                width: 580px;
                margin: 0 auto;
            }
            .wrapper2 {
background: none repeat scroll 0% 0% #FAFAFA;
margin-top: 10px;
padding-top: 30px;
            }
            .list_carousel {
                -background-color: #ccc;
                margin: 0 0 30px 60px;
                -width: 360px;
            }
            .list_carousel ul {
                margin: 0;
                padding: 0;
                list-style: none;
                display: block;
            }
            .list_carousel li {
                font-size: 40px;
                color: #999;
                text-align: center;
                background-color: #eee;
                border: 1px solid #999;
                width: 50px;
                height: 50px;
                padding: 0;
                margin: 5px 3px;
                display: block;
                float: left;
            }
            .list_carousel.responsive {
                width: auto;
                margin-left: 0;
            }
            .clearfix {
                float: none;
                clear: both;
            }

            .imgresize {
            width: 220px;
            height: 170px;
            }
div.titletext {
    color: #FFF;
    -z-index: 999;
    background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.8);
    bottom: 6px;
    text-align: center;
    padding: 5px;
    position: absolute;
    font-size: 13px;
    width: 205px;
    border-left: 5px solid #F89038;
}

Chú ý: nhớ thay link ảnh trong đoạn này <img class="imgresize" src="styles/noimg.jpg" /> để có thể hiển thị ảnh mặc định nếu trong bài viết không có đăng ảnh.
Cuối cùng nhớ download files js phía dưới về upload lên thư mục js của Xenforo bạn nhé!.

 

Thánh RIP . Cám ơn bác nhiều nha

 

bác lập cty cho em xin chân bảo vệ

 

kkk chưa đâu bạn, khi nào có ý xin giấy phép rồi mới lập hihi.

 

Cái này là mình tự làm chứ ko phải RIP bạn, mình chỉ dùng ý tưởng của Span.vn rồi thiết kế giống theo thôi hihi.

 

ngon roài, chỉ có thể nói cảm ơn bạn rất nhiều