Hotline : 0908.103.092

Tạo nút mạng xã hội trượt dọc trong Website

Chắc chắn khi vào các trang web, nhất là các trang web tin tức sẽ có nhiều bạn thấy một số các nút mạng xã hội được hiển thị theo chiều dọc của website (ví dụ: nút Like Facebook), và khi ta trượt website nó cũng sẽ trượt theo. Và cũng sẽ có nhiều bạn muốn sử dụng nó, muốn làm được nó để khiến cho website được trở nên phong phú hơn, được nhiều lượng view hơn và độc giả sẽ like ngay khi thấy bài viết có ích với họ.

Vì vậy, dichvuthietkewebwordpress.com sẽ hướng dẫn cho những ai muốn làm các nút này để nó hiển thị ra trang chủ hay mọi trang để tự làm các nút mạng xã hội trượt theo trình duyệt hoàn toàn thủ công, sử dụng một plugin của jQuery.

Khung các nút mạng xã hội trượt dọc website

Khung các nút mạng xã hội trượt dọc website

>>> Xem thêm: Khắc phục lỗi điện thoại không nhận được mã xác nhận Facebook

1. Tải các file cần thiết

Trước tiên bạn cần tải các file cần thiết của plugin jQuery này tại đây và giải nén ra, sau đó upload toàn bộ các file trong đó vào thư mục theme mà bạn đang dùng.

2. Sửa file script

Để hoạt động tốt nhất theo ý bạn, hãy mở file fshare-script.js lên, có nội dung  như sau:

$(document).ready(function () {
    $('#floating-bar').fshare({
        theme: 'default',
        facebook: true,
        twitter:  false,
        stumbleupon: false,
        linkedin: false,
        googleplus: true,
        upperLimitElementId: 'content',
        lowerLimitElementId: 'colophon'
    });
});

Trong đó, bạn muốn hiển thị nút nào thì đổi false thành true và ngược lại để ẩn nó đi.

Tham số upperLimitElementId nghĩa là ID của vị trí mà bạn muốn cho nút này bắt đầu xuất hiện, hãy view source của website và tìm ID (<div id=”abcxyz”>).

Tham số lowerLimitElementId nghĩa là ID của vị trí mà bạn muốn không cho nó tiếp tục trượt nữa khi chạm đến, thường là phần Footer của website.

Cách tìm ID: Mở trình duyệt (Google Chrome/Firefox), ấn chuột phải vào vị trí mà bạn muốn xem ID, chọn Inspect Element rồi tìm đoạn nào chứa id=”abcxyz” chính là nó.

>>> Xem thêm: Hướng dẫn cài đặt Subiz trong WordPress

3. Chèn các file script và CSS vào theme

Bây giờ hãy mở file functions.php lên và chèn toàn bộ đoạn code dưới đây vào đó:

//Making jQuery Google API
function modify_jquery() {
        if (!is_admin()) {
                // comment out the next two lines to load the local copy of jQuery
                wp_deregister_script('jquery');
                wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', false, '1.8.1');
                wp_enqueue_script('jquery');
        }
}
add_action('init', 'modify_jquery');
 
// Float Social Share scripts
function float_social_share() {
    wp_enqueue_script('float-social', get_template_directory_uri(). '/fshare.js', array('jquery'), true);
    wp_enqueue_style('float-social-style', get_template_directory_uri(). '/fshare.css', array(), null);
    wp_enqueue_script('float-social-script', get_template_directory_uri(). '/fshare-script.js', array('jquery'), true);
}
add_action( 'wp_enqueue_scripts', 'float_social_share' );

 Lưu lại. Tiếp tục mở file header.php và chèn đoạn này vào cuối file, sau đó lưu lại và xem kết quả.

<div id="floating-bar"></div>

Nếu bạn muốn cái khung nút mạng xã hội có thẩm mỹ hơn thì chèn thêm đoạn sau vào file style.css.

.fshare-default {
     background: #F1F1F1;
     margin-top: 10px;
     border: 1px solid #e8e8e8;
}

Trường hợp bạn muốn cho cái khung trượt nó chạy nhanh hơn thì hãy mở file fshare-script.js ra và tìm:

theme: 'default',

Sau đó thêm đoạn này vào bên trên nó:

speed: 200,

Với 3 bước như trên, các bạn đã có thể tạo nút mạng xã hội trượt dọc trong Website một cách đơn giản nhất mà có thể chỉnh sửa tùy ý theo ý mình sao cho phù hợp nhất.

Trong quá trình làm việc với website của bạn, nếu có nhiều thứ bạn chưa biết, hãy ghé thăm chuyên mục Kiến thức của chúng tôi, ở đây có rất nhiều thủ thuật hay, kiến thức website bổ ích đối với các bạn.

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

WEBSITE WORDPRESS CHUYÊN NGHIỆP
VỚI ĐẦY ĐỦ TÍNH NĂNG ƯU VIỆT
lam web wordpress

Tính sẵn sàng & tùy biến cao

thiet ke web ban hang

Giỏ hàng, thanh toán tiện lợi

bao gia thiet ke website wordpress

Kho giao diện đa dạng

web wordpress chuan seo

Công cụ Marketing hiệu quả

ZoomWorld giới thiệu tới khách hàng dịch vụ thiết kế website bán hàng chuyên nghiệp với tính sẵn sàng luôn đáp ứng yêu cầu của khách hàng mọi lúc mọi nơi một cách nhanh chóng nhất kết hợp với tính tùy biến cao có khả năng thay đổi website phù hợp theo từng hoàn cảnh của Doanh nghiệp bạn.
thiet ke website wordpress
0908 103 092