Vào ngày 15, tôi đã viết một bài về việc thêm mã QR WeChat và nút chia sẻ Weibo vào cuối bài viết. Cuối cùng, do xung đột JavaScript, phải làm mới trang một lần mới có thể kích hoạt tạo mã QR. Lần này, tôi đã sửa đổi cách tạo và hiển thị mã QR, sử dụng phương pháp kết hợp JavaScript và CSS để hiển thị mã QR khi di chuột qua. Đồng thời, tôi cũng đã thêm nút chia sẻ QQ Zone.

Biểu tượng (Icon)

Do không tìm thấy biểu tượng chia sẻ QQ Zone phù hợp trên icomoon, tôi đã thay thế bằng biểu tượng từ thư viện Alibaba Vector Icon. Ban đầu, tôi không rõ cách định nghĩa class trong thẻ a để gọi biểu tượng, nhưng sau đó đã hiểu được cách sử dụng cụ thể và thành công thay đổi thư viện biểu tượng. Tôi sẽ không giải thích chi tiết cách sử dụng biểu tượng từ thư viện Alibaba Vector Icon ở đây. Nếu bạn cần, hãy tự tìm hiểu. Dưới đây là cách tái định nghĩa selector trong CSS:

1
2
3
4
5
6
7
8
9

/* Thay thế định nghĩa CSS gốc bằng đoạn mã sau */
[class*="icon-"], [class^="icon-"] {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

Mã chia sẻ QQ Zone

1

<!-- Vui lòng thay thế bằng mã thực tế -->

Mã chia sẻ Weibo

1

<!-- Vui lòng thay thế bằng mã thực tế -->

Mã tạo QR Code

1

<img src="<?php the_permalink(); ?>" alt="<?php the_title(); ?>"/>

Thực hiện hiển thị QR Code khi di chuột qua bằng JavaScript và CSS

1
2
3
4
5
6
7

function showImg() {
    document.getElementById("wxImg").style.display = 'block';
}

function hideImg() {
    document.getElementById("wxImg").style.display = 'none';
}

1
2
3
4

<div id="weixin" onmouseover="showImg()" onmouseout="hideImg()">Di chuột vào đây</div>
<div id="wxImg" style="display:none; right:0px; top:-110px; background:#f00; position:absolute; z-index:999;">
    <img src="<?php the_permalink(); ?>" alt="<?php the_title(); ?>"/>
</div>

Đã hoàn88win app thành! Giờ thì đi ngủ thôi. Viết code mà không rành thật sự rất mất thời gian, tôi đã bận rộn suốt nửa đêm nay rồi. Mệt quá… ngáp88win dài. Nguồn tham khảo: Blog của Karate Technology.