Hướng dẫn [XF2] Làm đẹp nút chia sẻ xenforo 2

2L.Ohayo

2L.Ohayo

Moderator
Thành viên BQT
Xenforo 2 đã tích hợp hệ thống các nút chia sẻ mạng xã hội rất tiện lợi. Nếu bạn muốn làm nổi bật các nút chia sẻ này thì xin mời làm theo hướng dẫn dưới đây.

Tìm template share_controls.less và thay toàn bộ code trong đó bằng code phía dưới.
Mã: 
.m-shareButtons-button(@background)
{
    background-color: @background;
    &:hover { background-color: xf-diminish(@background, 10%); }
}

.shareButtons
{
    .m-clearFix();
}

.shareButtons-label
{
    float: left;
    margin-right: 3px;
    color: @xf-textColorMuted;
    min-height: 35px;
    line-height: 35px;
}

.shareButtons-button
{
    float: left;
    margin-right: 6px;
    padding: 6px;
    color: #fff;
    font-size: 20px;
    line-height: 20px;
    white-space: nowrap;
    min-width: 35px;
    border-radius: @xf-borderRadiusSmall;
    background-color: transparent;
    .m-transition();
    
    &:last-of-type
    {
        margin-right: 0;
    }

    &:hover
    {
        text-decoration: none;
        color: white;
    }

    > i
    {
        display: inline-block;
        vertical-align: middle;
        .m-faBase();
    }

    > span
    {
        font-weight: @xf-fontWeightNormal;
        font-size: @xf-fontSizeNormal;
    }

    .shareButtons--iconic &
    {
        text-align: center;

        > i
        {
            min-width: 20px;
        }

        > span
        {
            .m-visuallyHidden();
        }
    }

    &&--facebook
    {
        .m-shareButtons-button(#3B5998);
        > i:before { .m-faContent(@fa-var-facebook, .58em); }
    }

    &&--twitter
    {
        .m-shareButtons-button(#1DA1F3);
        > i:before { .m-faContent(@fa-var-twitter, .93em); }
    }

    &&--gplus
    {
        .m-shareButtons-button(#dd4b39);
        > i:before { .m-faContent(@fa-var-google-plus, 1.29em); }
    }

    &&--pinterest
    {
        .m-shareButtons-button(#bd081c);
        > i:before { .m-faContent(@fa-var-pinterest-p, .72em); }
    }

    &&--tumblr
    {
        .m-shareButtons-button(#35465c);
        > i:before { .m-faContent(@fa-var-tumblr, .58em); }
    }

    &&--reddit
    {
        .m-shareButtons-button(#FF4500);
        > i:before { .m-faContent(@fa-var-reddit-alien, 1em); }
    }

    &&--whatsApp
    {
        .m-shareButtons-button(#25D366);
        > i:before { .m-faContent(@fa-var-whatsapp, .86em); }
    }

    &&--email
    {
        .m-shareButtons-button(#1289ff);
        > i:before { .m-faContent(@fa-var-envelope-o, 1em); }
    }

    &&--link
    {
        cursor: pointer;
        .m-shareButtons-button(#787878);
        > i:before { .m-faContent(@fa-var-link, 1em); }
    }

    &.is-hidden
    {
        display: none;
    }
}

.shareInput
{
    margin-bottom: 5px;

    &:last-child
    {
        margin-bottom: 0;
    }
}

.shareInput-label
{
    font-size: @xf-fontSizeSmall;
    .m-appendColon();
}

.shareInput-button
{
    color: @xf-linkColor;
    cursor: pointer;

    > i
    {
        display: inline-block;
        vertical-align: middle;
        .m-faBase();

        &:before { .m-faContent(@fa-var-copy); }
    }

    &.is-hidden
    {
        display: none;
    }
}

.shareInput-input
{
    font-size: @xf-fontSizeSmall;

    .shareInput-button.is-hidden + &
    {
        border-radius: @xf-borderRadiusMedium;
    }
}

Kết quả thu được sẽ như hình bên dưới.

Screen Shot 2018-05-26 at 19.10.04.png



Screen Shot 2018-05-26 at 19.09.13.png
 
Bài viết liên quan
Xin hướng dẫn cách làm mục này bởi ngoctuanvnnn,
Bị Lỗi share facebook không hiển thị ảnh đại diện xenforo bởi bloghocpiano,
Socials & Languages PREFIXES - Tiền tố mạng xã hội & ngôn ngữ cho XenForo 2.3 bởi PVS,
Bị lỗi ErrorException: Template error: [E_USER_WARNING] Cannot call method first on a non-object (NULL) src/XF/Template/Templater.php:1177 bởi bloghocpiano,
FA Icon for Public Navigation - Biểu tượng FA cho Public Navigation XenForo 2.3 bởi PVS,
Postbit Bar in XFRM overview - Postbit Bar trong trang tổng quan XFRM cho XenForo 2.3 bởi PVS,
Bài viết mới
Xin hướng dẫn cách làm mục này bởi ngoctuanvnnn,
Bị Lỗi share facebook không hiển thị ảnh đại diện xenforo bởi bloghocpiano,
Lỗi Nội dung không mong muốn bởi muabandalat,
Cho em xin code chèn comment facebook bởi quang9292,
Socials & Languages PREFIXES - Tiền tố mạng xã hội & ngôn ngữ cho XenForo 2.3 bởi PVS,
Bị lỗi ErrorException: Template error: [E_USER_WARNING] Cannot call method first on a non-object (NULL) src/XF/Template/Templater.php:1177 bởi bloghocpiano,
2L.Ohayo nói:
Xenforo 2 đã tích hợp hệ thống các nút chia sẻ mạng xã hội rất tiện lợi. Nếu bạn muốn làm nổi bật các nút chia sẻ này thì xin mời làm theo hướng dẫn dưới đây.

Tìm template share_controls.less và thay toàn bộ code trong đó bằng code phía dưới.
Mã: 
.m-shareButtons-button(@background)
{
    background-color: @background;
    &:hover { background-color: xf-diminish(@background, 10%); }
}

.shareButtons
{
    .m-clearFix();
}

.shareButtons-label
{
    float: left;
    margin-right: 3px;
    color: @xf-textColorMuted;
    min-height: 35px;
    line-height: 35px;
}

.shareButtons-button
{
    float: left;
    margin-right: 6px;
    padding: 6px;
    color: #fff;
    font-size: 20px;
    line-height: 20px;
    white-space: nowrap;
    min-width: 35px;
    border-radius: @xf-borderRadiusSmall;
    background-color: transparent;
    .m-transition();
   
    &:last-of-type
    {
        margin-right: 0;
    }

    &:hover
    {
        text-decoration: none;
        color: white;
    }

    > i
    {
        display: inline-block;
        vertical-align: middle;
        .m-faBase();
    }

    > span
    {
        font-weight: @xf-fontWeightNormal;
        font-size: @xf-fontSizeNormal;
    }

    .shareButtons--iconic &
    {
        text-align: center;

        > i
        {
            min-width: 20px;
        }

        > span
        {
            .m-visuallyHidden();
        }
    }

    &&--facebook
    {
        .m-shareButtons-button(#3B5998);
        > i:before { .m-faContent(@fa-var-facebook, .58em); }
    }

    &&--twitter
    {
        .m-shareButtons-button(#1DA1F3);
        > i:before { .m-faContent(@fa-var-twitter, .93em); }
    }

    &&--gplus
    {
        .m-shareButtons-button(#dd4b39);
        > i:before { .m-faContent(@fa-var-google-plus, 1.29em); }
    }

    &&--pinterest
    {
        .m-shareButtons-button(#bd081c);
        > i:before { .m-faContent(@fa-var-pinterest-p, .72em); }
    }

    &&--tumblr
    {
        .m-shareButtons-button(#35465c);
        > i:before { .m-faContent(@fa-var-tumblr, .58em); }
    }

    &&--reddit
    {
        .m-shareButtons-button(#FF4500);
        > i:before { .m-faContent(@fa-var-reddit-alien, 1em); }
    }

    &&--whatsApp
    {
        .m-shareButtons-button(#25D366);
        > i:before { .m-faContent(@fa-var-whatsapp, .86em); }
    }

    &&--email
    {
        .m-shareButtons-button(#1289ff);
        > i:before { .m-faContent(@fa-var-envelope-o, 1em); }
    }

    &&--link
    {
        cursor: pointer;
        .m-shareButtons-button(#787878);
        > i:before { .m-faContent(@fa-var-link, 1em); }
    }

    &.is-hidden
    {
        display: none;
    }
}

.shareInput
{
    margin-bottom: 5px;

    &:last-child
    {
        margin-bottom: 0;
    }
}

.shareInput-label
{
    font-size: @xf-fontSizeSmall;
    .m-appendColon();
}

.shareInput-button
{
    color: @xf-linkColor;
    cursor: pointer;

    > i
    {
        display: inline-block;
        vertical-align: middle;
        .m-faBase();

        &:before { .m-faContent(@fa-var-copy); }
    }

    &.is-hidden
    {
        display: none;
    }
}

.shareInput-input
{
    font-size: @xf-fontSizeSmall;

    .shareInput-button.is-hidden + &
    {
        border-radius: @xf-borderRadiusMedium;
    }
}

Kết quả thu được sẽ như hình bên dưới.

View attachment 26176


View attachment 26177
Nhấn để mở rộng...
Vậy giờ mình muốn chèn nó vào cuối bài viết thì chèn ntn vậy bạn?
 
caolaogia7 nói:
mình muốn thêm hoặc bớt nút share/like mạng xã hội thì chỉnh sửa ở đâu huynh ?
Nhấn để mở rộng...
Muốn thêm thì thêm vào template share_page_macros, còn muốn xóa bớt thì chỉ cần vào Setup > Options > Sharing > Uncheck cái nào muốn bỏ
 
2L.Ohayo nói:
Xenforo 2 đã tích hợp hệ thống các nút chia sẻ mạng xã hội rất tiện lợi. Nếu bạn muốn làm nổi bật các nút chia sẻ này thì xin mời làm theo hướng dẫn dưới đây.

Tìm template share_controls.less và thay toàn bộ code trong đó bằng code phía dưới.
Mã: 
.m-shareButtons-button(@background)
{
    background-color: @background;
    &:hover { background-color: xf-diminish(@background, 10%); }
}

.shareButtons
{
    .m-clearFix();
}

.shareButtons-label
{
    float: left;
    margin-right: 3px;
    color: @xf-textColorMuted;
    min-height: 35px;
    line-height: 35px;
}

.shareButtons-button
{
    float: left;
    margin-right: 6px;
    padding: 6px;
    color: #fff;
    font-size: 20px;
    line-height: 20px;
    white-space: nowrap;
    min-width: 35px;
    border-radius: @xf-borderRadiusSmall;
    background-color: transparent;
    .m-transition();
   
    &:last-of-type
    {
        margin-right: 0;
    }

    &:hover
    {
        text-decoration: none;
        color: white;
    }

    > i
    {
        display: inline-block;
        vertical-align: middle;
        .m-faBase();
    }

    > span
    {
        font-weight: @xf-fontWeightNormal;
        font-size: @xf-fontSizeNormal;
    }

    .shareButtons--iconic &
    {
        text-align: center;

        > i
        {
            min-width: 20px;
        }

        > span
        {
            .m-visuallyHidden();
        }
    }

    &&--facebook
    {
        .m-shareButtons-button(#3B5998);
        > i:before { .m-faContent(@fa-var-facebook, .58em); }
    }

    &&--twitter
    {
        .m-shareButtons-button(#1DA1F3);
        > i:before { .m-faContent(@fa-var-twitter, .93em); }
    }

    &&--gplus
    {
        .m-shareButtons-button(#dd4b39);
        > i:before { .m-faContent(@fa-var-google-plus, 1.29em); }
    }

    &&--pinterest
    {
        .m-shareButtons-button(#bd081c);
        > i:before { .m-faContent(@fa-var-pinterest-p, .72em); }
    }

    &&--tumblr
    {
        .m-shareButtons-button(#35465c);
        > i:before { .m-faContent(@fa-var-tumblr, .58em); }
    }

    &&--reddit
    {
        .m-shareButtons-button(#FF4500);
        > i:before { .m-faContent(@fa-var-reddit-alien, 1em); }
    }

    &&--whatsApp
    {
        .m-shareButtons-button(#25D366);
        > i:before { .m-faContent(@fa-var-whatsapp, .86em); }
    }

    &&--email
    {
        .m-shareButtons-button(#1289ff);
        > i:before { .m-faContent(@fa-var-envelope-o, 1em); }
    }

    &&--link
    {
        cursor: pointer;
        .m-shareButtons-button(#787878);
        > i:before { .m-faContent(@fa-var-link, 1em); }
    }

    &.is-hidden
    {
        display: none;
    }
}

.shareInput
{
    margin-bottom: 5px;

    &:last-child
    {
        margin-bottom: 0;
    }
}

.shareInput-label
{
    font-size: @xf-fontSizeSmall;
    .m-appendColon();
}

.shareInput-button
{
    color: @xf-linkColor;
    cursor: pointer;

    > i
    {
        display: inline-block;
        vertical-align: middle;
        .m-faBase();

        &:before { .m-faContent(@fa-var-copy); }
    }

    &.is-hidden
    {
        display: none;
    }
}

.shareInput-input
{
    font-size: @xf-fontSizeSmall;

    .shareInput-button.is-hidden + &
    {
        border-radius: @xf-borderRadiusMedium;
    }
}

Kết quả thu được sẽ như hình bên dưới.

View attachment 26176


View attachment 26177
Nhấn để mở rộng...
có cho wordpress không chủ thớ ơi @@
 
2,022 7 5
Bạn phải đăng nhập hoặc đăng ký để bình luận.

Dịch vụ XenForo của VNXF

Zalo 0906081284
avatar Silzedt InboxPVS
[VNXF 2x] Best Statistics Pro – Thống kê nâng cao, tối ưu hiệu năng cho XenForo 1.1 Bảng giá dịch vụ thiết kế, làm diễn đàn XenForo năm 2024

Xử lý sự cố

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

Texlink

Khám phá AI cùng người Việt
Diễn đàn chia sẻ kinh nghiệm massage
Review dịch vụ massage toàn quốc
Cộng Đồng Massage Việt Nam
Cộng đồng AI Việt Nam
Liên hệ đặt Textlink

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Back
Top