1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. Dịch vụ bảo mật website - tối ưu hóa website - sửa lỗi website
  3. - Chào Guest! Bạn vui lòng đọc qua NỘI QUY của HVN trước khi làm 1 việc gì đó để tránh bị hệ thống xóa tài khoản không thông báo.
    Bạn có thể thao khảo qua các cập nhật mới nhất của HVN tại đây
    - Nếu Bạn là Khách bạn không thể xem các chủ đề mới nhất bằng Thống kê, Và bạn chỉ được đọc 5 bài Viết Của HVN mà thôi. Để tiếp tục vui lòng đăng ký thành viên TẠI ĐÂY

    - Đăng nhập để ẩn quảng cáo.
Cookies Ads Thông Báo Dành Cho Khách

TUT Hiện mạng xã hội trên MemberCard

Discussion in 'Xenforo Pre-MOD' started by Hackerpro536, Mar 30, 2016.

Lượt xem: 245

Thread Status:
Not open for further replies.
  1. Hackerpro536

    Hackerpro536 Administrative Staff Member Administrator Moderator
      • 113/113

    Joined:
    Aug 30, 2012
    Messages:
    6,737
    Likes Received:
    6,070
    Gender:
    Male
    Socialize Your MemberCard - Hiện mạng xã hội trên MemberCard

    Hiển thị các biểu tượng mạng xã hội trên MemberCard sử dụng FontAwesome.

    [​IMG] ​
    Đầu tiên các bạn phải cài FontAwesome cho trang web của bạn, vào template PAGE_CONTAINER và thêm vào sau <head> đoạn code dưới:
    HTML:
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">
    Bạn phải tạo ra một Custom UserField cho mỗi Social Site bạn có kế hoạch sử dụng.

    [​IMG]

    [​IMG]

    [​IMG]
    Sau đó, đến template member_card và tìm:
    HTML:
    <a href="{xen:adminlink banning/users/add, $user}" target="_blank">{xen:phrase ban}</a></xen:if>
                        </xen:if>
                </xen:contentcheck>
            </div>
        </xen:if>
    </div>
    <div class="userInfo">
    Sau </xen:if> là nơi bạn sẽ thêm mã.

    Với mỗi Social Site bạn sẽ làm như thế này:

    HTML:
    <div align="center" class="socialmemcard">
            <xen:if is="{$user.customFields.memFacebook}">
    <a href="{$user.customFields.memFacebook}" target="_blank" ><xenforo class="icon-facebook icon-large icon-fixed-width"></xenforo></a>
    </xen:if>
</div>
    Luôn luôn thêm các lĩnh vực tiếp theo bạn muốn trước </div>

    Đối với ví dụ ở trên, đây là mã của tất cả:
    HTML:
    <div align="center" class="socialmemcard">
            <xen:if is="{$user.customFields.memFacebook}">
    <a href="{$user.customFields.memFacebook}" target="_blank" ><xenforo class="icon-facebook icon-large icon-fixed-width"></xenforo></a>
    </xen:if>
                        <xen:if is="{$user.customFields.memTwitter}">
    <a href="{$user.customFields.memTwitter}" target="_blank" ><xenforo class="icon-twitter icon-large icon-fixed-width"></xenforo></a>
    </xen:if>
                        <xen:if is="{$user.customFields.memInstagram}">
    <a href="{$user.customFields.memInstagram}" target="_blank" ><xenforo class="icon-instagram icon-large icon-fixed-width"></xenforo></a>
    </xen:if>
                        <xen:if is="{$user.customFields.memGoogle}">
    <a href="{$user.customFields.memGoogle}" target="_blank" ><xenforo class="icon-google-plus icon-large icon-fixed-width"></xenforo></a>
    </xen:if>
                        <xen:if is="{$user.customFields.memYouTube}">
    <a href="{$user.customFields.memYouTube}" target="_blank" ><xenforo class="icon-youtube icon-large icon-fixed-width"></xenforo></a>
    </xen:if>
                        <xen:if is="{$user.customFields.memSkype}">
    <a href="{$user.customFields.memSkype}" target="_blank" ><xenforo class="icon-skype icon-large icon-fixed-width"></xenforo></a>
    </xen:if>
                        <xen:if is="{$user.customFields.memTumblr}">
    <a href="{$user.customFields.memGoogle}" target="_blank" ><xenforo class="icon-tumblr icon-large icon-fixed-width"></xenforo></a>
    </xen:if>
                        <xen:if is="{$user.customFields.memPinterest}">
    <a href="{$user.customFields.memPinterest}" target="_blank" ><xenforo class="icon-pinterest icon-large icon-fixed-width"></xenforo></a>
    </xen:if>
                        <xen:if is="{$user.customFields.memLinkedIn}">
    <a href="{$user.customFields.memLinkedIn}" target="_blank" ><xenforo class="icon-linkedin icon-large icon-fixed-width"></xenforo></a>
    </xen:if>
    </div>
    Để chúng hiển thị một cách chính xác trên MemberCard của bạn, thêm đoạn sau vào EXTRA.css:
    HTML:
    .memberCard .avatarCropper { margin-bottom: 16px;}
.socialmemcard > a { display: inline; }
.socialmemcard { padding-top: 2.5px; margin-left: -10px;}
.socialmemcard xenforo { margin-right: -4px; }
    Để thay đổi các liên kết của bạn, chỉ cần nhấp vào preferences:

    [​IMG] ​
    Kết quả:

    [​IMG] ​
    Những người không liệt kê bất kỳ sự lựa chọn, tại khu vực đại diện của họ sẽ như thế này:

    [​IMG] ​
    Bạn có thể sẽ phải thay đổi CSS của bạn cho phù hợp với nhu cầu của bạn.
    Bạn có thể thay đổi kích thước của các biểu tượng bằng cách loại bỏ biểu tượng lớn, lần lượt cho phép thêm các hình ảnh.
    Bạn cũng có thể sử dụng bất cứ biểu tượng (hình ảnh) mà bạn thích.

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


    Nguồn: xenforo.com​
     

    [HVN] More Threads in same category

    Hackerpro536, Mar 30, 2016
    #1
    Lx269 likes this.
Tin đăng được kiểm duyệt. Tất cả Bài viết và Tài khoản của Bạn sẽ bị xóa nếu:

✓ Không được bình luận vào các bài viết quá lâu quá 3 tháng so với hiện tại (đào top)
✓ Tiêu đề tin đăng Viết hoa (Không được viết hoa tiêu đề)
✓ Đăng tin bài không đúng chuyên mục nhiều lần.
✓ Đăng bài nội dung nhằm SEO, chèn từ khóa không liên quan đến bài viết vào diễn đàn.
✓ Nội dung bài viết không Logic, Tin đăng có nhiều khoảng trống
✓ Cố tình Spam, đăng nội dung không theo quy định tại diễn đàn.

: Socialize Your MemberCard, Hiện mạng xã hội trên MemberCard
Thread Status:
Not open for further replies.

Share This Page

Users Viewing Thread (Users: 0, Guests: 0)