NLD Blog | Trang chia sẻ thủ thuật - HTML CSS và JavaScript

Cách thêm dữ liệu có cấu trúc Product trong mỗi bài viết

2024-02-02T12:55:00.000+07:00

Bạn đang có một Blog nhỏ bán các sản phẩm hoặc dự tính sẽ tạo một Blog tương tư như vậy trong thời gian sắp tới có thể tham khảo bài đăng dưới đây của mình về cách thêm dữ liệu có cấu trúc Product trong mỗi bài viết

Trước hết bạn nên tìm hiểu sơ qua về dữ liệu có cấu trúc Product qua bài giới thiệu va hướng dẫn từ

Google theo địa chỉ https://developers.google.com/search/docs/data-types/product, ở đây mình chỉ giới thiệu qua khi bạn thêm dữ liệu có cấu trúc Product vào bài viết thì lọi dữ liệu này sẽ xuất hiện bên dưới bài viết trong kết quả tìm kiếm của Google, bạn sẽ trông nó như hình bên dưới

Lưu ý: Để dữ liệu có cấu trúc loại này xuất hiện trong kết quả tìm kiếm, cần xác thực tính chính xác của nó đại khái không phải ảo mỗi bài phải có dữ liệu với kết quả khác nhau chứ không giống nhau do đó cần sử dụng đến thẻ dữ liệu data bài viết của blogspot, cụ thể là những thẻ sau:

data:post.id: id bài viết
data:post.title: Tiều đề bài viết
data:post.featuredImage: Url ảnh bài viết (1 ảnh)
data:view.description: Mô tả tìm kiếm
data:post.url.canonical: Url bài viết
data:label.name: Nhãn bài viết (một nhãn và bằng số)
data:post.numberOfComments: Số nhận xét
data:post.author.name: Tên tác giả

Một điều quan trọng phải sử dụng nhận xét mặc định của Blog, các bạn chèn code xml trong widget Blog, bạn chèn vào thẻ nào mà kiểm tra nó có xuất hiện trong bài viết là được, ví dụ bên trong thẻ sau:

<b:includable id='post' var='post'>

....

<!-- Schema product code -->

<b:if cond='data:view.isPost'>

<div style='display:none'>

  <div itemscope='' itemtype='http://schema.org/Product'>

    <meta expr:content='data:post.id' itemprop='mpn'/>

    <meta expr:content='data:post.title' itemprop='name'/>

    <link expr:href='data:post.featuredImage' itemprop='image'/>

    <meta expr:content='data:view.description' itemprop='description'/>

    <div itemprop='offers' itemscope='' itemtype='http://schema.org/Offer'>

      <link expr:href='data:post.url.canonical' itemprop='url'/>

      <meta content='https://schema.org/InStock' itemprop='availability'/>

      <meta content='VND' itemprop='priceCurrency'/>

      <meta content='https://schema.org/UsedCondition' itemprop='itemCondition'/>

      <b:loop index='item' values='data:post.labels' var='label'>

        <b:if cond='data:item lte 0'>

          <meta expr:content='data:post.labels[0].name' itemprop='price'/>

        </b:if>

      </b:loop>

      <meta content='2020-12-31' itemprop='priceValidUntil'/>

      <div itemprop='seller' itemscope='' itemtype='http://schema.org/Organization'>

        <meta content='Tên tổ chức, công ty, trang web bán sản phẩm' itemprop='name'/>

      </div>

    </div>

    <div itemprop='aggregateRating' itemscope='' itemtype='http://schema.org/AggregateRating'>

      <b:if cond='data:post.numberOfComments lte 3'>

        <meta expr:content='data:post.numberOfComments + 3' itemprop='reviewCount'/>

        <meta content='3' itemprop='ratingValue'/>

        <b:elseif cond='data:post.numberOfComments in [3,4,5]'/>

        <meta expr:content='data:post.numberOfComments + 5' itemprop='reviewCount'/>

        <meta content='3.5' itemprop='ratingValue'/>

        <b:elseif cond='data:post.numberOfComments in [6,7,8]'/>

        <meta expr:content='data:post.numberOfComments + 8' itemprop='reviewCount'/>

        <meta content='4' itemprop='ratingValue'/>

        <b:elseif cond='data:post.numberOfComments in [9,10,11]'/>

        <meta expr:content='data:post.numberOfComments + 11' itemprop='reviewCount'/>

        <meta content='4.5' itemprop='ratingValue'/>

        <b:elseif cond='data:post.numberOfComments gt 11'/>

        <meta expr:content='data:post.numberOfComments + 14' itemprop='reviewCount'/>

        <meta content='5' itemprop='ratingValue'/>

      </b:if>

    </div>

    <div itemprop='review' itemscope='' itemtype='http://schema.org/Review'>

      <div itemprop='author' itemscope='' itemtype='http://schema.org/Person'>

        <meta expr:content='data:post.author.name' itemprop='name'/>

      </div>

      <div itemprop='reviewRating' itemscope='' itemtype='http://schema.org/Rating'>

        <meta content='4' itemprop='ratingValue'/>

        <meta content='5' itemprop='bestRating'/>

      </div>

    </div>

    <meta expr:content='data:post.id' itemprop='sku'/>

    <div itemprop='brand' itemscope='' itemtype='http://schema.org/Thing'>

      <meta content='Nhãn hiệu sản phẩm' itemprop='name'/>

    </div>

  </div>

</div>

</b:if>

</b:includable>

Bạn hãy sửa lại trong những mục mình đánh dấu màu đỏ, lưu ý về ngày báo tình trạng còn hàng do đó bạn phải thường xuyện cập nhật lại nếu quá hạn, và tùy biến số nhận xét trong mục mình đánh dấu màu xanh, mình hướng dẫn về điều kiện hiển thị số nhận xét để bạn dễ tùy biến, như đoạn mã ở trên:

Nếu số nhận xét dưới 3 => reviewCount = số nhận xét + 3, ratingCount = 3
Nếu số nhận xét trong khoảng 3,4,5 => reviewCount = số nhận xét + 5, ratingCount = 3.5
Nếu số nhận xét trong khoảng 6,7,8 => reviewCount = số nhận xét + 8, ratingCount = 4
Nếu số nhận xét trong khoảng 9,10,11 => reviewCount = số nhận xét + 11, ratingCount = 4.5
Nếu số nhận xét trên 11 => reviewCount = số nhận xét + 14, ratingCount = 5

Khi đã thêm và chỉnh sửa lại, bạn hãy kiểm tra kết quả bằng url bài viết tại một trong hai địa chỉ sau của Google:

Sau khi bạn kiểm tra thấy chính xác, không báo lỗi, có thể đợi vài ngày để Google cập nhật lại kết quả tìm kiếm bài viết thêm dữ liệu Product mà bạn đã thêm vào bài viết.

Blogger mới Update thêm tính năng lazy load và phân phát định dạng WebP cho hình ảnh

2023-09-26T13:13:00.012+07:00

Có thể các bạn chưa biết thì gần đây Blogger hay Blogspot mới update thêm tính năng lazy load images và WebP image serving, theo như mô tả thì lazy load sẽ tự động tải từng hình ảnh khi người đọc cuộn trang xuống và sẽ tự động phân phát hình ảnh cho bài đăng bằng WebP.

Lazy load hình ảnh Blogger

Cụ thể hơn là giờ đây các bạn không cần thêm thủ công thược tính loading="lazy" vào từng thẻ img để lazy load hình ảnh nữa mà giờ đây Blogger đã tự động thêm thuộc tính đó vào từng thẻ img chứa hình ảnh của bạn. Về cơ bản các bạn có thể hiểu tính năng này sẽ cho trình duyệt của bạn biết rằng “Tao có các tấm ảnh này, nhưng mày đừng tải nó nhé. Khi nào người dùng cuộn đến đến vị trí tấm ảnh nào, thì mày hãy tải tấm ảnh ấy ngay”.

Thuộc tính loading có 3 giá trị là lazy, eager và auto

lazy: browser cần lazy-load tấm ảnh này
eager: browser cần tải tấm ảnh này ngay lập tức (hoặc càng sớm càng tốt). Nếu tấm ảnh đang được load với cơ chế lazy mà bạn đổi nó sang eager thì nó sẽ lập tức tải ngay.
auto: browser sẽ quyết định việc có nên lazy-load ảnh hay không.

Cách này không áp dụng cho việc lazy load ảnh background.

Lưu ý rằng trình duyệt không đợi đến lúc ảnh xuất hiện ở viewport mới tải, mà khi ảnh gần xuất hiện ở viewport là nó đã tải rồi. Điều này giúp trình duyệt tải ảnh sớm nhất có thể để nó sẵn sàng xuất hiện trên màn hình kịp lúc, vì tải cũng mất thời gian mà.

Phân phát hình ảnh cho bài đăng bằng định dạng WebP

Đầu tiên WebP là một định dạng hình ảnh hiện đại cung cấp các tính năng nén vượt trội lossless và lossy cho hình ảnh trên web. Đối với việc sử dụng WebP, chúng ta có thể tạo ra các hình ảnh tinh gọn hơn, phong phú hơn, giúp website, blog tải nhanh hơn.

Hình ảnh khi nén lossless của WebP có kích thước nhỏ hơn 26% so với PNG. Hình ảnh WebP lossy thì nhỏ hơn 25-34% so với hình ảnh JPEG tương đương với chỉ số chất lượng tương đương.

Trước đây các bạn phải tự thêm -rw vào sau thuộc tính kích thước hình ảnh như sau:

https://blogger.googleusercontent.com/img/b/.../.../s1600/blogger-update-phan-phat-dinh-dang-webp.jpg

Để phân phát hình ảnh ở định dạng webp thì chúng ta thêm -rw ngay sau thuộc tính kích thước, sẽ là s1600-rw. Nó sẽ như dưới đây:

https://blogger.googleusercontent.com/img/b/.../.../s1600-rw/blogger-update-phan-phat-dinh-dang-webp.jpg

Và đó là cách thủ công mà mình đã làm với tất cả các hình ảnh trên Blog mình để tối ưu kích thước hình ảnh và cho Blogger biết rằng hình ảnh đó ở định dạng WebP. Nếu như không có thuộc tính -rw thì cho dùng các bạn có lưu hình ảnh ở định dạng .WebP nhưng Blogger vẫn phân phối nó ở định dạng .PNG hoặc .JPG, và khi bạn check PageSpeed thì nó vẫn hiện cảnh báo khuyên bạn nên phân phối hình ảnh ở dưới định dạng WebP hoặc AVIF.

Nhưng giờ đây các bạn không cần làm thủ công với từng hình ảnh nữa mà Blogger đã cho phép tự động phân phối hình ảnh ở định dạng WebP rồi, có nghĩa là giờ đây trong bài viết của các bạn khi đăng tải ảnh nên nó sẽ tự động thêm -rw và sau thuộc tính kích thước hình ảnh của bạn.

Cách bật lazy load và phân phát định dạng WebP cho hình ảnh trên Blogger

Để bật được 2 tính năng này thì các bạn chỉ cần truy cập vào trang quản trị blogger sau đó vào Cài đặt > Bài đăng > Tải từng phần hình ảnh. và Cài đặt > Bài đăng > Phân phát hình ảnh bằng WebP., các bạn bật 2 tính năng đó lên là được.

Trong trường hợp bạn không thấy 2 mục Tải từng phần hình ảnh và Phân phát hình ảnh bằng WebP, thì các bạn có thể truy cập draft.blogger.com và theo các bước ở trên để kích hoạt 2 tính năng hay ho này.

Bài viết mình có sử dụng thông tin thêm trên mạng, nếu bài viết chưa đúng hay thông tin sai mong các bạn góp ý vào phần bình luận!

Cách thêm GPT Chatbot sử dụng HTML, CSS và JavaScript cho Blog

2023-09-25T17:16:00.012+07:00

Thời điểm hiện tại chắc hầu hết các bạn đều biết đến ChatGPT cũng như các AI Chatbot trên mạng rất nhiều rồi, nếu như các bạn chưa biết thì Chatbot là một kiểu phần mềm có vai trò như là một trợ lý ảo và có khả năng hiểu được các thông tin mà người dùng cung cấp và đưa ra phản hồi phù hợp nhất cho người dùng.

Thêm Chatbot vào website hay trang blog của mình có thể giúp người dùng thêm phần hứng thú hơn với website của chúng ta, vậy nên trong bài viết này mình sẽ hướng dẫn các bạn cách thêm một Chatbot sử dụng API từ OpenAI cũng với HTML, CSS và JavaScipt và website, blog của mình.

Với Chatbot này, người dùng có thể hỏi và nhận được phản hồi ngay lập tức. Chatbot này có thể sử dụng trên nhiều thiết bị khác nhau. Hãy nhớ rằng để tạo phản hồi cho truy vấn của người dùng.

Các bước thêm GPT Chatbot sử dụng HTML, CSS và JavaScript

Để thêm GPT Chatbot sử dụng HTML, CSS và JavaScript, các bạn có thể theo dõi và làm theo các bước sau đây:

Trong bài viết này mình có sử dụng thêm bộ icon của Font-Awesome, nếu webiste hay blog của bạn chứ có thì có thể tham khảo bài viết sau: Font Awesome 6, thêm nhiều icons mới và bộ icons chủ đề COVID-19!

Bước 1: Các bạn tìm đến thẻ </body> và thêm đoạn HTML sau đây ngay phía trên thẻ </body>:

<button class="chatbot-toggler">
    <span class="material-symbols-rounded"><i class="fas fa-comment-alt"></i></span>
    <span class="material-symbols-outlined"><i class="fas fa-times"></i></span>
</button>
<div class="chatbot">
    <header>
        <h2>Chatbot</h2>
        <span class="close-btn material-symbols-outlined"><i class="fas fa-times"></i></span>
    </header>
    <ul class="chatbox">
        <li class="chat incoming">
            <span class="material-symbols-outlined"><i class="fas fa-robot"></i></span>
            <p>Hi there 👋<br />How can I help you today?</p>
        </li>
    </ul>
    <div class="chat-input">
        <textarea placeholder="Enter a message..." required="required" spellcheck="false"></textarea>
        <span class="material-symbols-rounded" id="send-btn"><i class="fas fa-share"></i></span>
    </div>
</div>

Bước 2: Tiếp tục thêm đoạn JavaScript sau đây ngay phía dưới đoạn HTML vừa thêm và phía trên thẻ </body>:

<script>/*<![CDATA[*/
const chatbotToggler = document.querySelector(".chatbot-toggler");
const closeBtn = document.querySelector(".close-btn");
const chatbox = document.querySelector(".chatbox");
const chatInput = document.querySelector(".chat-input textarea");
const sendChatBtn = document.querySelector(".chat-input span");

let userMessage = null; // Variable to store user's message
const API_KEY = ""; // Paste your API key here
const inputInitHeight = chatInput.scrollHeight;

const createChatLi = (message, className) => {
    // Create a chat <li> element with passed message and className
    const chatLi = document.createElement("li");
    chatLi.classList.add("chat", `${className}`);
    let chatContent = className === "outgoing" ? `<p></p>` : `<span class="material-symbols-outlined"><i class="fas fa-robot"></i></span><p></p>`;
    chatLi.innerHTML = chatContent;
    chatLi.querySelector("p").textContent = message;
    return chatLi; // return chat <li> element
}

const generateResponse = (chatElement) => {
    const API_URL = "https://api.openai.com/v1/chat/completions";
    const messageElement = chatElement.querySelector("p");

    // Define the properties and message for the API request
    const requestOptions = {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Authorization": `Bearer ${API_KEY}`
        },
        body: JSON.stringify({
            model: "gpt-3.5-turbo",
            messages: [{role: "user", content: userMessage}],
        })
    }

    // Send POST request to API, get response and set the reponse as paragraph text
    fetch(API_URL, requestOptions).then(res => res.json()).then(data => {
        messageElement.textContent = data.choices[0].message.content.trim();
    }).catch(() => {
        messageElement.classList.add("error");
        messageElement.textContent = "Oops! Something went wrong. Please try again.";
    }).finally(() => chatbox.scrollTo(0, chatbox.scrollHeight));
}

const handleChat = () => {
    userMessage = chatInput.value.trim(); // Get user entered message and remove extra whitespace
    if(!userMessage) return;

    // Clear the input textarea and set its height to default
    chatInput.value = "";
    chatInput.style.height = `${inputInitHeight}px`;

    // Append the user's message to the chatbox
    chatbox.appendChild(createChatLi(userMessage, "outgoing"));
    chatbox.scrollTo(0, chatbox.scrollHeight);
    
    setTimeout(() => {
        // Display "Thinking..." message while waiting for the response
        const incomingChatLi = createChatLi("Thinking...", "incoming");
        chatbox.appendChild(incomingChatLi);
        chatbox.scrollTo(0, chatbox.scrollHeight);
        generateResponse(incomingChatLi);
    }, 600);
}

chatInput.addEventListener("input", () => {
    // Adjust the height of the input textarea based on its content
    chatInput.style.height = `${inputInitHeight}px`;
    chatInput.style.height = `${chatInput.scrollHeight}px`;
});

chatInput.addEventListener("keydown", (e) => {
    // If Enter key is pressed without Shift key and the window 
    // width is greater than 800px, handle the chat
    if(e.key === "Enter" && !e.shiftKey && window.innerWidth > 800) {
        e.preventDefault();
        handleChat();
    }
});

sendChatBtn.addEventListener("click", handleChat);
closeBtn.addEventListener("click", () => document.body.classList.remove("show-chatbot"));
chatbotToggler.addEventListener("click", () => document.body.classList.toggle("show-chatbot"));
/*]]>*/</script>

Bước 3: Tìm đến thẻ head và thêm đoạn CSS sau phía trên thẻ </head>:

<style>/*<![CDATA[*/
.chatbot-toggler{position:fixed;font-size:25px;bottom:30px;left:35px;outline:none;border:none;height:50px;width:50px;display:flex;cursor:pointer;align-items:center;justify-content:center;z-index:2;border-radius:50%;background:#e0ac33;transition:all .2s ease}
body.show-chatbot .chatbot-toggler{transform:rotate(90deg)}
.chatbot-toggler span{color:#fff;position:absolute}
.chatbot-toggler span:last-child,body.show-chatbot .chatbot-toggler span:first-child{opacity:0;display:flex}
body.show-chatbot .chatbot-toggler span:last-child{opacity:1}
.chatbot{position:fixed;left:35px;bottom:90px;width:350px;background:#fff;z-index:999;border-radius:15px;overflow:hidden;opacity:0;pointer-events:none;transform:scale(0.5);transform-origin:bottom right;box-shadow:0 0 128px 0 rgba(0,0,0,0.1),0 32px 64px -48px rgba(0,0,0,0.5);transition:all .1s ease}
body.show-chatbot .chatbot{opacity:1;pointer-events:auto;transform:scale(1)}
.chatbot header{padding:10px 0;position:relative;text-align:center;color:#fff;background:#e0ac33;box-shadow:0 2px 10px rgba(0,0,0,0.1)}
.chatbot header span{position:absolute;right:15px;top:50%;cursor:pointer;transform:translateY(-50%)}
header h2{font-size:1.4rem}
.chatbot .chatbox{overflow-y:auto;height:450px;padding:30px 20px 100px}
.chatbot :where(.chatbox,textarea)::-webkit-scrollbar{width:6px}
.chatbot :where(.chatbox,textarea)::-webkit-scrollbar-track{background:#fff;border-radius:25px}
.chatbot :where(.chatbox,textarea)::-webkit-scrollbar-thumb{background:#ccc;border-radius:25px}
.chatbox .chat{display:flex;list-style:none}
.chatbox .outgoing{margin:20px 0;justify-content:flex-end}
.chatbox .incoming span{width:32px;height:32px;color:#fff;cursor:default;text-align:center;line-height:32px;align-self:flex-end;background:#e0ac33;border-radius:4px;margin:0 10px 7px 0}
.chatbox .chat p{white-space:pre-wrap;padding:12px 16px;border-radius:10px 10px 0 10px;max-width:75%;color:#fff;font-size:.95rem;background:#e0ac33}
.chatbox .incoming p{border-radius:10px 10px 10px 0}
.chatbox .chat p.error{color:#721c24;background:#f8d7da}
.chatbox .incoming p{color:#000;background:#f2f2f2}
.chatbot .chat-input{display:flex;gap:5px;position:absolute;bottom:0;width:100%;background:#fff;padding:3px 20px;border-top:1px solid #ddd}
.chat-input textarea{height:55px;width:100%;border:none;outline:none;resize:none;max-height:180px;padding:15px 15px 15px 0;font-size:.95rem}
.chat-input span{align-self:flex-end;color:#e0ac33;cursor:pointer;height:55px;display:flex;align-items:center;visibility:hidden;font-size:1.35rem}
.chat-input textarea:valid ~ span{visibility:visible}
@media (max-width: 490px) {
.chatbot-toggler{right:20px;bottom:20px}
.chatbot{left:0;bottom:0;height:100%;border-radius:0;width:100%}
.chatbot .chatbox{height:90%;padding:25px 15px 100px}
.chatbot .chat-input{padding:5px 15px}
.chatbot header span{display:block}
}
/*]]>*/</style>

Bước 4: Lưu lại.

Lưu ý: Chatbot của bạn hiện vẫn chưa hoạt động vì bạn chưa thêm API key trong biến API_KEY. Để lấy API key từ OpenAI, hãy đăng ký tài khoản tại https://platform.openai.com/account/api-keys.

Nếu các bạn không đăng ký được thì có thể liên hệ mình qua email(ngylduy@gmail.com), facebook hoặc qua trang liên hệ mình có thể giúp các bạn tạo 1 tài khoản với giá 30.000 VND

”Khi đăng ký tài khoản OpenAI, bạn sẽ nhận được $5 miễn phí để sử dụng API. Nếu tài khoản của bạn đã sử dụng hơn 3 tháng hoặc 5$ miễn phí, bạn cần tạo 1 tài khoản mới để lấy 5$ miễn phí hoặc nạp thêm tiền vào để tiếp tục sử dụng API của nó. Bạn có thể kiểm tra được tài khoản của mình ở link trên.”

Kết luận

Tóm lại trong bài viết này mình đã hướng dẫn các bạn cách thêm GPT Chatbot sử dụng HTML, CSS và JavaScript cho Blog. Hy vọng làm theo các bước trong bài này, bạn đã tạo thành công GPT Chatbot bằng HTML, CSS và JavaScript.

Nếu có bất kỳ thắc mắc nào đừng ngại comment xuống phía bên dưới mình sẽ giúp các bạn giải đáp thắc mắc sớm nhất có thể. Hãy nhớ rằng bạn cần phải thêm “API key của OpenAI” vào biến API_KEY trong bước 2.

Chatbot

Hi there 👋
How can I help you today?

Cách chặn chuột phải, Copy, Cut và F12 sử dụng JavaScript

2023-04-05T22:34:00.006+07:00

Nếu như bạn muốn hạn chế người dùng truy cập vào trang web hay blog của bạn có thể xem mã nguồn hay gọi là xem code và copy nội dung của bạn hoặc là một mục đích nào đó thì trong bài viết này mình sẽ chia sẻ cho các bạn cách chặn chuột phải, Copy, Cut và F12 sử dụng JavaScript rất đơn giản.

Bài viết này sẽ chia sẻ cho các bạn cách chặn người dùng thực hiện những hành động trên bằng cách vô hiệu hoá chuột phải và các phím tắt như ctrl + c, ctrl + x, ctrl + u, ctrl + shift + i, và f12 sử dụng JavaScript.

Nếu bạn chưa biết thì phím tắt ctrl + u được sử dụng để xem mã nguồn của blog, ctrl + shift + i và f12 được sử dụng để mở chế độ developer trên trình duyệt. Vì vậy, bạn phải vô hiệu hoá tất cả các phím tắt này và nút chuột phải.

Để chặn chuột phải và các phím tắt bằng JavaScript, các bạn chỉ cần copy đoạn code bên dưới và dán vào ngay phía dưới thẻ <body>.

<script>//<![CDATA[
      const disabledKeys = ["c", "C", "x", "J", "u", "I"];
      const showAlert = e => {
        e.preventDefault();
        return alert("Sorry, you can't view or copy source codes this way!");
      }
      document.addEventListener("contextmenu", e => {
        showAlert(e);
      });
      document.addEventListener("keydown", e => {
        // calling showAlert() function, if the pressed key matched to disabled keys
        if((e.ctrlKey && disabledKeys.includes(e.key)) || e.key === "F12") {
          showAlert(e);
        }
      });
      window.addEventListener("load",function(){
        try {
          !function t(n) {
            1 === ("" + n / n).length && 0 !== n || function() {}.constructor("debugger")(), t(++n)
          }(0)
        } catch (n) {
          setTimeout(t, 100)
        }
      });
//]]></script>

Trong đoạn code trên sẽ có một thông báo hiện ra khi người dùng bấm chuột phải hoặc cố gắng sao chép nội, bạn cũng có thể thay thế thông báo này bằng nội dung hoặc code thêm của bạn. Bạn cũng có thể thử ngay trên bài viết này!

Kết luận

Việc chặn chuột phải, Copy, Cut và F12 có thể gây bất tiện khi bạn chỉnh sửa giao diện blog và cũng sẽ chặn người dùng truy cập các tính năng khác do trình duyệt hoặc tiện ích mở rộng cung cấp. Nhưng nếu bạn chỉ là người làm nội dung thì nó mạng lại khá nhiều lợi ích cho bạn.

Nếu thấy bài viết hay thì đừng quên chia sẻ bài viết giúp mình nhé! ❤️

Cách tạo CDN hình ảnh với tên miền riêng cho Blogger

2023-03-30T20:00:00.012+07:00

Chào các bạn, lâu lắm rồi mình mới lại viết bài về thủ thuật Blogger bài thủ thuật gần nhất cũng đã hơn 7 tháng rồi đó là bài Tạo khung chứa code có nút Copy và Download Code đẹp cho Blogger. Còn trong bài viết ngày hôm nay mình sẽ hướng dẫn các bạn cách tạo CDN hình ảnh với tên miền riêng cho Blogger, nó có thể hiểu đơn giản là mình sẽ thay thế tên miền ảnh mặc định của Blogger thành tên miền của mình. Đầu tiên mình sẽ cùng tìm hiểu CDN là gì!

CDN là gì?

CDN viết tắt của Content Delivery Network là mạng lưới máy chủ lưu giữ bản sao của các nội dung tĩnh bên trong website và phân phối đến nhiều máy chủ PoP. Mạng lưới máy chủ CDN được đặt ở khắp mọi nơi trên toàn cầu. Từ PoP (Points of Presence), dữ liệu sẽ tiếp tục được gửi đến người dùng cuối. Thông qua CDN, bản sao nội dung trên máy chủ gần nhất sẽ được trả về cho người dùng khi họ truy cập website.

Nguồn:
wiki.matbao.net

Yêu cầu để thực hiện

Để thực hiện thủ thuật này có 1 yêu cầu cần thiết và duy nhất đó là bạn phải sử dụng Cloudflare để quản lý DNS của domain và trỏ về Blogger.

Cách thay thế tên miền của Blogger thành tên miền riêng

Về cơ bản Cách tạo CDN hình ảnh với tên miền riêng cho Blogger cũng tương tự như Cách tạo Progressive Web App (PWA) cho Blogger/Website các bạn có thể đọc tham khảo thêm. Các bước thực hiện như sau:

Truy cập vào trang quản lý tên miền của Cloudflare.
Tại menu bên trái bạn truy cập vào Worker

Nếu là lần đầu tiên truy cập bạn hãy chọn Create Worker.
Nếu không bạn hãy chọn Create a Service sau đó đặt tên ví dụ như new-images và chọn tiếp Create service.

Tiếp theo chọn Quick Edit, xoá bỏ đoạn Script có sẵn và thay thế bằng đoạn Script dưới đây:

const ORIGINS = {
  "new-images.ngylduy.workers.dev": "blogger.googleusercontent.com",
  "www.nldblog.com": "blogger.googleusercontent.com",
}

async function handleRequest(request) {
  let url = new URL(request.url)
  // Check if incoming hostname is a key in the ORIGINS object
 if (url.hostname in ORIGINS) {
    const target = ORIGINS[url.hostname]
    url.hostname = target
    // If it is, proxy request to that third party origin
    return await fetch(url.toString().replace('/new-images', ''), request)
  }

}

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request))
})

Thay thế new-images.ngylduy.workers.dev bằng URL Worker của bạn và www.nldblog.com thay bằng tên miền Blog của bạn.

Nhấp Save and deploy.
Truy cập vào trang Cloudflare của tên miền của bạn như ở trên và tại menu bên trái chọn Workers Routes và chọn Add route. Sau đó nhập thông tin như sau:

Route Service Environment

https://*.nldblog.com/images/* new-images production

Nhớ thay nldblog.com thành tên miền của bạn và new-images chọn đúng giống tên Worker tạo bên trên.

Route	Service	Environment
https://.nldblog.com/images/	new-images	production

Như các bạn đã biết thì bây giờ khi up ảnh lên bài viết thì sẽ có dạng như sau:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrUmFU2Zd-HcidCBMAxpwbojvWvzFax72Uu9xJsO_q3f2P2nlOYZ0Z2pruqnC2q1FHwtpE7q0vYuFdMDDmVrauNJ9DspjDY9m_4pj7dWr19VsGZUb3Z1bWWdYjovN5PTRVFtrXir0lSv59ablZT6b6ONIrIvicgxm_eZVPtJSsi07Ot14idhxEp98t/s1600-rw-e30/pixblog-template.webp

Chúng ta hãy thay blogger.googleusercontent.com thành tên miền route đã để ở trên ví dụ như của mình sẽ là:

https://www.nldblog.com/new-images/img/b/R29vZ2xl/AVvXsEgrUmFU2Zd-HcidCBMAxpwbojvWvzFax72Uu9xJsO_q3f2P2nlOYZ0Z2pruqnC2q1FHwtpE7q0vYuFdMDDmVrauNJ9DspjDY9m_4pj7dWr19VsGZUb3Z1bWWdYjovN5PTRVFtrXir0lSv59ablZT6b6ONIrIvicgxm_eZVPtJSsi07Ot14idhxEp98t/s1600-rw-e30/pixblog-template.webp

Vậy là xong rồi đấy, các bạn có thể truy cập thử liên kết hình ảnh bên trên nhé!

Lời kết

Vì mình sử dụng dịch vụ miễn phí của Cloudflare nên nó sẽ giới hạn tối đa là 100.000 request mỗi ngày.
Nếu bạn để URL tuỳ chỉnh như ở trên là thumbnail thì khi đạt đến giới hạn truy cập thì hình ảnh của bạn sẽ không thể hiển thị.

Nếu blog của bạn là 1 blog nhỏ thì sử dụng gói miễn phí của Cloudflare là đủ còn không hãy nâng cấp lên gói cáo cấp của Cloudflare. Chúc các bạn thành công.

Lý do Fanpage bị hạn chế quảng cáo và cách khắc phục

2022-10-20T10:56:00.009+07:00

Có một vài lý do có thể kể đến khi fanpage bị hạn chế quảng cáo, nhưng khi fanpage bị hạn chế quảng cáo bạn chỉ nhận được thông báo đến từ Facebook: "Trang của bạn đã vi phạm chính sách Facebook đã đề ra".

Bài viết này mình sẽ chỉ cho các bạn lý do tại sao fanpage bị hạn chế quảng cáo và cách khắc phục nhé.

Tại sao fanpage bị hạn chế quảng cáo?

Fanpage giúp quảng bá thương hiệu và hình ảnh Doanh nghiệp đến đúng đối tượng khách hàng mục tiêu. Fanpage có sức lan tỏa rộng.

Nếu một thành viên chia sẻ một bài viết trong Fanpage thì bạn bè của họ có thể nhìn thấy nó.

Nhưng fanpage cũng dễ bị gặp tình trạng bị hạn chế quảng cáo, gây khó khăn cho doanh nghiệp.

Nguyên nhân khiến Fanpage bị hạn chế quảng cáo

Khi dính lỗi hạn chế quảng cáo, người dùng sẽ nhận được một tin nhắn từ Facebook dạng như: Trang fanpage của bạn đã vi phạm chính sách mà Facebook đề ra.

Tuy nhiên, nó lại không nói rõ hay đề cập đến lý do chính xác dẫn đến lỗi này là gì. Do đó, đôi khi nó sẽ khiến nhà quảng cáo cảm thấy hoang mang, không biết mình đã sai ở đâu để khắc phục.

Dưới đây là một số lỗi mà người dùng hay vi phạm khiến cho tài khoản quảng cáo bị hạn chế hoặc khoá:

- Câu tương tác trong nội dung

- Seeding spam!

- Các nội dung vi phạm tiêu chuẩn cộng đồng bị quét

- Các nick quản trị từng vi phạm liên đới

- Cách trả lời bình luận/tin nhắn spam

- Ko biết cách dẫn link về web bị đánh dấu spam

- Trong bài quảng cáo có chứa hình ảnh, sản phẩm, ngôn từ mà Facebook cấm quảng cáo.

- Tài khoản quảng cáo đã có lịch sử vi phạm chính sách khi chạy quảng cáo Facebook.

- Bài viết quảng cáo có chứa hình ảnh, video, từ ngữ vi phạm tiêu chuẩn của Facebook.

- Facebook thực hiện chiến dịch quét những tài khoản vi phạm.

- Bạn mắc lỗi trong quá trình tạo quảng cáo như: Chèn quá nhiều chữ trong ảnh, nhắm vào mục tiêu cá nhân, sử dụng sai thương hiệu Facebook, quảng cáo bạo lực, quảng cáo kém chất lượng,…

- Trang đích của quảng cáo vi phạm chính sách của Facebook.

- Sử dụng tài khoản quảng cáo mới.

- Sử dụng các phần mềm autotool như: Phần mềm seeding, quét ID, hack like, tăng like ảo,…

Cách xử lý khi fanpage bị hạn chế quảng cáo

Cách xử lý fanpage bị hạn chế quảng cáo sau đây chắc chắn có thể giúp bạn khắc phục được sự cố này – Gửi kháng cáo cho Facebook

Bước 1:

Chuẩn bị 1 tài khoản Facebook sạch, chưa từng liên quan đến quảng cáo càng tốt.

Sau đó share quyền quản trị fanpage cho nó, đồng thời gỡ hết toàn bộ vai trò quản trị, biên tập viên và người phụ trách quảng cáo ra khỏi page. Chỉ giữ lại duy nick sạch này.

Lưu ý: Để tăng khả năng thành công, bạn nên để nó đăng bài như thường trong khoảng 5-7 ngày.

Bước 2:

Bạn truy cập vào chất lượng tài khoản đến phần trang để gửi yêu cầu xem xét lại. Hoặc có thể kháng page qua link ở đây.

Bước 3:

Chờ Facebook xem xét kháng nghị và xét duyệt. Quá trình này thường mất khoảng 5-7 ngày. Bạn có thể nhận được Email trả lời từ Facebook hoặc Email thông báo về việc quảng cáo đã được hoạt động trở lại.

Đây chưa phải phương pháp mới nhất - đầy đủ & hiệu quả nhất. Tuy nhiên cũng là góc nhìn của 3 Độ.

Đối Với Page Cũ

Tạo thêm các page vệ tinh theo vị trí cửa hàng, thời điểm bây giờ quét khá ghê nên ai muốn Ăn Chắc thì chạy ads page vệ tinh.
Ưu điểm là đa số page chính chưa die thì tin nhắn của page vệ tinh sẽ về page chính, về độ trâu thì mình đánh giá là trâu hơn tất cả các loại page kháng mà chưa chạy ads bao giờ.
Ngoài ra, tất cả các bài viết trên page sẽ hiển thị trên page vệ tinh. Và còn vài tính năng hay ho khác.
Nhét page vào Bm XMDN chỉ chuyên để cầm page, mục đích để hạn chế liên đới, dễ kháng về hơn, page có độ trâu tương đối do đã trải qua xác minh. (Tài khoản thì vẫn yếu nhé nếu chưa chi tiêu)
Các vai trò quản trị viên, biên tập viên, kiểm duyệt, quảng cáo cần được phân chia rõ ràng. Vai trò gì nhiệm vụ đấy tránh liên đới về sau.
Page nhiều khi không dính lỗi gì vẫn bị hạn chế phần nhiều cũng do quản trị viên và biên tập viên từng nắm giữ tài sản bị hạn chế.
Khi lên camp bị từ chối mà các tài sản khác không làm sao thì vào camp chỉnh sửa lại bài khác không vi phạm rồi lên lại, bài cũ thì chỉnh sửa rồi xóa đi.
Camp kia lên được rồi cũng xóa đi luôn lên lại camp khác. Mục đích để page và tài khoản dính lỗi ít nhất có thể. Đừng chày cối set cho bằng được 1 bài đó lần thứ 2 nó vẫn từ chối là biết rồi đó.
Tạo 1 group liên kết với page, ngoài mục đích giúp page khỏe hơn thì sau xây được group to rất có lợi.

Đối với page mới (không phải page vệ tinh):

B1: Vào Bm tạo page trong Bm, điền đầy đủ các thông tin trên page (nếu có Bm XMDN hay kháng thì càng ổn áp)

B2: Tạo 1 group liên kết với page, đăng 5-7 bài lên page

B3: Share page cho via set cầm quyền biên tập viên. (nếu via set mới mua thì cần ngâm 24 - 48h trước rồi mới share page)

B4: Sau 1 ngày cầm page thì lên camp like page hoặc nhận biết bằng Boost Post cho page học máy học từ 1-2 ngày khi nào trên page hiện cách đăng bài bằng Studio sáng tạo là được, sau tạo 1 bài viết bất kỳ bằng Studio sáng tạo.

B5: Thực hiện xong bước 4 thì lên tiếp camp 2 trong Trình quản lý quảng cáo khi nào hoạt động cắn tiền mới tắt camp 1.

Ngoài ra vấn đề Chết page nó còn đến từ nhiều yếu tố khác: nick set, tài khoản, bm, thẻ, môi trường máy, nội dung, mạng. Chúng đều liên quan đến môi trường sử dụng của nick.

PHẢI LÀM GÌ KHI FANPAGE BỊ KHÓA QUẢNG CÁO VĨNH VIỄN?

Trong một số trường hợp, mặc dù bạn đã yêu cầu kháng cáo theo đúng quy trình nhưng vẫn không được mở chức năng quảng cáo. Và sau đó, Facebook vẫn đưa ra quyết định rằng fanpage của bạn sẽ bị khóa quảng cáo vĩnh viễn.

Trường hợp này, bạn phải tạo fanpage mới và thực hiện kéo khách hàng sang page mới bằng các các sau:

Cách 1: Liên tục đăng bài ở fanpage bị khóa quảng cáo để nhờ khách hàng like fanpage mới của bạn.

Cách 2: Dùng fanpage mới để chạy quảng cáo Retargeting trên Facebook hướng đến đối tượng những khách hàng từng biết đến hoặc tương tác với fanpage cũ của bạn.

Download Windows 11 22H2 mới nhất từ Microsoft cập nhật 2022

2022-09-22T15:05:00.018+07:00

Mới đây Microsoft đã ra mắt bản cập nhật mới cho Windows 11 đó là phiên bản 20H2 với tên gọi chính thức là: Windows 11 version 22H2 build 22621.382 bản ISO

Windows 11 22H2 là phiên bản cập nhật lớn đầu tiên của Windows 11, sau gần 1 năm kể từ khi Windows 11 chính thức ra mắt công khai. Windows 11 22H2 đã chính thức ra mắt vào ngày 20/09/2022 với nhiều tính năng và cải tiến mới như Start Menu với folder, Tabs trong File Explorer, giao diện Task Manager mới, các cử chỉ mới,...

Một số tính năng cải thiện mới của Windows 11 22H2

Windows 11 22H2 đáng mong đợi bởi vì Windows 11 phiên bản tiền nhiệm để lại không ít rắc rối bởi sự mới mẻ và chưa thích nghi được với phần lớn người dùng Windows 10 nâng cấp. Và được cộng đồng trải nghiệm mới gọi đây là phiên bản "Cải lùi" của nhà Microsoft Windows 11, chính vì thế phiên bản 22H2 chính thức ra mắt vào ngày 20/09/2022 là đợt cập nhật lớn nhất đầu tiên được phần lớn người dùng đón nhận. Có một số tính năng như sau:

Thay đổi Start menu và thanh Taskbar

Thay đổi Start menu và thanh Taskbar
Chức năng kéo thả đã quay trở lại
Thêm chức năng Pins nâng cao
Thêm thư mục trên Start Menu

Cải tiến trình duyệt tập tin (File Explorer) và quản lý cửa sổ tốt hơn

Đính tập tin vào mục Favorites
Xem trước nội dung trong thư mục
Tính năng Snap cải tiến

Một số thay đổi giao diện khác

Hình nền Spotlight trên desktop
Màn hình khoá cải tiến
Biểu tượng icon mới và hiệu ứng Mica trong suốt
Control Panel di chuyển đến mục Cài đặt
Task Manager hoàn toàn mới

Download Windows 11 22H2

Link tải Windows 11 22H2 chính gốc Microsoft

Phiên bản Windows 11 22H2 build 22621.382 ngày 20/09/2022

{getButton} $text={Download} $icon={download}

Windows 11 22H2 15in1

Đây là bản Windows 11 22H2 22621.521 mới nhất 15in1

Build 22H2 update mới nhất đến 22/09/2022.
Untouched nguyên bản (anh em có thể dùng key kích hoạt riêng của anh em nếu muốn)
Đã kích hoạt bản quyền vĩnh viễn.

{getButton} $text={Download} $icon={download}

Packed by Andy Pham - Nghiện Tech

Nếu có vấn đề gì về link tải vui lòng bình luận xuống dưới bài viết mình sẽ cập nhật lại sớm nhất có thể.

Tạo khung chứa code có nút Copy và Download Code đẹp cho Blogger

2022-09-13T10:50:00.030+07:00

Xin chào các bạn, lâu rồi mới lại viết thêm bài thủ thuật cho Blogger. Bài này mình sẽ chia sẻ cho các bạn thủ thuật thêm khung chứ code hay còn gọi là codebox có nút Copy và Download Code đẹp cho Blogger. Thủ thuật này sử dụng HTML, CSS và JavaScript.

Các bạn có thể xem demo ở đây:

{getButton} $text={Preview} $icon={preview}

Cách thực hiện

Cách thực hiện các bạn không cần biết nhiều về những kiến thức HTML, CSS hoặc JS vì mình đã code sẵn cho các bạn. Các bạn cần làm theo chính xác các bước hướng dẫn của mình là được.

Bước 1: Truy cập trang quản trị của Blogger và vào phần chỉnh sử HTML, sau đó tìm đến thẻ ]]></b:skin> và thêm đoạn code CSS dưới đây vào phía trên nó:

/* Code Box */
.pre{background:#f6f6f6;color:#2f3337;direction: ltr;position:relative;border-radius:3px;overflow:hidden;margin:1.7em auto} 
.pre pre{margin:0;color:inherit;background:inherit;display:block;position:relative;font-size:13px;line-height:1.6em;border-radius:3px;padding:30px 20px 20px;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none; overflow:auto;direction:ltr;white-space:pre} 
.pre.adv{border-radius:10px}
.pre.adv::before{display:none}
.pre:not(.str) .prCd{display:none}
.pre.str .prTl{display:none;}
.pre.adv pre{padding-top:60px}
.preM{position:absolute;top:0;right:0;left:0;width:100%;background: rgba(0,0,0,.04);padding:10px 10px 10px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;z-index:2}
.preT{font-size:12px;font-family: var(--fontC);line-height:1rem;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:10px;}
.preA{display:flex;gap:8px;white-space:nowrap;}
.preA button{outline:none;border:none;width:30px;height:30px;background:#d9d9d9;padding:0;margin:0;border-radius:50%;transition:border-radius .2s ease;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.preA button:hover{border-radius:40%;}
.preA button >svg{width:18px;height:18px;stroke:none;fill:#2e2e2e;transition: all .5s ease;}
.pre.cpd .prCp svg, .pre.pnd .prDl svg, .pre.dwn .prDl svg{animation: jiggle 1s}
.pre.cpd .prCp svg .a,.pre:not(.cpd) .prCp svg .b{opacity:0}
.pre.dwn .prDl svg .a, .pre.pnd .prDl svg .a,.pre:not(.pnd) .prDl svg .b,.pre:not(.dwn) .prDl svg .c{opacity:0}
@keyframes jiggle{0%{transform:rotate(0)}20%{transform:rotate(26deg)}40%{transform:rotate(-26deg)}60%{transform:rotate(26deg)}80%{transform:rotate(-26deg)}100%{transform:rotate(0)}}
@-webkit-keyframes jiggle{0%{transform:rotate(0)}20%{transform:rotate(26deg)}40%{transform:rotate(-26deg)}60%{transform:rotate(26deg)}80%{transform:rotate(-26deg)}100%{transform:rotate(0)}}

Bước 2: Tìm đến thẻ </body> hoặc một số template sẽ là </body> và thêm đoạn JavaScript dưới đây và phía trên nó:

<script>/*<![CDATA[*/
0<document.querySelectorAll('div.pre.nb').length&&(() => {
let preD = document.querySelectorAll('div.pre.nb');
function saveDoc(x, d, n) {
    if (n = typeof n == 'string' ? n : 'text/plain', d = typeof d == 'string' ? d : 'File_' + (new Date).getTime() + '.txt', x) {
        n = new Blob([x], {
            type: n
        });
        if (navigator.msSaveBlob) return navigator.msSaveBlob(n, d); {
            let x = window.URL.createObjectURL(n),
                c = document.createElement("a");
            c.classList.add('hidden'), c.href = x, c.download = d, document.body.appendChild(c), c.click(), c.remove(), window.URL.revokeObjectURL(x)
        }
    }
}
for (let r = 0; r < preD.length; r++) {
    let b = preD[r];
    b.classList.add('adv');
    let x = b.dataset.text || 'File_' + (new Date).getTime(),
        e = b.dataset.file || x,
        _ = b.dataset.lang || '.txt',
        m = 'undefined' !== typeof b.dataset.time ? isNaN(Number(b.dataset.time)) ? 'false' === b.dataset.time ? 0 : 10 : Number(b.dataset.time) : 10,
        c = 'undefined' === typeof b.dataset.download || b.dataset.download == 'true',
        d = 'undefined' === typeof b.dataset.copy || b.dataset.copy == 'true',
        n = 'undefined' === typeof b.dataset.view || b.dataset.view == 'true',
        a = b.querySelector('pre'),
        t = a.innerText;
    b.insertAdjacentHTML('afterbegin', "<div class='preM'><div class='preT'><span class='prTl'>" + (null == x ? '&lt;/&gt;' : x) + "</span><span class='prCd'></span></div><div class='preA'>" + (n ? '\x3C!--[ Prev' + "iew ]--><button class='prVw'><svg viewBox='0 0 24 24'><path d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'/></svg></button>" : "") + (c ? "\x3C!--[ Download ]--><button class='prDl'><svg viewBox='0 0 24 24'><path class='a' d='M8 17V15H16V17H8M16 10L12 14L8 10H10.5V6H13.5V10H16M12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4Z'/><path class='b' d='M13,2.03C17.73,2.5 21.5,6.25 21.95,11C22.5,16.5 18.5,21.38 13,21.93V19.93C16.64,19.5 19.5,16.61 19.96,12.97C20.5,8.58 17.39,4.59 13,4.05V2.05L13,2.03M11,2.06V4.06C9.57,4.26 8.22,4.84 7.1,5.74L5.67,4.26C7.19,3 9.05,2.25 11,2.06M4.26,5.67L5.69,7.1C4.8,8.23 4.24,9.58 4.05,11H2.05C2.25,9.04 3,7.19 4.26,5.67M2.06,13H4.06C4.24,14.42 4.81,15.77 5.69,16.9L4.27,18.33C3.03,16.81 2.26,14.96 2.06,13M7.1,18.37C8.23,19.25 9.58,19.82 11,20V22C9.04,21.79 7.18,21 5.67,19.74L7.1,18.37M12,16.5L7.5,12H11V8H13V12H16.5L12,16.5Z'/><path class='c' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M7,15H17V17H7V15M10.3,11.2L8.4,9.3L7,10.7L10.3,14L17,7.3L15.6,5.9L10.3,11.2Z'/></svg></button>" : "") + (d ? "\x3C!--[ Copy ]--><button class='prCp'><svg viewBox='0 0 24 24'><path class='a' d='M20,16V4H8V16H20M22,16A2,2 0 0,1 20,18H8C6.89,18 6,17.1 6,16V4C6,2.89 6.89,2 8,2H20A2,2 0 0,1 22,4V16M16,20V22H4A2,2 0 0,1 2,20V7H4V20H16Z'/><path class='b' d='M20,16V10H22V16A2,2 0 0,1 20,18H8C6.89,18 6,17.1 6,16V4C6,2.89 6.89,2 8,2H16V4H8V16H20M10.91,7.08L14,10.17L20.59,3.58L22,5L14,13L9.5,8.5L10.91,7.08M16,20V22H4A2,2 0 0,1 2,20V7H4V20H16Z'/></svg></button>" : "") + '</div></di' + "v>");
    let i = b.querySelector('.prVw'),
        l = b.querySelector('.prDl'),
        f = b.querySelector('.prCp'),
        W = b.querySelector('.prCd');
    null !== i && i.addEventListener('click', () => {
        var x = '#252526';
        x = '<!DOCTYPE html><html><head><title>' + e.replace(/\./g, "").replace(/ /g, "_") + _ + "</title><meta content='width=device-width,initial-scale=1,user-scalable=1,minimum-scale=1,maximum-scale=5' name='viewport'/><meta content='" + x + "' name='theme-color'/><meta content='" + x + "' name='msapplication-navbutton-color'/><meta content='" + x + "' name='apple-mobile-web-app-status-bar-style'/><link rel='shortcut icon' type='image/png' href='https://www.nldblog.com/main/android-icon-192x192.png'><style>body{min-height:100vh;background:#252526;color:#fff}*{margin:0;padding:0}html{line-height:1em;background:#1d1f21;color:#c5c8c6}pre{white-space:pre-wrap;word-wrap:break-word;word-break:break-all;padding:20px}pre i{font-style:normal}</style></head><body><div class='pre'>" + a.outerHTML + '</div></body></html>';
        x = new Blob([x], {
            type: 'text/html'
        });
        window.navigator.msSaveOrOpenBlob ? window.navigator.msSaveOrOpenBlob(blobObject, fileName) : (x = window.URL.createObjectURL(x), window.open(x, '_blank'), window.URL.revokeObjectURL(x))
    }), 
    null !== l && l.addEventListener('click', () => {
        l.disabled = !0;
        let c = m;
        b.classList.add('pnd', 'str'), W.innerHTML = 0 !== m ? 'Please wai' + "t " + c + 's...' : 'Please wai' + 't...';
        let a = setInterval(() => {
            0 !== m && --c, 0 !== m && (W.innerHTML = 'Please wait ' + c + 's...'), c <= 0 && (clearInterval(a), setTimeout(() => {
                W.innerHTML = 'Downloading...', setTimeout(() => {
                    b.classList.remove('pnd'), b.classList.add('dwn'), saveDoc(t, e.replace(/\./g, "").replace(/ /g, "_") + '_by_NLD_Blog' + _, 'text/plain'), W.innerHTML = 'Download started...', setTimeout(() => {
                        b.classList.remove('dwn', 'str'), l.disabled = !1
                    }, 3e3)
                }, 2e3)
            }, 1e3))
        }, 1e3)
    }), 
    null !== f && f.addEventListener('click', () => {
        var x = getSelection(),
            c = document.createRange();
        c.selectNodeContents(a), x.removeAllRanges(), x.addRange(c), document.execCommand('copy'), x.removeAllRanges(), f.disabled = !0, b.classList.add('cpd'), setTimeout(function() {
            b.classList.remove('cpd'), f.disabled = !1
        }, 3e3)
    })
}})();
/*]]>*/</script>

Vậy là xong, để chèn code vào bài viết thì bạn sử dụng cú pháp sau để hiển thị code:

<div class='pre nb' data-text='typecode' data-file='filename' data-lang='fileformat' data-time='true' data-download='true' data-copy='true' data-view='true'>
  <pre>
      <!-- Code -->
  </pre>
</div>

Trong đó:

data-text là loại code, ví dụ: CSS, HTML hoặc JavaScript
data-file là tên tải xuống của File
data-lang là format của file, ví dụ: .css, .js, .html, .txt
data-time là đếm ngược tải xuống true or false
data-download là hiển thị nút tải xuống true or false
data-copy là hiển thị nút copy true or false
data-view là hiển thị nút preview true or false

Bạn có thể tham khảo công cụ convert code HTML.

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

Thêm hiệu ứng chờ tải trang cờ đỏ sao vàng Việt Nam cho Blogger

2022-08-23T13:21:00.017+07:00

Bài viết này mình sẽ chia sẻ cho các bạn cách thêm hiệu ứng chờ tải trang hay còn gọi là preload cho blog hoặc trang web của các bạn. Bài viết này đặc biệt là hiệu ứng chờ tải trang có dạng cờ đỏ sao vàng và búa liềm nhằm mục đich hưởng ứng ngày lễ Quốc khánh Việt Nam ngày 2 tháng 9 và cũng có thể sử dụng cho ngày 30 tháng 4.

Hiệu ứng chờ tải trang thì cũng không có gì là mới mẻ cả và hiện nay rất nhiều trang web sử dụng. Mỗi trang đều sử dụng cho mục đích khác nhau mà một trong những nguyên do cần đưa hiệu ứng này vào là che đi phần khuyết điểm trong thời gian tải trang, bất kể thời gian tải bao lâu nếu thấy trang có hiện tượng bị giựt, bố cục hiển thị không đồng bộ ví dụ phần sau tải trước phần trước...

Hiệu ứng chờ tải trang cờ đỏ sao vàng Việt Nam cũng vậy mục đích đầu tiên là để tôn vinh ngày Quốc khánh Việt Nam cũng như những ngày lễ của dân tộc Việt Nam, mục đích còn lại là để che đi những khuyết điểm trong thời gian tải trang hiểu một cách đơn gian là nó sẽ che đi toàn bộ phần hiển thị của trang web và hiệu ứng sẽ ẩn đi khi toàn bộ trang web được tải xong. Thủ thuật này mình sẽ chỉ sử dụng HTML, CSS và JavaScript nên nó không ảnh hưởng gì nhiều đến tốc độ tải trang của blog hay trang web hiện tại nên các không phải băn khoăn.

Thêm hiệu ứng chờ tải trang cờ đỏ sao vàng Việt Nam cho Blogger

Bước 1: Chèn đoạn CSS dưới đây vào vị trí lưu trữ CSS của bạn, đối với Blogger thì có thể là ở trong cặp thẻ <b:skin>...</b:skin> hoặc <style>...</style>

.pageLoading{z-index:999;position:fixed;top:-30%;right:-30%;bottom:-30%;left:-30%;display:flex;align-items:center;justify-content:center;background:#fff;transition:all .7s ease}
.pageLoading.done{visibility:hidden;opacity:0}
.pageLoadingC{position:absolute;display:block;background:#db2017;height:100%;width:100%;transition:all .7s ease}
.pageLoading svg{width:0;height:0;visibility:hidden;opacity:0;fill:#ffff00;transition:all .7s ease;z-index:1}
.pageLoading svg.beatAnimation{animation:beat 2.3s linear infinite}
.pageLoading svg.active{visibility:visible;opacity:1;width:60px;height:60px}
.pageLoading.loaded svg.active.starSvg{width:auto;height:15%}
.pageLoading.loaded svg.active.socialistSvg{width:auto;height:12%}
@keyframes beat{0%,50%,100%{transform:scale(1, 1)}30%,80%{transform:scale(0.72, 0.75)}}

Bước 2: Tiếp tục tìm đến thẻ <body> và chèn code HTML dưới đây ngay phía dưới thẻ <body> đó.

<div class='pageLoading'>
  <div class='pageLoadingC'></div>
  <svg class='starSvg active beatAnimation' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z'/></svg>
  <svg class='socialistSvg' viewBox='0 0 399.99 364.75' xmlns='http://www.w3.org/2000/svg'><path class='cls-1' d='M395,323.33l-48.7-47c36.83-40,44.46-98.87,26-153-.05-.16-.11-.33-.17-.49q-.81-2.34-1.68-4.67c-.06-.18-.13-.36-.2-.54-1.26-3.35-2.64-6.68-4.11-10-.11-.25-.22-.51-.34-.76-.69-1.53-1.39-3-2.12-4.56l-.15-.32c-.8-1.64-1.62-3.29-2.47-4.92l-.27-.5c-.74-1.42-1.5-2.82-2.28-4.22l-.51-.92q-2.64-4.66-5.54-9.22l-.63-1q-1.2-1.84-2.45-3.68c-.21-.31-.41-.62-.63-.93-1-1.48-2.05-2.94-3.11-4.4l-.37-.49q-1.41-1.91-2.86-3.79l-.89-1.14q-1.39-1.77-2.83-3.52c-.2-.24-.39-.48-.59-.71-1.14-1.38-2.3-2.73-3.49-4.08l-.87-1q-1.41-1.58-2.85-3.12c-.35-.38-.69-.75-1-1.12-1.24-1.32-2.49-2.62-3.78-3.9-2.69-2.7-5.44-5.29-8.22-7.76C292.71,19.37,264.14,6,235.24,1,233.1.62,231,.29,228.81,0a2.09,2.09,0,0,0-.71,0,2,2,0,0,0-.6.25,2.07,2.07,0,0,0-.91,1.58,1.94,1.94,0,0,0,.83,1.72l.2.14.89.63,0,0c1.13.8,2.37,1.69,3.69,2.66h0C243.06,14.94,260,28,274.9,43c26.18,26.17,43.9,55.74,52.76,85l-.32-1c9.18,29.64,9.26,59-.21,84.09l0,.08a102.06,102.06,0,0,1-4.59,10.37c-.06.12-.12.24-.19.36-.48.94-1,1.86-1.49,2.78l-.4.71c-.47.83-1,1.65-1.45,2.47l-.44.72c-.57.91-1.15,1.82-1.75,2.72l-.2.31c-.68,1-1.38,2-2.1,3l-.4.54c-.58.78-1.16,1.55-1.75,2.31-.25.31-.49.62-.74.92-.51.64-1,1.27-1.56,1.9l-.51.6L186.61,122.3c19.91-20.67,36.2-38.68,42-45.17a2.87,2.87,0,0,0,.54-3,2.81,2.81,0,0,0-.7-1,2.73,2.73,0,0,0-.53-.4c-3.52-2.1-8-4.52-12.82-7-16.32-8.51-37.44-18.32-45-21.79a4.56,4.56,0,0,0-1.19-.37,5.69,5.69,0,0,0-.83-.07,4.72,4.72,0,0,0-1.34.19,5,5,0,0,0-.64.25,4.6,4.6,0,0,0-1.17.76C158.13,50.7,151.28,57,144.57,63.37c-1.8,1.72-3.61,3.43-5.39,5.15q-6.31,6.06-12.35,12c-5.16,5.1-10.15,10.11-14.85,14.91l-3.1,3.17c-14.8,15.18-26.59,27.91-32.6,34.49L74.61,135a4.8,4.8,0,0,0-.24,6.16c15.57,19.75,33.73,36.83,40.85,43.29a4.78,4.78,0,0,0,6.29.11c11.29-9.42,23.63-20.85,35.83-32.73L271.4,269.68c-22.8,10.44-47.88,12.08-72.69,6.23l-1.32-.32c-19.15-4.72-38.11-13.89-55.69-26.91l-2.8-2.11c-1.85-1.43-3.69-2.91-5.51-4.42-.91-.76-1.81-1.52-2.71-2.3q-5.42-4.68-10.58-9.84l-1.69-1.7-1-1-.69-.69c-.31-.31-.63-.6-1-.87s-.67-.52-1-.76a12.32,12.32,0,0,0-3.33-1.56A12.08,12.08,0,0,0,109,223q-.6-.06-1.2-.06a12.83,12.83,0,0,0-2.4.22,12.67,12.67,0,0,0-5.55,2.59c-.32.27-.64.55-1,.86L80.35,247.22a47.78,47.78,0,0,0-5.87-3.71c-.74-.39-1.47-.74-2.19-1a20.66,20.66,0,0,0-3.14-1.05c-.38-.1-.76-.17-1.13-.23a12.57,12.57,0,0,0-1.8-.17c-.31,0-.62,0-.92,0a8.62,8.62,0,0,0-5.66,2.61,8.8,8.8,0,0,0-.65.72c-.09.11-.18.24-.26.35l-.29.39c-.11.17-.21.35-.31.52s-.1.17-.14.25-.21.44-.31.67a.61.61,0,0,0,0,.12,5.92,5.92,0,0,0-.27.81h0c-.9,3.22,0,7.05,2.3,11.27a7.44,7.44,0,0,1,.87,3.75v0a7.55,7.55,0,0,1-.47,2.44h0a7.54,7.54,0,0,1-.73,1.48.35.35,0,0,1-.05.08c-.12.19-.25.37-.39.55l-.13.17-.39.44-.16.17c-.18.18-.38.36-.58.53l-49.72,38h0c-.53.47-1,1-1.52,1.47-.16.16-.3.34-.46.51-.31.35-.62.69-.9,1s-.33.43-.49.64-.49.67-.72,1-.3.47-.45.7-.4.67-.59,1-.27.5-.4.75-.33.68-.48,1-.23.51-.33.77-.27.7-.39,1.06-.18.5-.26.76-.21.78-.3,1.17c-.06.22-.13.44-.17.67-.12.58-.22,1.17-.29,1.75,0,.3,0,.59-.07.88s0,.63-.06.94,0,.63,0,.94,0,.57,0,.85.06.64.1,1,.07.53.11.8.12.64.19,1,.13.5.19.75.18.63.29.95.17.46.26.7.25.62.39.93.22.42.33.62a15.48,15.48,0,0,0,2.76,3.82l13.91,13.91c7.35,7.34,20.43,5.86,28.45-3.23l38.21-49.77a7.74,7.74,0,0,1,9.54-2.08c6.16,3.23,11.45,3.79,15,.2,4.6-4.6,2.43-12-3.46-20.37l5.57-4.59a4.15,4.15,0,0,1,5.57.26l.82.83c55.09,55.08,129.06,69.6,189,36.84l51.23,52.95c6.59,6.82,17.77,6.63,24.83-.42l11.17-11.18C401.62,341.11,401.81,329.93,395,323.33Z'/></svg>
</div>

Bước 3: Tìm đến thẻ đóng </body> và chèn đoạn JavaScript dưới đây ngay phía trên nó.

<script>/*<![CDATA[*/ 
  document.querySelector("html").style.overflow = "hidden"
  document.addEventListener("DOMContentLoaded", () => {
    setTimeout(() => {
    var pageLoading = document.querySelector(".pageLoading"),
    svg1 = document.querySelector("svg.starSvg"),
    svg2 = document.querySelector("svg.socialistSvg");
    svg1.classList.remove("beatAnimation"), pageLoading.classList.add("loaded"), setTimeout(() => { 
      svg1.classList.remove("active"), svg2.classList.add("active"), setTimeout(() => {
          pageLoading.classList.add("done"), pageLoading.addEventListener("transitionend", () => {
          	document.querySelector("html").style.overflow = "auto"
          	pageLoading.remove()
          })
        }, 2e3)
      }, 2e3)
    }, 2e3)
  });
/*]]>*/</script>

Vậy là xong, mình đã hướng dẫn các bạn cách thêm hiệu ứng chờ tải trang cờ đỏ sao vàng Việt Nam cho Blogger, demo các bạn có thể tại lại trang bài viết này để xem. Nếu bạn thấy bài viết hay và hữu ích hãy chia sẻ bài viết về trang Facebook cá nhân để lưu lại nhé. Chúc các bạn vui vẻ!

Cách tạo License Key cho template Blogger sử dụng JavaScript

2022-08-17T14:02:00.034+07:00

Gần đây các bạn có thể thấy trên Blog mình đã chia sẻ một vài template mà họ đã sử dụng license key để kích hoạt đúng không? Ví dụ như Plus UI v2.6.1 hay Apmody v1.4 chẳng hạn tuy 2 template đã mã hoá JavaScript mình vẫn chưa biết cách giải nhưng mình biết đoạn mã JavaScript để kích hoạt license key ở đâu nên mình đã thay nó bằng đoạn mã khác cũng tương tự.

Và trong bài viết này mình sẽ chia sẻ cho các bạn đoạn mã JavaScript để kích hoạt license key cho template Blogger và cách lưu trữ license key.

Cách hoạt động của License Key

Cách hoạt động của nó thì rất đơn giản rằng các bạn sẽ lưu thông tin để tạo License Key trên Google Script để tăng tính bảo mật và từ thông tin đó mình sẽ chuyển nó sang dạng mã hoá Base64 kiểu như này dFu5d8WerUWerZN3OHf=. Nó cũng có thể sử dụng tương tự viết Github nhưng nó sẽ rất dễ bị người khác biết và thay đổi. License Key sẽ do các bạn tuỳ ý quản lý và mỗi License Key chỉ sử dụng được trên 1 Blog cố định.

Cách tạo Google Script chứa thông tin License Key

Có 2 cách để tạo Google Script chứa thông tin License Key nhưng mình sẽ hướng dẫn các bạn cách nhanh nhất mà mình đã dùng.

Bước 1: Truy cập https://script.google.com/home và chọn New project.

Bước 2: Đặt tên cho project của bạn và thay thế toàn bộ đoạn mã có sẵn bằng đoạn mã sau:

function doGet() {
  var nldblog = ContentService.createTextOutput();
  nldblog.append('{"user":[{"no":0,"name":"","url":"","id":"","code":""},{"no":1,"name":"","url":"","id":"","code":""},{"no":2,"name":"","url":"","id":"","code":""},{"no":3,"name":"","url":"","id":"","code":""},{"no":4,"name":"","url":"","id":"","code":""},{"no":5,"name":"","url":"","id":"","code":""},{"no":6,"name":"","url":"","id":"","code":""},{"no":7,"name":"","url":"","id":"","code":""},{"no":8,"name":"","url":"","id":"","code":""},{"no":9,"name":"","url":"","id":"","code":""},{"no":10,"name":"","url":"","id":"","code":""}]}');
  return nldblog;
}

Với mỗi License Key sẽ là 1 object bao gồm như sau:

{"no":0,"name":"","url":"","id":"","code":""}

Trong đó no là số thứ tự, url là url của blog kích hoạt key, id là id của blog kích hoạt key, code đây sẽ là thông tin để tạo license key. Ví dụ 1 object như sau:

{"no":0,"name":"NLD Blog","url":"www.nldblog.com","id":"6311614170532925167","code":"nldblogcode"}

Bước 3: Sau đó các bạn chọn Deploy và chọn tiếp New deployment. Một popup sẽ hiện lên và tại cột Select type các bạn chọn vào hình bánh răng cưa và chọn Web app. Tại cột Configuration các bạn để như sau:

Xong các bạn chọn Deloy. Tiếp theo sẽ hiện URL của Web app các bạn hãy lưu lại vào notepad hay đâu đó.

Để thêm 1 object thông tin license key mới các bạn thêm hoặc sửa 1 object tương tự như trên và tại bước 3 các bạn chọn Deply và sau đó chọn Manage deployments. Tiếp đó 1 popup hiện nên tại cột Configuration các bạn chọn hình cây bút (Edit) sau đó tại mục Version các bạn chọn New version và bấm Deploy.

Vậy là xong phần Google Script.

Thêm code JavaScipt kiểm tra giấy phép vào template

Bước 1: Các bạn thêm đoạn code dưới đây vào sau thẻ <body>.

<script><b:eval expr='&quot;const blogID=&apos;&quot; + data:blog.blogId + &quot;&apos;;&quot;'/></script>

Bước 2: Tiếp tục thêm đoạn code dưới đây vào phía trước thẻ </body>.

<script>//<![CDATA[
    var licensekey = "licensekey";
//]]></script>

Đoạn code này sẽ public để nhận license key và licensekey ở đây sẽ thay thế bằng License Key các bạn tạo.

Bước 3: Thêm tiếp đoạn code dưới đây ngay phía dưới đoạn code vừa thêm ở bước 2.

<script>//<![CDATA[
    var e, s = "https://www.nldblog.com";
    function o() {
        window.alert("Invalid License Key"), document.body.innerHTML = "", window.location.href = s
    }
    try {
        e = atob(licensekey)
    } catch (e) {
        try {
            o()
        } catch (e) {
            window.location.href = s
        }
    }
    var n = e.split("-"),
        l = n[0];
    if (void 0 === (n = n[1])) try {
        o()
    } catch (e) {
        window.location.href = s
    }
    str = [n], getAJ({
        url: "Web app URL",
        async: !0,
        success: function (e) {
            var n = JSON.parse(e).user[str];
            if (void 0 === n) try {
                o()
            } catch (e) {
                window.location.href = s
            }
            var u = n.id,
                d = n.code,
                a = n.url;
            try {
                if (blogID + l === u + d && 0 != function (e) {
                        if (-1 == window.location.pathname.indexOf("/b/preview") && -1 == window.location.pathname.indexOf("/b/blog-preview")) return e == window.location.hostname
                    }(a)) return void console.log('Licensed to: ' + n.name + ', Licensed for: ' + n.url);
                try {
                    o()
                } catch (e) {
                    window.location.href = s
                }
            } catch (e) {
                try {
                    o()
                } catch (e) {
                    window.location.href = s
                }
            }
        }
    })
    function getAJ(e) {
        var r = new XMLHttpRequest;
        try {
            r = new XMLHttpRequest
        } catch (t) {
            try {
                r = new ActiveXObject("Msxml2.XMLHTTP")
            } catch (t) {
                try {
                    r = new ActiveXObject("Microsoft.XMLHTTP")
                } catch (t) {
                    return console.warn("Something went wrong!"), !1
                }
            }
        }
        r.onreadystatechange = function () {
            var n;
            4 == r.readyState && (200 == r.status ? (n = r.responseText, e.success(n)) : "function" == typeof e.error && e.error(r))
        }, r.open("GET", e.url, e.async), r.send()
    }
//]]></script>

Thay https://www.nldblog.com bằng URL sẽ chuyển hướng khi sai License Key và Web app URL bằng Web app URL mà mình đã bảo các bạn lưu lại vào notepad ở phần trước.

Và để tăng thêm bảo mật thì các bạn nên mã hoá đoạn JavaScript ở bên trong thẻ <script>//<![CDATA[ ... //]]></script> bằng một số công cụ sau hoặc tuỳ cách hoá của các bạn.

https://www.cleancss.com/javascript-obfuscate hoặc https://javascriptobfuscator.com/Javascript-Obfuscator.aspx các bạn có thể mã hoá nhiều lần để bảo mật cao hơn.

Vậy là xong, tiếp theo là cách để các bạn lấy License Key dạng mã base64.

Các tạo License Key

Ở phần Cách tạo Google Script chứa thông tin License Key thì mình đã nói một object gồm những thông tin như sau:

{"no":0,"name":"NLD Blog","url":"www.nldblog.com","id":"6311614170532925167","code":"nldblogcode"}

Thì ở đây License Key sẽ có cấu trúc bao gồm code-no ví dụ object ở trên License Key của mình sẽ là nldblogcode-0 chuyển sang dạng base64 nó sẽ thành bmxkYmxvZ2NvZGUtMA==.

Để chuyển License Key sang dạng base64 thì các bạn sử dụng công cụ sau Base64 Converter dán License Key dạng code-no vào và bấm Encode lúc này bạn sẽ nhận được 1 đoạn mã dạng base64. Để dịch ngược thì các bạn là tương tự rồi bấm Decode.

Kết luận

Vậy là xong, mình vừa hướng dẫn các bạn Cách tạo License Key cho template Blogger sử dụng JavaScript đơn giản để giúp bảo vệ template của các bạn khi bị người khác rip hoặc bán để tránh bị chia sẻ template. Nếu có vấn đề hay thắc mắc gì thì các bạn hãy comment xuống phía dưới mình sẽ giải đáp nếu có thể.

Cách chặn Click Tặc, Spam Click Google Adsense cho Blogger

2022-08-11T15:46:00.010+07:00

Chắc hẳn các bạn làm Blog cũng như Website ít nhiều đã và đang sử dụng Google Adsense để kiếm tiền, có một thuật ngữ chắc hẳn các bạn cũng không còn xa lạ đó là nhấp chuột không hợp lệ, nhấp chuột liên tiếp hay còn gọi là click tặc. Đây là có thể là một hoạt động có thể nói là phá hoại không đúng và gây bất lợi cho các nhà xuất bản.

Việc nhấp chuột liên tiếp vào một quảng cáo Adsense có tác động và là mối quan tâm của các nhà xuất bản về tính bảo mật của tài khoản Google Adsense. Khi nhấp chuật liên tiếp như vậy Google Adsense hiểu rằng bạn đang Spam nhằm mục đích chuộc lợi từ quảng cáo, trong một số trường hợp Google cũng hiểu rằng bạn đang bị phá, bị click tặc spam, bom click và Google Adsense sẽ xoá những lượt nhấp đó nhưng nó cũng ít nhiều ảnh hưởng đến Blog cũng như tài khoản của các bạn, để hạn chế tối đa việc đó thì việc thêm một đoạn Code để chặn Click Tặc, Spam Click là được khuyến khích để giảm thiểu ảnh hưởng.

Click tặc là gì?

Có thể các bạn không hiểu Click Tặc là gì đúng không?

Theo Google định nghĩa: Click tặc là những click không tạo ra giá trị cho nhà quảng cáo, hay còn gọi là click không hợp lệ. Click không hợp lệ bao gồm click tặc (click có chủ ý) và click vô tình (click không có chủ ý).

Click tặc là những click không đến từ những người thực sự tìm kiếm từ khóa mà có thể đến từ bot hoặc đối thủ. Đây được xem là hành động “chơi bẩn” của các đối thủ cùng với sự cạnh tranh không lành mạnh, nhằm thiêu đốt tiền quảng cáo của đối thủ để chiếm vị trí trong Adwords.

Cài đặt chặn Click Tặc, Spam Click Google Adsense

Các bạn vào Trang tổng quan Blogger > Nhấp vào menu Chủ đề > Chỉnh sửa HTML > Thêm đoạn CSS dưới đây vào trước thẻ ]]></b:skin>

.disabled{pointer-events:none}.hidden{display:none}

Tiếp theo, các bạn tìm đến thẻ </body> và chèn đoạn Code dưới đây vào phía trên nó.

<script>//<![CDATA[
	var disableAds = "disabled"; //Thay bằng hidden để ẩn toàn bộ quảng cáo, disabled để vô hiệu hoá click
	var maxClick = 3; //Số lượt click tối đa khi vượt quá sẽ ẩn hoặc chặn click quảng cáo
	var adsCookieEx = 1; //Cài đặt từ 1-24, thời gian người dùng được click trở lại
	function setCookie(a, b, c) {
	    if (c) {
	        var d = new Date();
	        d.setTime(d.getTime() + adsCookieEx * 3600 * 1000);
	        var e = ";expires=" + d.toGMTString()
	    } else {
	        var e = ""
	    }
	    document.cookie = a + "=" + b + e + ";path=/"
	}
	function getCookie(a) {
	    var b, c, d, e = document.cookie.split(";");
	    for (b = 0; b < e.length; b++)
	        if (c = e[b].substr(0, e[b].indexOf("=")), d = e[b].substr(e[b].indexOf("=") + 1), c = c.replace(/^\s+|\s+$/g, ""), c == a) return unescape(d)
	}
	function setCookieAds(a, b) {
	    var c = getCookie(a);
	    void 0 != c && "" != c ? (ASTheCookieInt = parseInt(c) + 1, setCookie(a, ASTheCookieInt.toString(), 0)) : setCookie(a, "1", b)
	}
	function maxClick(a, b) {
	    var c = getCookie(a);
	    return void 0 != c && parseInt(c) >= b ? !0 : !1
	}
	jQuery(document).ready(function (a) {
	    var b = "adsbygoogle",
	        c = 7,
	        d = maxClick,
	        e = ".adsbygoogle",
	        f = !1;
	    maxClick(b, d) && a(e).addClass(disableAds).click(false), a(e).bind("mouseover", function () {
	        f = !0
	    }).bind("mouseout", function () {
	        f = !1
	    }), a(window).on("beforeunload", function () {
	        f && (ASmaxClick(b, d) ? a(e).addClass(disableAds).click(false) : setCookieAds(b, c))
	    })
	});
//]]></script>

Các bạn để ý trên đoạn code trên có 1 class là .adsbygoogle đây là class trong thẻ <ins... quảng cáo của Google Adsense, các bạn cũng có thể thay bằng class trong code của những mạng quảng cáo khác.

Nếu Blog bạn chưa có thư viện JQuery thì thêm đoạn Code sau vào phía trên thẻ </head>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>

Phía trên là Code và Cách chặn Click Tặc, Spam Click Google Adsense cho Blogger mình tham khảo trên mạng, Blog mình chưa có quảng cáo nên mình cũng chưa áp dụng vào Blog mình nhưng mình đã thử và nó hoạt động rất ổn mình khuyên các bạn nên áp dụng cho Blog của mình.

Cách thêm lượt xem bài viết Blogger sử dụng JavaScript và Firebase

2022-08-06T10:15:00.040+07:00

Xin chào các bạn, sau nhiều bài chia sẻ template blogger thì bài này mình quay lại chia sẻ thủ thuật blogger vì hết template để chia sẻ rồi. Bài viết này mình sẽ chia sẻ cho các bạn cách thêm lượt xem bài viết Blogger sử dụng JavaScript và Firebase.

Bài hướng dẫn này sẽ không yêu cầu các bạn có nhiều kiến thức về HTML, CSS hoặc JS vì code mình chia sẻ đã có sẵn. Các bạn chỉ cần triển khai đúng theo hướng dẫn và chèn đúng cách trong template của các bạn là được. Các bạn có thể xem demo ngay tại Blog mình nhé!

Tạo Realtime Database và thêm Rules

Đầu tiên, chúng ta cần tạo một Firebase Project để thiết lập real-time database trong Firebase. Chúng ta có thể đồng bộ và chỉnh sửa nó theo giống số lượng view trên Blogger.

Để tạo Firebase Project và real-time database các bạn hãy tham khảo các bước sau:

Tạo Project trong Firebase

Bước 1: Các bạn vào Firebase Console.

Bước 2: Chọn vào Create a Project và nhập tên Project, các bạn cứ nhấn Continue để tiếp tục.

Bước 3: Các bạn hãy tắt Google Analytics và bấm vào Create Project.

Vậy là xong việc tạo Project trong Firebase, tiếp theo là cài đặt Realtime Database.

Cài đặt Realtime Database

Bước 1: Truy cập vào Firebase Console và chọn Project vừa tạo.

Bước 2: Tại menu bên trái truy cập vào Realtime Database.

Bước 3: Chọn vào Create Database, và chọn Next.

Bước 4: Tiếp tục chọn Locked Mode và nhấn vào Enable.

Vậy là chúng ta đã tạo xong Realtime Database, hãy copy lại đường dẫn như hình mình đánh dấu.

Thêm Rules vào Database

Tiếp theo chuyển qua tab RULES và các bạn thay thế toàn bộ code cũ bằng đoạn code như sau:

{
  "rules": {
    ".read": true,
    "BlogID_0000000000000000000": {
      ".read": true,
      "$post_id": {
        ".write": "newData.exists() && (data.exists() ? newData.val() == data.val() + 1 : newData.val() == 1)",
        ".validate": "newData.isNumber() && newData.val() % 1 === 0.0 && newData.val() <= 99999999"
      }
    }
  }
}

Sửa 0000000000000000000 thành Blog ID của các bạn nhé.

Sau đó nhấn chọn Publish để lưu lại đoạn code vừa thay.

Chỉnh sửa trong template

Bước 1: Các bạn chèn đoạn CSS sau vào trước thẻ ]]></b:skin>

<!--[ Realtime Post View Counter by NLD Blog]-->
.entry-views{color:#000;font-size:14px;visibility:hidden;opacity:0;transition:all .2s ease}
.entry-views[data-view]{visibility:visible;opacity:1}
.entry-views::after{content:attr(data-view) ' views'}

Bước 2: Thêm đoạn HTML sau để hiển thị lượt xem:

<span class='nld_view entry-views hidden' data-add='true' expr:data-id='data:post.id'/>

Ở đoạn data-add='true' các bạn sửa thành false nếu các bạn muốn hiển thị lượt xem tại các trang khác trang bài viết. Cụ thể true thì khi tải trang nó sẽ +1 lượt xem còn false thì khi tải lại trang nó sẽ không cộng thêm lượt xem mà nó chỉ hiển thị lượt xem đã có.

Bước 3: Tiếp theo chèn đoạn JavaScript dưới đây vào trước thẻ /body

<script>
  /*<![CDATA[*/
  /*! Realtime Post View Counter by NLD Blog */
  const viewSeting = {
      blogID: '0000000000000000000',
      databaseUrl: 'databaseUrl',
      abbreviation: true,
      lazyload: true
  }
  function loadJs(e, b, c, d) {
      let a = document.createElement("script");
      b && (a.id = b), a.async = c, a.defer = c, a.src = e, d && (a.onload = d), document.getElementsByTagName("head")[0].appendChild(a)
  }
  function abvr(a) {
      var b = Math.sign(Number(a));
      return 1e9 <= Math.abs(Number(a)) ? b * (Math.abs(Number(a)) / 1e9).toFixed(2) + "B" : 1e6 <= Math.abs(Number(a)) ? b * (Math.abs(Number(a)) / 1e6).toFixed(2) + "M" : 1e3 <= Math.abs(Number(a)) ? b * (Math.abs(Number(a)) / 1e3).toFixed(2) + "K" : Math.abs(Number(a))
  }
  function loadPostVw() {
      for (var c = document.querySelectorAll(".nld_view"), e = firebase.database(), a = 0; a < c.length; a++) {
          var d = c[a],
              b = d.getAttribute("data-id");
          (b = e.ref("BlogID_" + viewSeting.blogID + "/PostID_" + b)).once("value", function(a, b) {
              return function(c) {
                  0 < (c = c.exists() ? c.val() : 0) && (a.setAttribute("data-view", viewSeting.abbreviation ? abvr(c) : c), a.classList.remove("hidden")), "true" == a.getAttribute("data-add") && (a.setAttribute("data-add", !1), c = parseInt(c) + 1, b.set(c))
              }
          }(d, b))
      }
  }
  function postVw() {
      loadJs("https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js", "fb-app", !0, () => {
          loadJs("https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js", "fb-db", !0, () => {
              var a = {};
              a.databaseURL = viewSeting.databaseUrl, firebase.initializeApp(a), loadPostVw()
          })
      })
  }
  if (!0 === viewSeting.lazyload) {
      var a = [],
          b = [];
      let c = () => {
          0 == a.length && null == localStorage.getItem("LZ_VIEW") && (localStorage.setItem("LZ_VIEW", 1), postVw())
      };
      window.addEventListener("scroll", a => {
          (0 != document.documentElement.scrollTop && 0 == b.length || 0 != document.body.scrollTop && 0 == b.length) && c()
      }, !0), document.getElementsByTagName("body")[0].addEventListener("click", a => {
          c()
      }), localStorage.getItem("LZ_VIEW") && postVw()
  } else postVw()
  /*]]>*/
</script>

Bước này các bạn thay:
1. 0000000000000000000 giống với Blog ID ở trên phần Thêm Rules vào Database.
2. databaseUrl các bạn thay thành Realtime Database URL của các bạn mà mình đã bảo copy ở phần trên.
3. abbreviation có thể để là true hoặc false.
4. lazyload cũng tương tự true hoặc false.

Cuối cùng lưu lại và kiểm tra trên Blog của các bạn.

Như vậy chỉ vài bước đơn giản thôi là các bạn đã thêm được lượt xem bài viết trông rất chuyên nghiệp đúng không.

Cách tạo Progressive Web App (PWA) cho Blogger/Website

2022-07-09T12:54:00.104+07:00

Chào các bạn đến với NLD Blog. Đã bao giờ các bạn truy cập vào một Website hay một Blog và các bạn thấy hiện trên màn hình nút "Add To Home Screen" chưa? Nếu bạn đã thấy và đang muốn tìm cách để thêm nó vào Blog/Website của mình mà chưa biết cách thì bài viết này mình sẽ hướng dẫn các bạn Cách tạo Progressive Web App (PWA) cho Blogger/Website.

Cách tạo Progressive Web App (PWA) cho Blogger/Website

Trong bài viết này mình sẽ hướng dẫn các bạn cách xây dựng Progressive Web App hay còn gọi tắt là PWA một cách dễ ràng với Blogger.

Trước khi bắt đầu chúng ta hãy cũng nhau tìm hiểu một chút về Progressive Web App hay PWA là gì và nó quan trọng như thế nào đối với Website.

PWA là gì?

Progressive Web App (PWA) là sự kết hợp hoàn hảo giữa web và ứng dụng, giúp cho các ứng dụng sử dụng trên trang web có những tính năng như một ứng dụng thực sự.

Nhờ vào tính năng của service worker, manifest và https, PWA có thể hoạt động offline ngay cả khi không có mạng.

Bên cạnh đó, PWA còn hỗ trợ gửi những thông báo liên quan, góp phần tăng hiệu quả hoạt động marketing.

Tóm lại, PWA là ứng dụng có thể cung cấp những tính năng bổ sung dựa trên các thiết bị hỗ trợ, cung cấp khả năng ngoại tuyến, đẩy thông báo, có giao diện và tốc độ tương đương với ứng dụng Native và lưu trữ cục bộ các tài nguyên.

Tại sao PWAs lại quan trọng?

Mặc dù các ngôn ngữ lập trình như PHP, Java, Javascript cung cấp những bản cập nhật giúp tăng tốc rất nhiều. Nhưng những trang web được tạo ra vẫn có độ trễ và thời gian chờ đợi lên tới vài giây. Thậm chí hơn nếu có nhiều chức năng.

Với việc người dùng càng ngày càng thiếu kiên nhận, việc chờ đợi 3-5s (hiện nay là tốc độ cực kỳ tốt) cũng có thể sẽ không còn ưu thế trong 1 vài năm tới. Khi đó PWA sẽ nhanh chóng trở thành một giải pháp hàng đầu cho các lập trình viên web.

Bằng cách tạo ra sự kết hợp giữa trang web và ứng dụng di động, tận dụng được lợi thế tốc độ của PWA, các công ty này có thể sớm lôi kéo được khách hàng tốt hơn đối thủ.

Đúng thế, tạo ra một giải pháp giúp khách hàng truy cập nhanh với tốc độ gần bằng 0 thì tại sao khách hàng lại muốn truy cập trang web mà phải chờ đợi mỗi lần load chứ.

Thậm chí, tốc độ là yếu tố hàng đầu khi nói đến SEO, gia tăng chuyển đổi và tạo ra trải nghiệm người dùng tốt hơn. Sử dụng PWA bạn sẽ tạo ra được trải nghiệm "WOW" - Đây là thứ mà mọi lập trình viên đều muốn.

Làm thế nào để xây dựng PWA cho Blogger?

Dể xây dựng Progressive Web App, bạn cần phải thêm một số dịch vụ vào website của bạn. Các dịch vụ đó bao gồm: service workers, cho phép website hoạt động khi offline và thông báo đẩy. Bạn cũng có thể thêm thông báo Add-to-Home screen để nhắc người dùng thêm website hay ứng dụng của bạn vào màn hình điện thoại hoặc máy tính cá nhân.

Nghe thì có vẻ hơi khó hiểu và nó rất khó để thực hiện với Blogger, các bạn hãy chú ý và làm theo các bước hướng dẫn dưới đây thì các bạn có thể dễ dàng xây dựng được PWA cho Blogger.

Để tạo Progressive Web App cho Blogger yêu cầu bạn phải có một tên miền tùy chỉnh và sử dụng dịch vụ của Cloudflare. Đối với tên miền mặc định .blogspot.com thì bạn không thể thiết lập được service worker.

Yêu cầu

Để xây dựng PWA cho Blogger, có một số yêu cầu cần thiết để thiết lập như sau:

Bạn phải có một logo icon dạng .png với kích thước là 512x512.
5 ảnh chụp màn hình Blog của bạn dạng .png.
Có một tài khoản GitHub.
Có một tài khoản Cloudflare và tên miền của bạn phải được quản lý DNS ở đây.

Uploading Icons

Logo icon với định dạng .png kích thước 512x512, các bạn đổi tên nó thành android-icon-512x512.png.
Vào trang favicon-generator.org và upload icon lên.
Tại bộ favicon và icon vừa tạo và giải nén ra.
Xoá bỏ một số file không cần thiết như browserconfig.xml và manifest.json.
Vào Github và tạo một Repository, ví dụ như icon-nldblog và upload tất cả các file icon vào trong nhánh main.
*Bao gồm cả file android-icon-512x512.png.

Upload ảnh chụp màn hình

Lưu 5 ảnh chụp màn hình Blog của bạn dưới dạng .png.
Đổi tên các file theo thứ tự như sau: scr1.png, scr2.png, scr3.png, scr4.png, scr5.png
Tiếp tục upload 5 ảnh chụp màn hình vào nhánh main của GitHub Repository vừa tạo.

Tạo Workers trong Cloudflare

Chúng ta sẽ tạo 4 Workers trong Cloudflare, để dễ dàng hơn trong việc quản lý chúng ta lưu nó bằng tên worker và tên blog, như sau:
main-nldblog
manifest-nldblog
serviceworker-nldblog
offline-nldblog

Main Worker

Đăng nhập vào tài khoản Cloudflare của bạn.
Chọn vào Workers và chọn Manage Workers.
Chọn vào Create a Service và đặt tên cho nó như sau main-blogname, ví dụ: main-nldblog
Xoá bỏ đoạn Script có sẵn và thay thế bằng đoạn Script sau:

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event))
})

//const BUCKET_NAME = "main"
const BUCKET_URL = `https://cdn.statically.io/gh/ngylduy/icon-nldblog`

async function serveAsset(event) {
  const url = new URL(event.request.url)
  const cache = caches.default
  let response = await cache.match(event.request)

  if (!response) {
    response = await fetch(`${BUCKET_URL}${url.pathname}`)
    const headers = { "cache-control": "public, max-age=14400" }
    response = new Response(response.body, { ...response, headers })
    event.waitUntil(cache.put(event.request, response.clone()))
  }
  return response
}

async function handleRequest(event) {
  if (event.request.method === "GET") {
    let response = await serveAsset(event)
    if (response.status > 399) {
      response = new Response(response.statusText, { status: response.status })
    }
    return response
  } else {
    return new Response("Method not allowed", { status: 405 })
  }
}

Thay thế ngylduy bằng GitHub username của bạn và icon-nldblog bằng tên của bạn Repository
Nhấn vào Save and Deploy.

Manifest.json

Giống như cách tạo ở trên chúng ta tạo Service có tên như sau manifest-blogname.
Thay thế Script có sẵn bằng Script sau:

addEventListener("fetch", event => {
  const data = {
    name: "NLD BLOG",
    short_name: "NLD BLOG",
    description: "Install Now NLD BLOG App.",
    display: "standalone",
    prefer_related_applications: false,
    start_url: "\/?utm_source=homescreen",
    scope: "\/",
    background_color: "#2196f3",
    theme_color: "#2196f3",
    icons: [
      {
      src: "\/main\/android-icon-512x512.png",
      sizes: "512x512",
      type: "image\/png",
      density: "4.0",
      purpose: "any maskable"
      },
      {
      src: "\/main\/android-icon-192x192.png",
      sizes: "192x192",
      type: "image\/png",
      density: "4.0",
      purpose: "any maskable"
      },
      {
      src: "\/main\/apple-icon-144x144.png",
      sizes: "144x144",
      type: "image\/png",
      density: "3.0",
      purpose: "any maskable"
      },
      {
      src: "\/main\/android-icon-96x96.png",
      sizes: "96x96",
      type: "image\/png",
      density: "2.0",
      purpose: "any maskable"
      },
      {
      src: "\/main\/android-icon-72x72.png",
      sizes: "72x72",
      type: "image\/png",
      density: "1.5",
      purpose: "any maskable"
      },
      {
      src: "\/main\/android-icon-48x48.png",
      sizes: "48x48",
      type: "image\/png",
      density: "1.0",
      purpose: "any maskable"
      },
      {
      src: "\/main\/android-icon-36x36.png",
      sizes: "36x36",
      type: "image\/png",
      density: "0.75",
      purpose: "any maskable"
      }
    ],
    shortcuts: [
      {
      name: "NLD BLOG",
      short_name: "NLD BLOG",
      description: "The Best Website where you can find Blogger Widgets, Tech News, Tech Reviews, Coding related Tutorials and many more.",
      url: "\/?utm_source=homescreen",
      icons: [
          {
          src: "\/main\/android-icon-192x192.png",
          sizes: "192x192"
          }
        ]
      },
      {
      name: "NLD BLOG",
      short_name: "NLD BLOG",
      description: "Explore NLD BLOG.",
      url: "\/search?utm_source=homescreen",
      icons: [
          {
          src: "\/main\/android-icon-192x192.png",
          sizes: "192x192"
          }
        ]
      },
      {
      name: "Giao diện Blogspot",
      short_name: "Giao diện Blogspot",
      description: "Giao diện miễn phí cho Blogspot.",
      url: "\/search\/label\/theme-blogspot?utm_source=homescreen",
      icons: [
          {
          src: "\/main\/android-icon-192x192.png",
          sizes: "192x192"
          }
        ]
      }
    ],
    screenshots: [
      {
      src: "\/main\/scr1.png",
      type: "image\/png",
      sizes: "540x720"
      },
      {
      src: "\/main\/scr2.png",
      type: "image\/png",
      sizes: "540x720"
      },
      {
      src: "\/main\/scr3.png",
      type: "image\/png",
      sizes: "540x720"
      },
      {
      src: "\/main\/scr4.png",
      type: "image\/png",
      sizes: "540x720"
      },
      {
      src: "\/main\/scr5.png",
      type: "image\/png",
      sizes: "540x720"
      }
    ],
    serviceworker: {
      src: "\/sw.js"
    }
  }

  const json = JSON.stringify(data, null, 2)

  return event.respondWith(
    new Response(json, {
      headers: {
        "content-type": "application/json;charset=UTF-8"
      }
    })
  )
})

Thay thế những thông tin như tên và mã màu ở trên.
Nhấn vào Save and Deploy.

ServiceWorker

Như trên, tạo một Service tên như sau serviceworker-blogname.
Thay thế Script có sẵn bằng Script sau:

const js = `
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
if (workbox) {
workbox.core.skipWaiting();
workbox.core.clientsClaim();
workbox.core.setCacheNameDetails({
  prefix: 'thn-sw',
  suffix: 'v22',
  precache: 'install-time',
  runtime: 'run-time'
});

const FALLBACK_HTML_URL = '/offline.html';
const version = workbox.core.cacheNames.suffix;
workbox.precaching.precacheAndRoute([{url: FALLBACK_HTML_URL, revision: null},{url: '/manifest.json', revision: null},{url: '/main/favicon.ico', revision: null}]);

workbox.routing.setDefaultHandler(new workbox.strategies.NetworkOnly());

workbox.routing.registerRoute(
    new RegExp('.(?:css|js|png|gif|jpg|svg|ico)$'),
    new workbox.strategies.CacheFirst({
        cacheName: 'images-js-css-' + version,
        plugins: [
            new workbox.expiration.ExpirationPlugin({
                maxAgeSeconds: 60 * 24 * 60 * 60,
                maxEntries:200,
                purgeOnQuotaError: true
            })
        ],
    }),'GET'
);

workbox.routing.setCatchHandler(({event}) => {
      switch (event.request.destination) {
        case 'document':
        return caches.match(FALLBACK_HTML_URL);
      break;
      default:
        return Response.error();
  }
});

self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches
      .keys()
      .then(keys => keys.filter(key => !key.endsWith(version)))
      .then(keys => Promise.all(keys.map(key => caches.delete(key))))
  );
});

}
else {
    console.log('Oops! Workbox did not load');
}
`

async function handleRequest(request) {
  return new Response(js, {
    headers: {
      "content-type": "application/javascript;charset=UTF-8",
    },
  })
}

addEventListener("fetch", event => {
  return event.respondWith(handleRequest(event.request))
})

Sử dụng Workbox, chúng ta có thể lưu vào bộ đệm HTML, CSS, JS.
Nhấn vào Save and Deploy.

Offline

Vẫn như trên, chúng tạo một Service đặt tên là offline-blogname.
Thay thế Script có sẵn bằng Script sau:

const html = `<!DOCTYPE html>
<html>

<head>
  <!--[ Meta Tags ]-->
  <title>Oops, You're Offline!</title>
  <meta charset='UTF-8'/>
  <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0' name='viewport'/>
  <meta content='IE=edge' http-equiv='X-UA-Compatible'/>

  <!--[ Theme Color ]-->
  <meta content='#2196f3' name='theme-color'/>
  <meta content='#2196f3' name='msapplication-navbutton-color'/>
  <meta content='#2196f3' name='apple-mobile-web-app-status-bar-style'/>
  <meta content='true' name='apple-mobile-web-app-capable'/>

  <!--[ Favicon ]-->
  <link href='/main/apple-icon-120x120.png' rel='apple-touch-icon' sizes='120x120'/>
  <link href='/main/apple-icon-152x152.png' rel='apple-touch-icon' sizes='152x152'/>
  <link href='/main/favicon-32x32.png' rel='icon' sizes='32x32' type='image/png'/>
  <link href='/main/favicon-96x96.png' rel='icon' sizes='96x96' type='image/png'/>
  <link href='/main/favicon-16x16.png' rel='icon' sizes='16x16' type='image/png'/>
  <link href='/main/favicon.ico' rel='icon' type='image/x-icon'/>
  <link href='/main/favicon.ico' rel='shortcut icon' type='image/x-icon'/>

  <!--[ Stylesheet ]-->
  <style>/*<![CDATA[*/
/* Merriweather - Font */ @font-face{font-family: 'Merriweather'; font-style: italic; font-weight: 300; font-display: swap; src: local('Merriweather-LightItalic'), url(https://fonts.gstatic.com/s/merriweather/v22/u-4l0qyriQwlOrhSvowK_l5-eR7lXff4jvw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/merriweather/v22/u-4l0qyriQwlOrhSvowK_l5-eR7lXcf8.woff) format('woff')} @font-face{font-family: 'Merriweather'; font-style: italic; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/merriweather/v22/u-4l0qyriQwlOrhSvowK_l5-eR7NWPf4jvw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/merriweather/v22/u-4l0qyriQwlOrhSvowK_l5-eR71Wsf8.woff) format('woff')} @font-face{font-family: 'Merriweather'; font-style: italic; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/merriweather/v22/u-4l0qyriQwlOrhSvowK_l5-eR7NWPf4jvw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/merriweather/v22/u-4l0qyriQwlOrhSvowK_l5-eR7NWMf8.woff) format('woff')} @font-face{font-family: 'Merriweather'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/merriweather/v22/u-4n0qyriQwlOrhSvowK_l521wRZWMf6.woff2) format('woff2'), url(https://fonts.gstatic.com/s/merriweather/v22/u-4n0qyriQwlOrhSvowK_l521wRpXA.woff) format('woff')} @font-face{font-family: 'Merriweather'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/merriweather/v22/u-4n0qyriQwlOrhSvowK_l52xwNZWMf6.woff2) format('woff2'), url(https://fonts.gstatic.com/s/merriweather/v22/u-4n0qyriQwlOrhSvowK_l52xwNpXA.woff) format('woff')} @font-face{font-family: 'Merriweather'; font-style: normal; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/merriweather/v22/u-4n0qyriQwlOrhSvowK_l52_wFZWMf6.woff2) format('woff2'), url(https://fonts.gstatic.com/s/merriweather/v22/u-4n0qyriQwlOrhSvowK_l52_wFpXA.woff) format('woff')}
/* Content */ body{background:#f1f3f6;color:#1f1f1f;font-family:'Merriweather',serif;font-weight:400;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body:focus{outline:none !important} .mainCont{margin:0 auto;position:fixed;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;padding:15px} .noIntPop{position:relative;overflow:hidden;text-align:center;padding:15px;border-radius:30px;background:#f1f3f6;box-shadow:inset 0 0 15px rgba(55, 84, 170, 0), inset 0 0 20px rgba(255, 255, 255, 0), 7px 7px 15px rgba(55, 84, 170, 0.15), -7px -7px 20px white, inset 0px 0px 4px rgba(255, 255, 255, 0.2)} .circle.t{top:-150px;right:-150px} .circle.b{bottom:-150px;left:-150px} .noIntCont{position:relative;z-index:1} .noIntIcon{padding:30px} .noConHead{font-weight:700;font-size:1.3rem} .noConDesc{font-size:16px;line-height:1.4em;padding-top:20px;font-weight:400;opacity:.8} .cta,.relCont{display:flex;justify-content:center;align-items:center} .relCont{padding:30px} .cta{width:66px;height:66px;background:#f1f3f6;outline:none;border:none;border-radius:690px;box-shadow:inset 0 0 15px rgba(55, 84, 170, 0), inset 0 0 20px rgba(255, 255, 255, 0), 7px 7px 15px rgba(55, 84, 170, 0.15), -7px -7px 20px white, inset 0px 0px 4px rgba(255, 255, 255, 0.2);transition:box-shadow 399ms ease-in-out} .cta:hover{box-shadow:inset 7px 7px 15px rgba(55, 84, 170, 0.15), inset -7px -7px 20px white, 0px 0px 4px rgba(255, 255, 255, 0.2)} .icon{content:'';width:25px;height:25px;display:inline-block} .iconB{content:'';width:50px;height:50px;display:inline-block} .icon.reload{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239dabc0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg>") center / 25px no-repeat} .iconB.wifiOff{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1f1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='1' y1='1' x2='23' y2='23'/><path d='M16.72 11.06A10.94 10.94 0 0 1 19 12.55'/><path d='M5 12.55a10.94 10.94 0 0 1 5.17-2.39'/><path d='M10.71 5.05A16 16 0 0 1 22.58 9'/><path d='M1.42 9a15.91 15.91 0 0 1 4.7-2.88'/><path d='M8.53 16.11a6 6 0 0 1 6.95 0'/><line x1='12' y1='20' x2='12.01' y2='20'/></svg>") center / 50px no-repeat} .circle{position:absolute;z-index:1;width:280px;height:280px;border-radius:50%;background-color:#f1f3f6;box-shadow:inset 8px 8px 12px #d1d9e6, inset -8px -8px 12px #f9f9f9}
  /*]]>*/</style>
</head>

<body>
  <div class='mainCont notranslate'>
    <div class='noIntPop'>
      <div class='circle t'></div>
      <div class='circle b'></div>
      <div class='noIntCont'>
        <div class='noIntIcon'>
          <i class='iconB wifiOff'></i>
        </div>
        <div class='noConHead'>Oops, You're Offline!</div>
        <div class='noConDesc'>It looks like your network connection isn't working right now.</div>

        <div class='relCont'>
          <button class='cta' onclick='window.location.reload()'>
            <i class='icon reload'></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</body>

</html>`

async function handleRequest(request) {
  return new Response(html, {
    headers: {
      "content-type": "text/html;charset=UTF-8",
    },
  })
}

addEventListener("fetch", event => {
  return event.respondWith(handleRequest(event.request))
})

Thay thế một số thông tin ở trên.
Nhấn vào Save and Deploy.

Tạo Routes

Bây giờ chúng ta quay lại Workers và nhấn vào Add Route.
Nhập các thông tin như bảng sau:

Route	Service	Environment
www.nldblog.com/main/*	main-nldblog	production
www.nldblog.com/manifest.json	manifest-nldblog	production
www.nldblog.com/sw.js	serviceworker-nldblog	production
www.nldblog.com/offline.html	offline-nldblog	production

* Nhớ thay thế url blog của bản và tên các service của bạn như đã đặt ở các bước trên.

Bây giờ bạn hãy thư vào các đường dẫn sau
www.nldblog.com/main/android-icon-512x512.png
www.nldblog.com/manifest.json
www.nldblog.com/sw.js
www.nldblog.com/offline.html
Nếu truy cập được và không bị chuyển vào link 404 là OK.

Chỉnh sửa trong Blogger

Bây giờ truy cập vào Blogger và vào phần Giao diện.
Chỉnh sửa HTML.
Dán đoạn code dưới đây vào dưới thẻ <head>, một số theme là <head>. Nhớ kiểm tra và xoá bỏ những đoạn code cũ tương tự nếu có.

<link href='/main/apple-icon-57x57.png' rel='apple-touch-icon' sizes='57x57'/>
<link href='/main/apple-icon-60x60.png' rel='apple-touch-icon' sizes='60x60'/>
<link href='/main/apple-icon-72x72.png' rel='apple-touch-icon' sizes='72x72'/>
<link href='/main/apple-icon-76x76.png' rel='apple-touch-icon' sizes='76x76'/>
<link href='/main/apple-icon-114x114.png' rel='apple-touch-icon' sizes='114x114'/>
<link href='/main/apple-icon-120x120.png' rel='apple-touch-icon' sizes='120x120'/>
<link href='/main/apple-icon-114x114.png' rel='apple-touch-icon' sizes='144x144'/>
<link href='/main/apple-icon-152x152.png' rel='apple-touch-icon' sizes='152x152'/>
<link href='/main/apple-icon-180x180.png' rel='apple-touch-icon' sizes='180x180'/>
<link href='/main/android-icon-192x192.png' rel='icon' sizes='192x192' type='image/png'/>
<link href='/main/favicon-32x32.png' rel='icon' sizes='32x32' type='image/png'/>
<link href='/main/favicon-96x96.png' rel='icon' sizes='96x96' type='image/png'/>
<link href='/main/favicon-16x16.png' rel='icon' sizes='16x16' type='image/png'/>
<link href='/main/favicon.ico' rel='icon' type='image/x-icon'/>
<meta content='#2196f3' name='msapplication-TileColor'/>
<meta content='/main/ms-icon-144x144.png' name='msapplication-TileImage'/>
<meta content='#2196f3' name='theme-color'/>
<link href='/manifest.json' rel='manifest'/>

Dán tiếp đoạn JavaScript dưới đây vào trước thẻ </body>.

<script>/*<![CDATA[*/ /* Service Worker */ if('serviceWorker' in navigator){window.addEventListener('load',()=>{navigator.serviceWorker.register('/sw.js').then(registration=>{console.log('ServiceWorker registeration successful')}).catch(registrationError=>{console.log('ServiceWorker registration failed: ', registrationError)})})}; /*]]>*/</script>

Nhấp Lưu và xem kết quả.

Lời kết

Đây là toàn bộ cách xây dựng Progressive Web App cho Blogger, các bạn có thể xem demo bằng cách truy cập nldblog.com. Nếu có bất kì vấn đề và câu hỏi nào về bài viết hãy bình luận xuống bên dưới và mình sẽ giải đáp thắc mắc nhanh nhất có thể!

20 Mẹo và Thủ Thuật cho Thiết Kế và Phát Triển Blogger Template

2022-06-21T14:49:00.018+07:00

Xin chào các bạn, trong bài viết này mình sẽ chia sẻ cho các bạn 20 Mẹo và Thủ Thuật cho mọi người Thiết Kế và Phát Triển Blogger Template mà mình biết kể từ khi làm Blogspot cho các bạn để giúp các bạn có thêm kiến thức về Thiết Kế và Phát Triển giao diện hay template Blogger. Có những mẹo có thể rất ít người biết hoặc không để ý nhưng nó giúp ích rất nhiều cho các bạn.

Hãy cùng bắt đầu tìm hiểu về 20 Mẹo và Thủ Thuật mà mình nói để có thể giúp ích cho các bạn nhé!

Đảo ngược 1 vòng lặp

Các bạn có thể đạo ngược thứ tự 1 vòng lặp bằng cách thêm reverse='true' vào trong thẻ loop như sau:

<b:loop reverse='true' values='data:array' var='object'>
...
</b:loop>

Vô hiệu hoá hiển thị HTML Comment

Các bạn có thể tắt hay vô hiệu hoá hiển thị các comment HTML. Các comment sẽ chỉ hiển thị trong giao diện chỉnh sửa XML của Blogger nhưng không hiển thị trong HTML ở trang web khi bạn xem code. Để làm như vậy, các bạn cần thêm render='false' vào những thẻ comment như sau:

<b:comment render='false'>
        Your comment
</b:comment>

Tạo 1 Object tuỳ chỉnh và lấy giá trị của nó

Các bạn có thể tạo 1 Object tùy chỉnh và lấy các giá trị của nó như sau:

<b:with value='{item1: "Value", item2: "value"}' var='object'> <data:object.item1/> <data:object.item2/> </b:with>

Ẩn 1 widget hay tiện ích đang hoạt động.

Các bạn có thể ẩn bất kỳ tiện ích nào trên website của mình bằng cách thêm cond='false' như sau:

<b:widget cond='false' id='HTML1' type='HTML'>
...
</b:widget>

Tính toán các biểu thức toán học

Các bạn cũng có thể thực hiện các phép tính giá trị trong toán học và hiển thị ra kết quả của chúng như sau:

<b:eval expr='(10 + 3 ) * 2' />

Hiển thị Tiện Ích trên 1 Trang Cụ Thể:

Các bạn có thể ẩn hoặc hiển thị các tiện ích blogger cụ thể nào đó trên các trang blogger cụ thể. Ví dụ như:

<b:widget cond='data:view.isHomepage' id='HTML1' type='HTML'>
...
</b:widget>

isHomepage có nghĩa là tiện ích sẽ chỉ hiển thị tại trang chủ, các bạn có thể đọc thêm, Tìm hiểu về thẻ điều kiện và tổng hợp các thẻ điều kiện blogger/blogspot mới nhất.

Giới hạn độ dài của 1 chuỗi kí tự

Các bạn có thể giới hạn độ dài của chuỗi ký tự bất kỳ nào, đặc biệt khi các bạn tóm tắt 1 văn bản dài. Bạn có thể tạo các đoạn trích ngắn bằng cách giới hạn số ký tự như sau:

<b:eval expr='data:post.body snippet { length: 250 }'/>

Trong trường hợp này, chúng ta giới hạn 250 tự từ nội dung bài đăng.

Xem độ dài của 1 chuỗi ký tự

Chúng ta có thể tính toán độ dài của chuỗi ký tự trong blogger như sau:

<b:eval expr='data:view.title.length' />

Làm tròn kết quả của phép chia

Chúng ta có thể sử dụng một thủ thuật đơn giản như sau để làm trong một phép chia trong blogger.

<b:eval expr='(13 - (13 % 3)) / 3'/>

Hiển thị 1 giá trị của data trong HTML Comment

Có vẻ đơn giản nhưng các bạn có thể sử dụng bất kỳ thẻ XML nào của blogger bên trong thẻ nhận xét.

<b:comment render='true'>
    <data:view.title/>
</b:comment>

Giới hạn số vòng lặp trong thẻ loop

Các bạn có thể giới hạn số lần lặp trong một vòng lặp loop. Nói cách đơn giản, các bạn có thể giới hạn số lượng kết quả của một vòng lặp.

<b:loop values='data:array limit 4' var='object'>
...
</b:loop>

Đảo ngược giá trị của Boolean

Các bạn có thể đảo ngược giá trị của boolean trong trường hợp bạn muốn.

<b:eval expr='not true' />

Thay đổi định dạng hiển thị của ngày

Các bạn có thể sửa đổi hoặc thay đổi định dạng của ngày bằng thủ thuật sau:

<b:eval expr='format (data:post.date, "dd/MM/YYYY")' />

Thay đổi kích thước hoặc cắt hình ảnh

Các bạn có thể thay đổi kích thước hoặc cắt hình ảnh mặc định của blogger theo kích thước yêu cầu của các bạn như sau:

<img expr:src='resizeImage(data:view.featuredImage, 600, "16:9")' />

Thêm tham số vào đường dẫn URL

Các bạn có thể thêm tham số tùy chỉnh vào bất kỳ liên kết hoặc URL nào như sau:/p>

<a expr:href='data:view.url params { hl: "en" }'>
    LINK 
</a>

Hiển thị hoặc Ẩn Phần tử HTML theo điều kiện

Các bạn có thể hiển thị hoặc ẩn phần tử HTML dựa trên các điều kiện.

<b: tag cond='data:view.ispost' name='div'> </b: tag>

Tạo một thẻ động

Thẻ động ở đây có nghĩa là thẻ tag đó sẽ thay đổi khi hiển thị tại các trang điều kiện khác nhau. Các bạn có thể tự quyết định có thêm thẻ HTML đó hay không.

<b:tag expr:name='data:view.isSingleItem ? "h1" : "h2"> </b:tag>

Xác định giá trị mặc định nếu dữ liệu không tồn tại

Các bạn có thể xác định giá trị mặc định của riêng mình nếu không có dữ liệu trong một object.

<b:eval expr='data:foo ?: "default value" />

Lấy thuộc tính đầu tiên từ một Mảng mà không cần sử dụng Vòng lặp

Nếu các bạn chỉ muốn lấy thuộc tính hay phần tử đầu tiên của một mảng thì bạn không cần sử dụng vòng lặp.

<b:with value='data:posts first' var='post'>
    <data:post.title/>
    <data:post.body />
</b:with>

Tắt hay xoá bỏ CSS và JS mặc định của Blogger

Nếu CSS hay JavaScript mặc định của Blogger làm cho website của bạn load chậm hay là nó gây ra sung đột khi bạn thiết kế template thì các bạn có thể xoá đi bằng các sử dụng các thuộc tính b:css cho CSS và b:js cho JavaScript như sau:

<html b:css='false' b:js='false'>
...
</html>

Lời kết

Đó là tất cả, mình nghĩ những mẹp và thủ thuật này sẽ giúp các bạn cỏ thể tạo một template blogger chuyên nghiệp và hiệu quả hơn. Nếu có thằng mắc gì các bạn đừng ngại comment xuống phía dưới mình sẽ giải đáp nhanh nhất nếu có thể.

{fullwidth}

Tạo Accordion sử dụng code HTML, CSS và JavaScript cho Website/Blog

2022-05-31T14:58:00.021+07:00

Chào các bạn đã quay lại với Blog chia sẻ thủ thuật, hôm nay trong bài viết này mình sẽ chia sẻ cho các bạn cách tạo Accordion sử dụng code HTML, CSS và JavaScript có Responsive. Bài viết gần đây về chia sẻ code của mình là Code hiệu ứng chữ đánh máy đẹp cho Blog sử dụng HTML CSS và JavaScript các bạn có thể đọc thêm tham khảo!

Accordion là dạng tiêu đề mô tả với chức năng mở và đóng mô tả.

Về cơ bản, mô tả của accordion ở trạng thái ẩn và chúng ta phải nhấp vào phần tiêu đề để hiện mô tả. Mỗi tiêu đề của accordion có mô tả riêng. Accordion có thể được chứa nhiều nội dung văn bản khác nhau, ví dụ như Câu hỏi thường gặp.

Tạo Accordion sử dụng code HTML, CSS và JavaScript cho Website/Blog

Sau đây là source code Tạo Accordion sử dụng code HTML, CSS và JavaScript cho Website/Blog, mình sẽ chia sẻ code HTML và JavaScript là chính còn CSS thì mình sẽ chỉ để ở mức độ tham khảo và các bạn cần phải chỉnh sử CSS hay tuỳ biến cho phù hợn với Blog của các bạn.

HTML Code:

<div class="accordion">
  <div class="accordion-content">
    <div class="a-header">
      <span class="a-title">What do you mean by Accordion?</span>
      <i class="fa-solid fa-plus"></i>
    </div>

    <p class="a-description">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem?
    </p>
  </div>
  <div class="accordion-content">
    <div class="a-header">
      <span class="a-title">What do you mean by Accordion?</span>
      <i class="fa-solid fa-plus"></i>
    </div>

    <p class="a-description">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem?
    </p>
  </div>
  <div class="accordion-content">
    <div class="a-header">
      <span class="a-title">What do you mean by Accordion?</span>
      <i class="fa-solid fa-plus"></i>
    </div>

    <p class="a-description">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem?
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto neque, sed inventore illum ut quis ducimus deleniti temporibus maiores? At nisi sed pariatur cupiditate quidem quod adipisci aut, eos quis minima voluptates non veniam ipsam quasi architecto ducimus error eum id ab, suscipit doloribus, ut accusantium consequuntur voluptate! Unde, hic sed rerum officia totam id libero officiis nihil rem sequi porro labore praesentium repudiandae a blanditiis molestias nisi beatae natus! Ea, ut voluptates, natus harum nesciunt odio hic eveniet reprehenderit veritatis, possimus tempora magni soluta eaque quidem neque maxime nostrum sapiente commodi? Earum ex cumque cupiditate dicta, tempora temporibus quaerat.
    </p>
  </div>
  <div class="accordion-content">
    <div class="a-header">
      <span class="a-title">What do you mean by Accordion?</span>
      <i class="fa-solid fa-plus"></i>
    </div>

    <p class="a-description">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem?
    </p>
  </div>
</div>

CSS Code chèn vào trước thẻ </head>

<style>/*<![CDATA[*/
  .accordion .accordion-content{margin:10px 0;border-radius:4px;background:#FFF7F0;border:1px solid #FFD6B3;overflow:hidden}
  .accordion-content:nth-child(2){background-color:#F0FAFF;border-color:#CEF}
  .accordion-content:nth-child(3){background-color:#FFF0F3;border-color:#FFCCD6}
  .accordion-content:nth-child(4){background-color:#F0F0FF;border-color:#CCF}
  .accordion-content.open{padding-bottom:10px}
  .accordion-content .a-header{display:flex;min-height:50px;padding:0 15px;cursor:pointer;align-items:center;justify-content:space-between;transition:all .2s linear}
  .accordion-content.open .a-header{min-height:35px}
  .accordion-content .a-header .a-title{font-size:14px;font-weight:500;color:#333}
  .accordion-content .a-header i{font-size:15px;color:#333}
  .accordion-content .a-description{height:0;margin:0!important;font-size:12px;color:#333;font-weight:400;padding:0 15px;transition:all .2s linear}
/*]]>*/</style>

Thêm thư viện font awesome vào trước thẻ </head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/>

JavaScript Code chèn vào trước thẻ </body>

<script>//<![CDATA[
  const accordionContent = document.querySelectorAll(".accordion-content");

  accordionContent.forEach((item, index) => {
    let header = item.querySelector(".a-header");
    header.addEventListener("click", () =>{
      item.classList.toggle("open");

      let description = item.querySelector(".a-description");
      if(item.classList.contains("open")){
        description.style.height = `${description.scrollHeight}px`;
        item.querySelector("i").classList.replace("fa-plus", "fa-minus");
      }else{
        description.style.height = "0px";
        item.querySelector("i").classList.replace("fa-minus", "fa-plus");
      }
      removeOpen(index);
    })
  })

  function removeOpen(index1){
    accordionContent.forEach((item2, index2) => {
      if(index1 != index2){
        item2.classList.remove("open");

        let des = item2.querySelector(".a-description");
        des.style.height = "0px";
        item2.querySelector("i").classList.replace("fa-minus", "fa-plus");
      }
    })
  }
//]]></script>

Lời kết

Thế là mình đã chia sẻ xong cho các bạn Tạo Accordion sử dụng code HTML, CSS và JavaScript cho Website/Blog. Các bạn có vấn đề gì liên quan đến code trong bài viết thì có thể comment xuống dưới mình sẽ hỗ trợ nhanh nhất. Các bạn xem demo code dưới đây nhé:

What do you mean by Accordion?

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto neque, sed inventore illum ut quis ducimus deleniti temporibus maiores? At nisi sed pariatur cupiditate quidem quod adipisci aut, eos quis minima voluptates non veniam ipsam quasi architecto ducimus error eum id ab, suscipit doloribus, ut accusantium consequuntur voluptate! Unde, hic sed rerum officia totam id libero officiis nihil rem sequi porro labore praesentium repudiandae a blanditiis molestias nisi beatae natus! Ea, ut voluptates, natus harum nesciunt odio hic eveniet reprehenderit veritatis, possimus tempora magni soluta eaque quidem neque maxime nostrum sapiente commodi? Earum ex cumque cupiditate dicta, tempora temporibus quaerat.

What do you mean by Accordion?

{featureimage}

Code hiệu ứng chữ đánh máy đẹp cho Blog sử dụng HTML CSS và JavaScript

2022-04-07T15:42:00.014+07:00

Chào các bạn đến với Blog của mình, trong bài viết ngày hôm nay thì mình sẽ chia sẻ cho các bạn code hiệu ứng chữ đánh máy đẹp cho Blog sử dụng HTML CSS và JavaScript. Các bạn có thể xem demo như ảnh bên dưới và ở cuối bài viết.

Typing text animation hay còn gọi là hiệu ứng gõ văn bản hay chữ đánh máy có nghĩa là văn bản thay đổi tự động giống như hiệu ứng chữ đánh máy và như việc xoá đi rồi đánh lại văn bản.

Code hiệu ứng chữ đánh máy

Bước 1: Các bạn truy cập vào trang chỉnh sửa HTML của Blogger.

Bước 2: Thêm đoạn HTML hiển thị văn bản dạng như sau:

<span class="text first-text">I'm a</span>
<span class="text sec-text">Freelancer</span>

Trong đó:

first-text là văn bản sẽ không thay đổi.
sec-text là văn bản sẽ thay đổi và có hiệu ứng chữ đánh máy

Bước 3: Thêm đoạn JavaScipt sau vào trước thẻ </body>.

<script>//<![CDATA[
        const text = document.querySelector(".sec-text");
        const textLoad = () => {
            setTimeout(() => {
                text.textContent = "Freelancer";
            }, 0);
            setTimeout(() => {
                text.textContent = "Blogger";
            }, 4000);
            setTimeout(() => {
                text.textContent = "YouTuber";
            }, 8000); //1s = 1000 milliseconds
        }
        textLoad();
        setInterval(textLoad, 12000);
//]]></script>

Thay thế nội dung trong đoạn text.textContent bằng nội dung đánh máy sẽ thay đổi. Các bạn có thể thêm nhiều chữ hơn bằng cách nhân bản hàm setTimeout và trong đó 1 giây sẽ bằng 1000 mili giây và khoảng các là 4 giây.

Bước 4: Thêm đoạn CSS sau vào trước thẻ </head>

<style>/* <![CDATA[ */
.text{position:relative;font-size:30px;font-weight:600}
.text.first-text{color:#333}
.text.sec-text{color:#4070F4}
.text.sec-text:before{content:"";position:absolute;top:0;left:0;height:100%;width:100%;background-color:#ffffff;border-left:2px solid #4070F4;animation:animate 4s steps(12) infinite}
@keyframes animate{40%,60%{left:calc(100% + 4px)}100%{left:0%}}
/* ]]> */</style>

Trong đó:

color:#333 là màu văn bản hiển thị
color:#4070F4 là màu văn và con trỏ đánh máy
background-color:#ffffff là màu nền giống với mày backgroud nền chứa văn bản

Bước 5: Bấm lưu lại.

Lời kết

Vậy là vừa rồi mình đã chia sẻ cho các bạn Code hiệu ứng chữ đánh máy đẹp cho Blog sử dụng HTML CSS và JavaScript trong quá trình thực hiện có vấn đề gì các bạn có thể comment phía bên dưới mình sẽ hỗ trợ. Các bạn có thể xem demo dưới đây.

I'm a Freelancer

Chia sẻ code công cụ tạo QR Code sử dụng HTML, CSS và JavaScript

2022-04-01T15:45:00.006+07:00

Chào các bạn, bài viết hôm nay mình sẽ chia sẻ cho các bạn code công cụ tạo QR Code sử dụng HTML, CSS và JavaScript. Trong bài viết gần đây nhất trên Blog thì mình có chia sẻ Cách thêm Lazy Load quảng cáo Google Adsense cho Blog và Mức độ quan trọng của dấu ngắt trang jumb break và số bài đăng tối đa hiển thị tại trang chỉ mục các bạn có thể đọc nếu các bạn bỏ qua.

Mã QR viết tắt của Quick Response có khả năng lưu trữ nhiều dữ liệu và người dùng có thể dễ dàng truy cập thông tin bằng cách quét mã QR. Trong bài viết này code công cụ tạo QR Code người dùng có thể nhập văn bản hoặc URL để chuyển và tạo mã QR cho nó, để đọc được mã QR thì các bạn cần phải có phần mềm đọc mã hoặc là cộng cụ máy đọc mã QR.

Chia sẻ code công cụ tạo QR Code sử dụng HTML, CSS và JavaScript

Sau đây là source code của công cụ tạo QR Code, mình sẽ chia sẻ code HTML và JavaScript là chính còn CSS thì mình sẽ chỉ để ở mức độ tham khảo và các bạn cần phải chỉnh sử CSS hay tuỳ biến cho phù hợn với Blog của các bạn.

HTML Code chèn vào vị trí bạn muốn hiển thị.

<div class="qr-wrapper">
  <div class="qr-header">
    <h4>QR Code Generator</h4>
    <p>Paste a url or enter text to create QR code</p>
  </div>
  <div class="qr-form">
    <input type="qr-text" spellcheck="false" placeholder="Enter text or url">
    <button class="qr-button">Generate QR Code</button>
  </div>
  <div class="qr-code">
    <img src="" alt="qr-code">
  </div>
</div>

CSS Code(tham khảo) chèn vào trước thẻ </head>

<style>/* <![CDATA[ */
.qr-wrapper{max-width:100%;background:#fff;border-radius:7px;padding:15px;transition:height .2s ease}
.qr-header h4{font-size:21px;font-weight:500}
.qr-header p{margin-top:5px;color:#575757;font-size:16px}
.qr-wrapper .qr-form{margin:20px 0 25px}
.qr-form :where(input,button){width:100%;height:55px;border:none;outline:none;border-radius:5px;transition:.1s ease}
.qr-form input{font-size:18px;padding:0 17px;border:1px solid #eee;transition:.2s ease}
.qr-form input:focus{border:1px solid #7577a9}
.qr-form input::placeholder{color:#999}
.qr-form button{color:#fff;cursor:pointer;margin-top:20px;font-size:17px;background:#7577a9}
.qr-code{opacity:0;display:none;padding:33px 0;border-radius:5px;align-items:center;pointer-events:none;justify-content:center;border:1px solid #ccc}
.qr-wrapper.active .qr-code{opacity:1;display:flex;pointer-events:auto;transition:opacity .5s .05s ease}
.qr-code img{width:170px}
@media (max-width: 430px) {
.qr-header p{color:#696969}
.qr-form :where(input,button){height:52px}
.qr-code img{width:160px}
}
/* ]]> */</style>

JavaScript Code chèn vào trước thẻ </body>

<script>//<![CDATA[
  const qrWrapper = document.querySelector(".qr-wrapper"),
qrInput = qrWrapper.querySelector(".qr-form input"),
generateBtn = qrWrapper.querySelector(".qr-form button"),
qrImg = qrWrapper.querySelector(".qr-code img");
let preValue;
generateBtn.addEventListener("click", () => {
    let qrValue = qrInput.value.trim();
    if(!qrValue || preValue === qrValue) return;
    preValue = qrValue;
    generateBtn.innerText = "Generating QR Code...";
    qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrValue}`;
    qrImg.addEventListener("load", () => {
        qrWrapper.classList.add("active");
        generateBtn.innerText = "Generate QR Code";
    });
});

qrInput.addEventListener("keyup", () => {
    if(!qrInput.value.trim()) {
        qrWrapper.classList.remove("active");
        preValue = "";
    }
});
//]]></script>

Lời kết

Thế là xong toàn bộ code để tạo công cụ tạo QR Code sử dụng HTML, CSS và JavaScrip mình đã chia sẻ ở trên. Các bạn có vấn đề gì liên quan đến code trong bài viết thì có thể comment xuống dưới mình sẽ hỗ trợ nhanh nhất. Và các bạn cũng có thể sử dụng thử công cụ demo ở bên dưới đây:

QR Code Generator

Paste a url or enter text to create QR code

Mức độ quan trọng của dấu ngắt trang và số bài đăng tối đa tại trang chỉ mục

2022-03-30T23:44:00.020+07:00

Có thể bạn chưa biết về giới hạn số bài đăng tối đa có thể hiển thị được tại một trang thuộc nhóm trang chỉ mục trong Blogger. Nếu blog bạn thuộc loại trang xuất bản bài đăng thường xuyên hàng ngày lúc đó tổng số bài đăng sẽ rất lớn lên đến con số hàng ngàn, hàng chục ngàn và nhiều hơn nữa.

Phân loại trang chỉ mục (index)

Page Type: URL

Trang chủ: /
Trang các bài đăng cũ hơn: /search
Trang label: /search/label/LABEL hoặc /search?label=LABEL
Trang tìm kiếm kết quả: /search?q=từ+khóa
Trang lưu trữ: /year/month hoặc /year

Các tham số được sử dụng theo sau url cho loại trang này

updated-max: Thời gian xuất bản (định dạng iso8601) bài đăng cuối cùng của trang trước. Ví dụ trang chủ hiển thị 10 bài đăng thì mốc thời gian cho trang tiếp theo (các bài đăng cũ hơn) được lấy từ bài đăng thứ 10 chẳng hạn bài đăng đó có thời gian xuất bản "2019-12-23T03:11:00-08:00" => thời gian cho các bài đăng tiếp theo /search?updated-max=2019-12-23T03:11:00-08:00

max-results: Số mục hay các bài đăng tối đa cho một trang, lưu ý tham số này hiện không áp dụng với trang lưu trữ vì Blogger đã bỏ nó từ 2017

start: Bài đầu từ bài đăng thứ mấy tương tự như start-index của url nguồn cấp nhưng có khác biệt nhỏ hơn một số, ví dụ để bắt đầu lấy dữ liệu cho các bài đăng thứ 11 trở đi nếu sử dụng url nguồn cấp thì sử dụng tham số "start-index=11" nhưng nếu sử dụng url trực tiếp sẽ nhỏ hơn một số "start=10", chẳng hạn hiển thị 10 bài đăng tiếp theo url blog có dạng: "/search?updated-max=2019-12-23T03:11:00-08:00&max-results=10&start=10". Tương tự như max-results, tham số start không áp dụng với trang lưu trữ và không bắt buộc sử dụng với trang các bài đăng cũ hơn, trang label nhưng riêng với trang tìm kiếm kết quả bắt buộc phải có mới hiển thị đúng số chỉ mục.

Có thể bạn chưa biết: áp dụng khi tìm kiếm bài viết phạm vi trong một nhãn hoặc nhiều nhãn

Hiển thị các bài đăng cho nhiều nhãn: /search/?q=label:LABEL1|label:LABEL2|label:LABEL3
Hiển thị các bài đăng theo từ khóa tìm kiếm: /search/?q=từ+khóa%20label:LABEL1|label:LABEL2|label:LABEL3

Giới hạn tối đa số bài đăng của mỗi trang

Tại các trang không phải trang chủ mặc định luôn là 20 nếu theo sau URL trang không có tham số max-results với giá trị rõ ràng. Nếu URL trang được thêm tham số max-results thì con số tối đa mà trang tải hiển thị sô bài là 500.

Cả khi có hoặc không có tham số max-results thì kích thước của tồng số bài đăng cũng không được vượt quá 1000 kilobytes (1 Mb). Như vậy các bạn đã hiểu vì sao số bài đăng bị thiếu không hiển thị chính xác.

Tầm quan trọng của jumb break

Jumb break hay dấu ngắt nhảy là biểu tượng trang trên thanh công cụ soạn thảo bài viết, biểu tượng chỉ có bên khung Viết còn bên khung HTML chèn bằng dấu , có tác dụng ngắt (không tải) nội dung đằng sau nó.

Nút jumb break trên thanh công cụ

Jumb break nên được chèn sau vài dòng văn bản trên đầu bài viết và không được chèn sau ảnh vì sẽ làm tăng kích thước trang

Dấu ngắt nhảy chèn sau vài dòng đầu bài

Đoạn văn bản bên trên dấu ngắt nhảy được lấy làm đoạn trích tóm tắt của mỗi bài bên ngoài trang chỉ mục. Khi trích xuất HTML bài viết, dấu ngắt nhảy được trích xuất thành liên kết <a name="more"></a>

Nếu cạnh đoạn trích mà có liên kết Đọc thêm đó là trong theme đang sử dụng thẻ dữ liệu cho liên kết đọc thêm

<a expr:href='data:post.hasJumpLink ? data:post.url.canonical fragment "more" : data:post.url.canonical' expr:title='data:post.title'>
  <data:blog.jumpLinkMessage/>
</a>

Thẻ dữ liệu văn bản <data:blog.jumpLinkMessage/> được lấy từ cấu hình tiện ích Bài đăng trên Blog

Định cấu hình tiện ích Bài đăng trên Blog

Khi trang được tải căn cứ vào giá trị number của tham số max-results sẽ tải hết số bài đăng nhưng không vượt quá 500 và kích thước 1 Mb. Nếu một hoặc nhiều bài đăng không chèn dấu ngắt nhảy, trang sẽ tải luôn nội dung của bài dẫn đến kích thước trang tăng lên và số bài hiển thị đằng sau của bài đó ít đi

Ngoài ra Jumb break còn liên quan đến nguồn cấp dữ liệu cho phép quản trị cài đặt cho phép nguồn cấp dữ liệu blog cho đến dấu ngắt để URL nguồn cấp feeds chỉ tải đoạn trích bên trên dấu ngắt tăng tốc độ tải và tránh bị đánh cắp toàn bộ dữ liệu của tất cả bài đăng.

Cho phép nguồn cấp dữ liệu blog cho đến dấu ngắt

Cách thêm Lazy Load quảng cáo Google Adsense cho Blog

2022-03-30T19:56:00.006+07:00

Chắc hẳn các bạn đang sử dụng Google Adsense để phân phát quảng cáo trên Blog để kiếm tiền đều biết một điều rằng khi gắn quảng cáo Google Adsense nên Blog nó khiến cho Blog của bạn tải trang chậm đi nếu không muốn nói là rất chậm. Bài viết này mình sẽ chia sẻ cho các bạn cách tối ưu và giúp Blog của bạn tải nhanh hơn khi gắn quảng cáo của Google Adsense và cách mình muốn chia sẻ ở bài viết này là sử dụng Lazy Load. Vậy đầu tiên Lazy Load là gì?

Lazy Load là gì?

Lazy load hay lazy loading là 1 kĩ thuật tối ưu khi làm web, thay vì tải toàn bộ trang web và render ngay từ đầu, kỹ thuật này cho phép tải ngay các thành phần cần thiết để hiển thị tới người dùng và trì hoãn các tài nguyên còn lại cho đến khi cần.

Ưu điểm của Lazy Loading

Cải thiện trải nghiệm người dùng.
Nâng cao website performance.
Tiết kiệm tài nguyên.
Gia tăng điểm số đánh giá website.

Google cũng luôn khuyên các nhà xuất bản cải thiện tốc đọ tải trang nhanh hơn. Họ luôn phát triển nhiều công cụ và bài viết để giúp các nhà xuất bản cải thiện tốc độ trang web. Để cải thiện tốc độ của trang web, Google khuyên bạn nên Lazy Loading để hạn chế những hình ảnh không xuất hiện tại màn hình đầu tiên.

Cách thêm Lazy Load quảng cáo Google Adsense cho Blog

Tiếp theo đến với vấn đề chính mình sẽ hướng dẫn hay chia sẻ cho các bạn thêm đoạn code Lazy Load cho Google Adsense để giúp Blog của bạn tải nhanh hơn.

Bước 1: Các bạn truy cập vào trang chỉnh sửa HTML của Blogger.

Bước 2: Tìm và xoá thẻ script của Google Adsense đi, code có dạng:

<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'><script>

Bước 3: Copy và dán đoạn JavaScript bên dưới vào phía trước thẻ </body>.

<script>//<![CDATA[ 
window.addEventListener("scroll", function() {
    var adsenseCodehay = document.createElement("script");
    adsenseCodehay.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
    adsenseCodehay.async = true;
    adsenseCodehay.setAttribute('crossorigin', 'anonymous');
    adsenseCodehay.setAttribute('data-ad-client', 'ca-pub-xxxxxxxxxxxxxxxxx');
    document.body.appendChild(adsenseCodehay);
}, true);
//]]></script>

Bước 4: Thay ca-pub-xxxxxxxxxxxxxxxxx bằng AdSense Publisher ID của bạn.

Bước 5: Bấm lưu và kiểm tra Blog của bạn.

Lời kết

Vậy là xong, mình vừa chia sẻ cho các bạn Cách thêm Lazy Load quảng cáo Google Adsense cho Blog. Nếu có vấn đề gì khi thực hiện hay lỗi gì các bạn có thể comment xuống phía bên dưới bài viết mình sẽ hỗ trợ các bạn!

Cách thêm quảng cáo cố định dưới góc màn hình giống Google Adsense

2022-03-29T17:03:00.040+07:00

Chắc hẳn ít nhiều các bạn đã và đang kiếm tiền bằng cách hiển thị quảng cáo trên Blog của mình đều đã biết đến một mạng quảng cáo uy tín và chất lượng đó là Google Adsense. Ở Google Adsense thì chắc chắn các bạn đều biết đến quảng cáo tự động.

Quảng cáo tự động giúp bạn kiếm tiền từ nội dung của mình một cách đơn giản và sáng tạo. Với Quảng cáo tự động, bạn chỉ cần đặt một đoạn mã trên tất cả các trang trong trang web của mình. Sau đó, Quảng cáo tự động sẽ quét trang web và tự động đặt quảng cáo ở những nơi quảng cáo có khả năng hoạt động hiệu quả và có tiềm năng tăng doanh thu.

Về lợi ích của quảng cáo tự động thì có rất nhiều như: có thể giúp bạn tăng doanh thu, dễ sử dụng, cho phép điều chỉnh quảng cáo để phù hợp với trang web và thân thiện với thiết bị di động. Nhắc đến thân thiện với thiết bị di động thì có một loại quảng cáo rất phổ biến đó là quảng cáo cố định ở dưới góc màn hình.

Hướng dẫn thêm quảng cáo cố định ở dưới góc màn hình giống Google Adsense cho Blog

Bước 1: Vào chỉnh sửa HTML của Chủ đề và chèn đoạn code CSS dưới đây vào trước thẻ </head>

<style>/* <![CDATA[ */
.stickyads-bottom{position:fixed;bottom:0;left:0;right:0;min-height:70px;max-height:200px;padding:5px;box-shadow:0 -6px 18px 0 rgba(9,32,76,.1);transition:all .1s ease;display:flex;align-items:center;justify-content:center;background:#fffdfc;z-index:100;border-top:1px solid #e6e6e6}
.stickyads-close{width:40px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:12px 0 0;border:1px solid #e6e6e6;border-bottom:0;border-right:0;position:absolute;right:0;top:-30px;background:inherit;cursor:pointer}
.stickyads-close::after{content:'✕';line-height:18px;font-size:14px}
.stickyads-content{flex-grow:1;overflow:hidden;display:block;position:relative}
.stickyads-input:checked ~ .stickyads-bottom{padding:0;min-height:0}
.stickyads-input:checked ~ .stickyads-bottom .stickyads-content{display:none}
.hidden{display:none}
.stickyads-ncontent{min-height:70px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#989b9f ;border:1px solid #e6e6e6 ;border-radius:3px} 
.stickyads-ncontent::before{content:attr(data-text)}
/* ]]> */</style>

Bước 2: Tiếp tục tiềm đến thẻ </body> và chèn đoạn code HTML dưới đây vào phía trước thẻ </body>

<b:if cond='data:blog.isMobileRequest'>
<input class='stickyads-input hidden' id='stickyadsInput' type='checkbox'/>
<div class='stickyads-bottom'>
  <label aria-label='Close Menu' class='stickyads-close' for='stickyadsInput'/>
  <div class='stickyads-content'>
	<div class='stickyads-ncontent' data-text='Quảng cáo ở đây'/>
  </div>
</div>
</b:if>

Bước 3: Thay quảng cáo của bạn với thẻ <div class='stickyads-ncontent' data-text='Quảng cáo ở đây'/> trong đoạn code HTML vừa chèn.

Bấm lưu và kiểm tra hiển thị.

Lời kết

Code trên sử dụng hoàn toàn là HTML và CSS không sự dụng đến JavaScript hay JQuery nên không ảnh hước đến tốc độ tải trang mà có thì là do quảng cáo của các bạn. Nếu có vấn đề gì hãy code lỗi các bạn có thể comment ở dưới mình sẽ phản hồi và hỗ trợ.

Chèn mã Google AdSense hiển thị tại vị trí, trang khác nhau vào Blog

2022-03-29T11:38:00.009+07:00

Sau khi tài khoản AdSense của bạn được kích hoạt bước tiếp theo bạn cần thiết lập quảng cáo tự động và tạo các mã quảng cáo tùy chỉnh chèn vào các vị trí thích hợp của các trang khác nhau trong Blog. Tùy vào mỗi trang mà lựa chọn mã quảng cáo thích hợp (loại quảng cáo, kích thước tùy chỉnh...)

Lưu ý:

Chèn nhiều mã quảng cáo vào một trang sẽ khiến trang tải chậm và quảng cáo không có giá cao, với mỗi trang chỉ nên chèn tối đa 3 đến 4 mã quảng cáo
Tuyệt đối không được chèn mã quảng cáo trong menu sổ xuống, hộp thoại popup

Hiện tại bên cạnh loại quảng cáo tự động trong các đơn vị quảng cáo có 3 loại quảng cáo (tài khoản mới)

Quảng cáo văn bản và quảng cáo hiển thị hình ảnh
Quảng cáo trong nguồn cấp dữ liệu
Quảng cáo trong bài viết

Căn cứ vào 3 loại quảng cáo có thể bố trí tại các trang như sau:

Quảng cáo văn bản và quảng cáo hiển thị hình ảnh

Đầu trang chèn trong widget ngay dưới menu lấy kích thước 970x90 sau khi lấy mã sửa 970px thành 100%
Sidebar chèn trong widget loại hiển thị biểu ngữ dọc, đáp ứng và kích thước tùy chỉnh

Quảng cáo trong nguồn cấp dữ liệu

Chèn vào giữa các bài viết tại trang chủ tùy vào thiết kế mà lấy loại hiển thị phù hợp

Quảng cáo trong bài viết

Chèn trong bài viết dưới tiêu đề, dưới dấu ngắt nháy, vào một vị trí bất kỳ có thể canh giữa bài, dưới chân bài viết, tùy vào thiết kế mà lấy loại hiển thị phù hợp

Hướng dẫn chèn mã quảng cáo

Phần chèn quảng cáo văn bản và quảng cáo hiển thị hình ảnh đầu trang, bên sidebar đơn giản chỉ cần chèn mã vào widget nên mình không hướng dẫn.

Hướng dẫn chèn mã quảng vào giữa các bài viết tại trang chủ

Ngoài trang chủ các bạn có thể chèn mã quảng vào các trang khác thuộc nhóm trang index, phương pháp này sẽ đặt điều kiện trong vòng lặp các bài viết

Các bạn vào chỉnh sửa mẫu template chọn chuyển đến tiện ích Blog1 chọn mở rộng cặp thẻ tag <b:includable id='main'> các bạn thêm index='item' vào trong thẻ lặp <b:loop values='data:posts' var='post'> thành <b:loop index='item' values='data:posts' var='post'>

Tiếp theo ngay dưới thẻ lặp b:loop này các bạn thêm đoạn code sau

<b:if cond='data:view.isMultipleItems'>

  <b:if cond='data:item==3'>

    <div class='post'>

      <!-- Mã quảng cáo AdSense -->

    </div>

  </b:if>

  <b:if cond='data:item==6'>

    <div class='post'>

      <!-- Mã quảng cáo AdSense -->

    </div>

  </b:if>

</b:if>

Trong đó các số 3 và 6 là vị trí hiện thị quảng cáo sau bài viết thứ 3 và bài viết thứ 6, nếu trang chủ có nhiều bài chẳng hạn 20 thì các bạn thay đổi vị trí cho hù hợp chẳng hạn sau các bài 5, 10, 15

<b:if cond='data:view.isMultipleItems'>

  <b:if cond='data:item==5'>

    <div class='post'>

      <!-- Mã quảng cáo AdSense -->

    </div>

  </b:if>

  <b:if cond='data:item==10'>

    <div class='post'>

      <!-- Mã quảng cáo AdSense -->

    </div>

  </b:if>

  <b:if cond='data:item==15'>

    <div class='post'>

      <!-- Mã quảng cáo AdSense -->

    </div>

  </b:if>

</b:if>

Hướng dẫn chèn mã quảng cáo vào bài viết

Các bạn có thể chèn mã quảng cáo dưới tiêu đề (không khuyến khích), dưới dấu ngắt nháy, vào một vị trí bất kỳ có thể canh giữa bài, dưới chân bài viết

- Chèn dưới tiêu đề: Cái này đơn giản các bạn chỉ cần tìm thẻ tiêu đề <h1> nó thường nằm trong cặp thẻ <b:includable id='post' var='post'> chèn mã quảng cáo ngay dưới nó

Chèn dưới ngắt trang (ngắt nhảy)

Phần này ít bạn để ý chèn dấu ngắt nháy hoặc có bài chèn có bài quên không chèn nhưng không sao bạn vẫn có thể chèn mã quảng cáo bên dưới nếu bài mà bạn thêm dấu ngắt thì quảng cáo hiển thị ngay dưới còn bài không chèn thì không hiển thị quảng cáo. các bạn chèn đoạn mã sau ngay dưới thẻ <data:post.body/>

<div class='adsense1'>

  <div id='ads_Code'>

    <!-- Mã quảng cáo AdSense -->

  </div>

</div>

Tiếp tục chèn đoạn script sau trước </body>

<script>//<![CDATA[

$(function() {

  var more = $('a[name="more"]')

  if (more) {

    $('#ads_Code').appendTo(more)

  } else {

    $('.adsense1').empty()

  }

})

//]]></script>

Chèn dưới chân bài viết

Cũng đơn giản các bạn chỉ cần chèn mã quảng cáo ngay trước <div class='post-footer'></div> hoặc ngay dưới thẻ <data:post.body/> đều như nhau vì thẻ này luôn nằm trên post-footer

Chèn vào một vị trí bất kỳ

Cách này các bạn chèn id vào vị trí muốn hiển thị quảng cáo có thể giữa bài như sau:

Chèn đoạn code sau ngay dưới thẻ <data:post.body/>

<div class='adsense2'>

  <div id='ads_Body'>

    <!-- Mã quảng cáo AdSense -->

  </div>

</div>

Tiếp tục chèn đoạn script sau trước </body>

<script>//<![CDATA[

$(function() {

  var ads = document.getElementById('AdSense')

  if (ads) {

    $('#ads_Body').appendTo(ads)

  } else {

    $('.adsense2').empty()

  }

})

//]]></script>

Khi viết bài mới hoặc sửa lại bài cũ các bạn cần thêm đoạn code <div id="AdSense"></div> vào vị trí muốn hiển thị bên khung soạn thảo HTML của bài viết

Yêu cầu trong template cần có thư viện jquery cái này đa số Blog đều có các bạn kiểm tra nếu không thấy thì chèn trước </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

Ngoài ra các bạn cũng nên sử dụng điều kiện cho mobile như sau:

- Điều kiện chỉ tải mã trên mobile (?m=1)

<b:if cond='data:blog.isMobileRequest'>

  <!-- Mã quảng cáo AdSense -->

</b:if>

- Điều kiện không tải trên mobile (?m=1)

<b:if cond='!data:blog.isMobileRequest'>

  <!-- Mã quảng cáo AdSense -->

</b:if>

Chia sẻ code Button Download có Progress Bar

2022-03-02T17:34:00.009+07:00

Chào các bạn, hôm nay mình sẽ chia sẻ cho các bạn code cho Button Download có Progress Bar cực đẹp. Code sử dụng HTML, CSS và JavaScript. Và Blog mình cũng có nhiều bài viết share code về JavaScript cũng như HTML và CSS bài gần đây nhất Chia sẻ code, template thư viện ảnh với Lightbox cho Blogspot các bạn có thể truy cập để xem.

Button Download có Progress Bar là animation xuất hiện sau khi nhấp và hiển thị rằng đường link đang được tải. Hiện tại, hiệu ứng này đang được sử dụng khá nhiều vì nó chiếm ít dung lượng trên trang web và trông rất đẹp, chuyên nghiệp.

Các bạn có thể xem demo dưới đây, đầu tiên bạn nhìn thấy sẽ là giao diện ban đầu của button và khi bạn nhấp vào nút đó, chiều cao và chiều rộng của nó sẽ được thay đổi thành Progress Bar. Khi Progress Bar hoàn thành tiến trình thì nó sẽ thông báo hoàn tất và chuyển đến link download.

Download

Chia sẻ code Button Download có Progress Bar

Để thêm Button Download có Progress Bar vào Blog hay Website các bạn cần thêm code HTML, CSS và JavaScript sau đây vào Blog/Website của các bạn.

Đầu tiên thêm code HTML vào vị trí hiển thị:

<div class="ch-button">
      <div class="button-content">
        <i class="fa-solid fa-cloud-arrow-down"></i>
        <span data-link="https://www.themebiz.net/" class="button-text">Download</span>
      </div>
  </div>

Tiếp theo thêm code CSS sau:

<style>/* <![CDATA[ */
.ch-button{position:relative;margin:auto auto 0.9375rem;padding:10px;width:40%;min-width:300px;max-width:50%;background:#7D2AE8;border-radius:55px;cursor:pointer;box-shadow:0 5px 10px rgba(0,0,0,0.2);transition:all .4s cubic-bezier(0.68,-0.55,0.265,1.55);overflow:hidden}
.ch-button.active{height:10px;width:40%;min-width:300px;max-width:50%;padding:5px}
.ch-button::before{content:"";position:absolute;top:0;left:-100%;height:100%;width:100%;background:#5b13b9;border-radius:55px;transition:all 6s ease-in-out}
.ch-button.active::before{animation:layer 6s ease-in-out forwards}
@keyframes layer {
100%{left:0}
}
.ch-button .button-content{height:100%;width:100%;display:flex;align-items:center;justify-content:center;transition:all .2s ease;transition-delay:.2s}
.ch-button.active .button-content{transform:translateY(60px)}
.ch-button .button-content i,.ch-button .button-content .button-text{color:#fff;font-size:20px;font-weight:500}
.ch-button .button-content .button-text{font-size:18px;margin-left:8px}
/* ]]> */</style>

Và chèn thêm thư viên font awesome mới nhất:

<link href='https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro-v6@18657a9/css/all.min.css' rel='stylesheet' type='text/css'/>

Cuối cùng, chèn đoạn JavaScript này vào tiếp website/blog của bạn:

<script>//<![CDATA[
      const chbutton = document.querySelector(".ch-button"),
          _link = document.querySelector('.button-text');
    if (_link) {

    }
    chbutton.addEventListener("click", () =>{
      chbutton.classList.add("active");
      chbutton.style.pointerEvents = "none";
      setTimeout(()=>{
        let _target = _link.getAttribute('data-link');
        console.log(_target);
        chbutton.classList.remove("active");
        chbutton.querySelector("i").classList.replace("fa-cloud-arrow-down", "fa-check");
        chbutton.querySelector(".button-text").innerText = "Completed!";
        setTimeout(()=>{
        window.open(_target, '_blank');
        setTimeout(()=>{
  		chbutton.querySelector("i").classList.replace("fa-check", "fa-cloud-arrow-down")
        chbutton.querySelector(".button-text").innerText = "Download";
        chbutton.style.pointerEvents = "auto";
         },2000);
          },1000);
      },6000);
    });
//]]></script>

Xong!

Lời kết

Đây là tất cả source code để bạn có thể thêm Button Download có Progress Bar trên website/blog của mình bằng cách sử dụng HTML, CSS và JavaScript. Nếu trong quá trình thực hiện gặp lỗi hay code không hoạt động các bạn có thể comment xuống phía dưới mình sẽ phản hồi và giúp đỡ bạn sớm nhất!

Chia sẻ code custom menu chuột phải trên website/blog

2022-02-19T12:08:00.093+07:00

Chào các bạn quay lại với Blog Codehay.net cũng gần 2 tháng rồi mình không ra bài mới, hôm nay bài viết này mình sẽ chia sẻ code custom menu chuột phải sửa dụng HTML, CSS & JavaScript. Bài gần đây nhất của mình là Chia sẻ code cảnh báo phát hiện AdBlock sử dụng Javascript các bạn có thể truy cập để xem.

Menu chuột phải sẽ hiệu lên khi các bạn click chuột phải vào vị trí bất kì trên website hay blog của bạn. Và trong menu đó sẽ có những lựa chọn mặc định của trính duyệt đã đưa vào.

Trong bài viết này code custom menu chuột phải sẽ thay đổi những tuỳ chọn trong menu khi bấm chuột phải và sẽ ẩn đi khi bạn bấm chuột trái và ở trong menu này sẽ có thêm một menu phụ nữa. Các bạn có thể xem demo dưới đây:

Preview

Chia sẻ code custom menu chuột phải trên website/blog

Để custom menu chuột phải trên website/blog các bạn cần phải chèn những đoạn code HTML, CSS & JavaScript dưới đây vào website/blog của bạn.

Đầu tiên, chèn đoạn HTML dưới đây:

<div class='context-menu-wrapper'>
<div class='context-menu-content'>
<ul class='menu'>
<li class='item'>
<i class='fa-solid fa-eye'></i>
<span>Preview</span>
</li>
<li class='item share'>
<div>
<i class='fa-solid fa-share'></i>
<span>Share</span>
</div>
<ul class='share-menu'>
<li class='item'>
<i class='fa-brands fa-twitter'></i>
<span>Twitter</span>
</li>
<li class='item'>
<i class='fa-brands fa-instagram'></i>
<span>Instagram</span>
</li>
<li class='item'>
<i class='fa-solid fa-basketball'></i>
<span>Dribble</span>
</li>
<li class='item'>
<i class='fa-brands fa-telegram'></i>
<span>Telegram</span>
</li>
</ul>
</li>
<li class='item'>
<i class='fa-solid fa-link'></i>
<span>Get Link</span>
</li>
<li class='item'>
<i class='fa-solid fa-pen-to-square'></i>
<span>Rename</span>
</li>
<li class='item'>
<i class='fa-solid fa-trash-can'></i>
<span>Delete</span>
</li>
</ul>
</div>
</div>

Tiếp theo chèn CSS:

<style>
.context-menu-wrapper{visibility:hidden;position:absolute;width:300px;border-radius:4px;background:#fff;box-shadow:0 12px 35px rgba(0,0,0,0.1);z-index:9999999999999}
.context-menu-wrapper .menu{padding:5px 0;margin:0!important}
.context-menu-content .item{list-style:none;font-size:18px;height:30px;display:flex;width:100%;cursor:pointer;align-items:center;padding:0 10px}
.context-menu-content .item:hover{background:#f2f2f2}
.context-menu-content .item span{margin-left:8px;font-size:15px}
.context-menu-content .item i{font-size:14px}
.context-menu-content .share{position:relative;justify-content:space-between}
.share .share-menu{position:absolute;background:#fff;width:200px;right:-200px;top:-35px;padding:5px 0;opacity:0;pointer-events:none;border-radius:4px;margin:0!important;box-shadow:0 5px 10px rgba(0,0,0,0.08);transition:.2s ease}
.share:hover .share-menu{opacity:1;pointer-events:auto}
</style>

Và chèn thêm thư viên font awesome mới nhất:

<link href='https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro-v6@18657a9/css/all.min.css' rel='stylesheet' type='text/css'/>

Cuối cùng, chèn đoạn JavaScript này vào tiếp website/blog của bạn:

<script>//<![CDATA[
  const contextMenu = document.querySelector(".context-menu-wrapper"),
shareMenu = contextMenu.querySelector(".share-menu");

window.addEventListener("contextmenu", e => {
    e.preventDefault();
    let x = e.offsetX, y = e.offsetY,
    winWidth = window.innerWidth,
    winHeight = window.innerHeight,
    cmWidth = contextMenu.offsetWidth,
    cmHeight = contextMenu.offsetHeight;

    if(x > (winWidth - cmWidth - shareMenu.offsetWidth)) {
        shareMenu.style.left = "-200px";
    } else {
        shareMenu.style.left = "";
        shareMenu.style.right = "-200px";
    }

    x = x > winWidth - cmWidth ? winWidth - cmWidth - 5 : x;
    y = y > winHeight - cmHeight ? winHeight - cmHeight - 5 : y;
    
    contextMenu.style.left = `${x}px`;
    contextMenu.style.top = `${y}px`;
    contextMenu.style.visibility = "visible";
});

document.addEventListener("click", () => contextMenu.style.visibility = "hidden");
    //]]></script>

Xong!

Lời kết

Đây là tất cả source code để bạn có thể custom menu chuột phải trên website/blog của mình bằng cách sử dụng HTML, CSS và JavaScript. Nếu trong quá trình thực hiện gặp lỗi hay code không hoạt động các bạn có thể comment xuống phía dưới mình sẽ phản hồi và giúp đỡ bạn sớm nhất!

Chia sẻ code cảnh báo phát hiện AdBlock sử dụng Javascript

2022-01-09T21:39:00.034+07:00

Xin chào các bạn quay lại với Blog của mình, bài viết hôm nay mình sẽ chia sẻ cho các bạn code hiển cảnh báo phát hiện AdBlock sử dụng Javascript. Bài trước mình có chia sẻ về Chia sẻ code hiển thị trình phát nhạc sử dụng JavaScript Chia sẻ code hiển thị trình phát nhạc sử dụng JavaScript các bạn có thể vào đọc tham khảo thêm!

AdBlocker là một tiện ích lọc nội dung hoặc chặn các quảng cáo trên trình duyệt. Nó giúp người dùng ngăn chặn các quảng cáo và các cửa sổ bật lên không mong muốn. Nhưng website có thu nhập chủ yếu nhờ quảng cáo sẽ cần phải thông báo cho người dùng biết phải tắt bỏ AdBlock để hiển thị quảng cáo vì nó làm giảm thu nhập của website.

Và bài viết này như bạn có thể thấy ở thumbnail, sẽ có một hộp thoại hiện lên thông báo cho người truy cập rằng họ đang sử dụng AdBlock. Nếu người dùng đã bật AdBlocker thì thông báo này sẽ được hiển thị và nếu không thì thông báo này sẽ không được hiển thị.

Chia sẻ code cảnh báo phát hiện AdBlock sử dụng Javascript

Bước 1: Thêm code HTML dưới đây vào phí trước thẻ đóng </body>.

<div id='ch-detect'></div>
<div class='ch-bg-effect'></div>
<div class='ch-popup-box'>
    <div class='content'>
        <div class='warn-icon'>
            <span class='icon'><i class='has-svg-icon icon-exclamation'></i></span>
        </div>
        <h2>AdBlock Detected!</h2>
        <p>Our website is made possible by displaying ads. Please whitelist our site to copy the given source codes. <a href='#!' target='_blank'>Read more</a></p>
        <button class='dismiss-btn'>Okay, I'll Whitelist</button>
    </div>
</div>

Bước 2: Thêm code JavsScript dưới đây vào phía dưới đoạn HTML vừa chèn.

<script>//<![CDATA[
window.addEventListener('load',function(){
    const detectElem = document.querySelector("#ch-detect");
    const adBlockPopup = document.querySelector(".ch-popup-box");
    const dismissBtn = adBlockPopup.querySelector(".dismiss-btn");
    const BgEffect = document.querySelector(".ch-bg-effect");
    let adClasses = ["ad", "ads", "adsbox", "doubleclick", "ad-placement", "ad-placeholder", "adbadge", "BannerAd"];
    for(let item of adClasses){
      detectElem.classList.add(item);
    }
    let getProperty = window.getComputedStyle(detectElem).getPropertyValue("display");
    if(!adBlockPopup.classList.contains("show")){
      getProperty == "none" ? adBlockPopup.classList.add("show") : adBlockPopup.classList.remove("show");
      getProperty == "none" ? BgEffect.classList.add("show") : BgEffect.classList.remove("show");
    }
    dismissBtn.addEventListener("click", ()=>{
      adBlockPopup.classList.remove("show");
	  BgEffect.classList.remove("show");
    });
})
  //]]></script>

Cuối cùng: Thêm đoạn code CSS dưới đây vào trong website của bạn. Nhớ chỉnh lại cho phù hợp với Website của bạn nhé CSS này là theo Blog của mình.

.ch-popup-box{box-sizing:unset;position: fixed;max-width: 420px;top: 50%;left: 50%;width: 100%;padding: 40px 50px;background:var(--white) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTrPM_8MImVG539G58_8EVodWT_2up-eUm4XCP9HcZ0OJvHfWAcwM9wyK18Q1OG79YE3M1t0nE5Tyj6ONpvvNk2I3xioeUwPGSHBBjKkKDjoQ8bpPtnNvSaPrPsB8inQcy37goX-lWYLs/s150/kitten-ink.webp) no-repeat right bottom;background-size:100px;border-radius:4px;opacity: 0;z-index: 2147483647;pointer-events: none;transform: translate(-50%, -50%) scale(1.2);box-shadow: 10px 10px 15px rgba(0,0,0,0.06);transition: opacity 0.2s 0s ease-in-out,transform 0.2s 0s ease-in-out;}
.ch-popup-box.show{opacity: 1;pointer-events: auto;transform: translate(-50%, -50%) scale(1);}
@media screen and (max-width: 600px){.ch-popup-box{transform: translate(-50%, -50%) scale(0.7);}.ch-popup-box.show{transform: translate(-50%, -50%) scale(0.9);}.ch-popup-box h2{text-align: center;}}
.ch-bg-effect{backdrop-filter:blur(2px) sepia() brightness(0.5) grayscale(1);position: fixed;left: 0;top: 0;z-index: 2147484000;height: 100%;width: 100%;background:rgba(0,0,0,.2);opacity: 0;pointer-events: none;transition: opacity 0.3s ease;}
.ch-bg-effect.show{opacity: 1;pointer-events: auto;}
.ch-popup-box .content,.ch-popup-box .content .warn-icon,.ch-popup-box .warn-icon .icon{display: flex;align-items: center;justify-content: center;}
.ch-popup-box .content{flex-direction: column;}
.ch-popup-box .content .warn-icon{height:115px;width:115px;border-radius:50%;background:#66689c}
.ch-popup-box .warn-icon .icon{height: 100px;width:100px;background:#fff;border-radius:inherit}
.ch-popup-box .content h2{margin: 0;margin-top: 40px;font-size: 32px;font-weight: 600;letter-spacing:1px}
.ch-popup-box .content p{margin: 0;font-size: 19px;text-align: center;margin-top: 23px;line-height: 30px}
.ch-popup-box .content p a{color: #7577a9}
.ch-popup-box .content p a:hover{text-decoration: underline;}
.ch-popup-box .content .dismiss-btn{margin-top:30px;padding:15px 27px;font-size:18px;border:none;outline:none;color:#fff;cursor:pointer;border-radius:50px;background:#7577a9;transition:background 0.3s ease;}
.ch-popup-box .content .dismiss-btn:hover{background: #66689c;}
.icon-exclamation:before{background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='%2366689c' viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d=' M 526 150C 576 150 602 175 601 224C 600 300 600 350 575 525C 570 560 560 575 525 575C 525 575 475 575 475 575C 440 575 430 560 425 525C 400 355 400 300 400 226C 400 175 425 150 475 150M 500 650C 527 650 552 661 571 679C 589 698 600 723 600 750C 600 805 555 850 500 850C 445 850 400 805 400 750C 400 723 411 698 429 679C 448 661 473 650 500 650C 500 650 500 650 500 650'/%3E%3C/svg%3E");width:80px;height:80px;background-size:100%;content:"";display:inline-block;vertical-align:middle}

Lời kết

Mình thấy cứ hiện nên như vậy thì hơi khó chịu với người dùng khi truy cập những bài viết có nội dung trả phí bởi vì bài viết được trả phí rồi và không cần quảng cáo nữa. Các bạn hãy kết hợp cho những nội dung miễn phí, như Blog mình khi bạn bật AdBlock thì sẽ không thể copy code trực tiếp từ Blog mình các bạn có thể thử nếu dùng AdBlock. Các bạn hãy sử dụng cho hợp lý để tránh gây kho chịu nhé!

Chia sẻ code hiển thị trình phát nhạc sử dụng JavaScript

2021-12-30T23:56:00.018+07:00

Chào các bạn, blog cũ nhưng tên miền mới hôm nay thì mình sẽ chia sẻ cho bạn cách thêm tiện ích trình phát nhạc sử dụng JavaScript cho website hoặc blog của bạn. Tiện ích này sẽ sử dụng HTML CSS và JavaScript, gần đây mình có chia sẻ bài viết Code hiển thị thông báo khi mất kết nối mạng cho Website/Blogspot các bạn có thể thảm khảo thêm.

Tiện ích trình phát nhạc sử dụng JavaScript này có các chức năng phát lặp bài nhạc, phát lặp danh sách nhạc, phát ngẫu nhiên các bài nhạc trong danh sách và các nút play/pause, bài trước bài sau. Bạn cũng có thể xem được danh sách các bài nhạc và bài nhạc đang phát hiện tại trong danh sách.

Chia sẻ code hiển thị trình phát nhạc sử dụng JavaScript

Bước 1: Bạn thêm đoạn code HTML sau vào vị trí bạn muốn hiển thị trình phát nhạc.

<div class='music-box'>
	<div class='top-bar'>
		<i class='has-svg-icon music-more'></i>
		<span>Now Playing</span>
		<i class='has-svg-icon music-horiz'></i>
	</div>
	<div class='img-area'>
		<img alt='' loading='lazy' src='' title='' />
	</div>
	<div class='song-details'>
		<p class='name'></p>
		<p class='artist'></p>
	</div>
	<div class='progress-area'>
		<div class='progress-bar'>
			<audio id='main-audio' src=''></audio>
		</div>
		<div class='song-timer'>
			<span class='current-time'>0:00</span>
			<span class='max-duration'>0:00</span>
		</div>
	</div>
	<div class='controls'>
		<i class='has-svg-icon music-repeat' id='repeat-plist' title='Playlist looped'><span>repeat</span></i>
		<i class='has-svg-icon music-skippre' id='prev'></i>
		<div class='play-pause'>
			<i class='has-svg-icon music-play play'></i>
		</div>
		<i class='has-svg-icon music-skipnext' id='next'></i>
		<i class='has-svg-icon music-queue' id='more-music'></i>
	</div>
	<div class='slider_volumn'>
		<i class='has-svg-icon icon-volume-down' id='min-volume'></i>
		<input class='volume_slider' max='100' min='1' onchange='setVolume()' type='range' value='100' />
		<i class='has-svg-icon icon-volume-up' id='max-volume'></i>
	</div>
	<div class='music-list'>
		<div class='header-music'>
			<div class='row-music'>
				<i class='has-svg-icon list music-queuemenu'></i>
				<span>Music list</span>
			</div>
			<i class='has-svg-icon music-close' id='close'></i>
		</div>
		<ul>
		</ul>
	</div>
</div>

Bước 2: Thêm đoạn CSS sau vào giao diện hoặc là file CSS của bạn. Lưu ý bạn nhớ chỉnh sửa lại CSS cho phù hợp với website hay blog của bạn nhé.

.music-box{max-width:300px;width:100%;padding:10px;overflow:hidden;position:relative;background:#fff;box-shadow:0 6px 15px 0 12px 25px 0 rgb(30 30 30 / 4%)}
.music-box i{cursor:pointer}
.top-bar,.progress-area .song-timer,.music-list .header-music,.music-list ul li{display:flex;align-items:center;justify-content:space-between}
.controls{display:flex;align-items:center;justify-content:space-evenly}
.top-bar span{font-size:16px;margin-left:-3px;color:#555}
.img-area{width:185px;height:185px;position:relative;overflow:hidden;margin:15px auto 0;border:5px solid #fff;border-radius:50%;box-shadow:0 6px 12px rgba(0,0,0,0.09)}
.img-area:before{content:'';position:absolute;top:50%;left:50%;width:20px;height:20px;transform:translate(-50%, -50%);background-color:#d6dee7;border-radius:50%;box-shadow:inset 0 0 0 2px #fff;z-index:2}
.img-area img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.music-box.paused .img-area img{animation: rotateAlbumArt 3s linear 0s infinite forwards}
.song-details{text-align:center;margin:20px 0}
.song-details p{color:#666}
.song-details .name{font-size:16px}
.song-details .artist{font-size:13px;opacity:.9;line-height:35px}
.progress-area{height:10px;width:100%;border-radius:50px;background:#f0f0f0;cursor:pointer}
.progress-area .progress-bar{height:inherit;width:0;position:relative;border-radius:inherit;background:linear-gradient(90deg,#7577a9 0%,#66689c 100%)}
.progress-area .song-timer{margin-top:5px}
.song-timer span{font-size:13px;color:#666}
.controls{margin:30px 0 20px}
.controls .play-pause{height:30px;width:30px;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:50%;background:#fff}
.play-pause::before{position:absolute;content:"";height:30px;width:30px;border-radius:inherit;background:linear-gradient(#7577a9 0%,#66689c 100%)}
.play-pause i{position:absolute}
.music-list{position:absolute;background:#fff;width:100%;left:0;bottom:-55%;opacity:0;pointer-events:none;z-index:5;padding:15px 30px;box-shadow:0 -5px 10px rgba(0,0,0,0.05);transition:all .15s ease-out}
#repeat-plist > span{display:none}
.music-list.show{bottom:0;opacity:1;pointer-events:auto}
.header-music .row-music{display:flex;align-items:center;font-size:19px}
.header-music .row-music i{cursor:default}
.header-music .row-music span{margin-left:5px;font-size:15px;color:#666666}
.music-list ul{margin:10px 0!important;max-height:260px;overflow:auto}
.music-list ul::-webkit-scrollbar{width:0}
.music-list ul li{list-style:none;display:flex;cursor:pointer;padding-bottom:10px;margin-bottom:10px;color:#666;border-bottom:1px solid #E5E5E5}
.music-list ul li:last-child{border-bottom:0}
.music-list ul li .row span{font-size:15px}
.music-list ul li .row p{opacity:.9;font-size:13px;margin-top:5px}
ul li .audio-duration{font-size:13px}
ul li.playing{pointer-events:none;color:#66689c}
.slider_volumn{display:flex;justify-content:center;align-items:center}
.volume_slider{height:10px;width:100%;border-radius:50px;background:#f0f0f0;cursor:pointer;padding:0;overflow:hidden; -webkit-transition: .2s;transition: opacity .2s;-webkit-appearance:none}
.volume_slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width: 10px;height: 10px;background:#66689c;cursor: pointer;border-radius:0 50% 50% 0;box-shadow:-350px 0px 0px 340px #66689c}
.volume_slider::-moz-range-thumb {width:10px;height:10px;background:#66689c;cursor:pointer}
@keyframes rotateAlbumArt{0%{ transform: rotateZ(0)}100%{ transform: rotateZ(360deg)}}
.has-svg-icon:before{background-size:100%;content:"";display:inline-block;vertical-align:middle}
.music-more:before{background-image: url("data:image/svg+xml,%3Csvg fill='%23666666' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E%0A");width:20px;height:20px}
.music-horiz:before{background-image: url("data:image/svg+xml,%3Csvg fill='%23666666' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E%0A");width:20px;height:20px}
.music-play:before{background-image: url("data:image/svg+xml,%3Csvg fill='%23ffffff' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E%0A");width:23px;height:23px}
.music-pause:before{background-image: url("data:image/svg+xml,%3Csvg fill='%23ffffff' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/%3E%3C/svg%3E%0A");width:23px;height:23px}
.music-skippre:before{background-image: url("data:image/svg+xml,%3Csvg fill='%237577a9' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 6h2v12H6zm3.5 6l8.5 6V6z'/%3E%3C/svg%3E%0A");width:20px;height:20px}
.music-skipnext:before{background-image: url("data:image/svg+xml,%3Csvg fill='%237577a9' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z'/%3E%3C/svg%3E%0A");width:20px;height:20px}
.music-repeat:before{background-image: url("data:image/svg+xml,%3Csvg fill='%237577a9' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z'/%3E%3C/svg%3E%0A");width:20px;height:20px}
.music-repeatone:before{background-image: url("data:image/svg+xml,%3Csvg fill='%237577a9' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4zm-4-2V9h-1l-2 1v1h1.5v4H13z'/%3E%3C/svg%3E ");width:20px;height:20px}
.music-shuffle:before{background-image: url("data:image/svg+xml,%3Csvg fill='%237577a9' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z'/%3E%3C/svg%3E%0A");width:20px;height:20px}
.music-queue:before{background-image: url("data:image/svg+xml,%3Csvg fill='%237577a9' xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 24 24' height='24' viewBox='0 0 24 24' width='24'%3E%3Cg%3E%3Crect fill='none' height='24' width='24'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M15,6H3v2h12V6z M15,10H3v2h12V10z M3,16h8v-2H3V16z M17,6v8.18C16.69,14.07,16.35,14,16,14c-1.66,0-3,1.34-3,3s1.34,3,3,3 s3-1.34,3-3V8h3V6H17z'/%3E%3C/g%3E%3C/svg%3E%0A");width:20px;height:20px}
.music-queuemenu:before{background-image: url("data:image/svg+xml,%3Csvg fill='%23666666' xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 24 24' height='24' viewBox='0 0 24 24' width='24'%3E%3Cg%3E%3Crect fill='none' height='24' width='24'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M15,6H3v2h12V6z M15,10H3v2h12V10z M3,16h8v-2H3V16z M17,6v8.18C16.69,14.07,16.35,14,16,14c-1.66,0-3,1.34-3,3s1.34,3,3,3 s3-1.34,3-3V8h3V6H17z'/%3E%3C/g%3E%3C/svg%3E%0A");width:20px;height:23px}
.music-close:before{background-image: url("data:image/svg+xml,%3Csvg fill='%23666666' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z'/%3E%3C/svg%3E");width:11px;height:11px}
.icon-volume-up:before{background-image: url("data:image/svg+xml,%3Csvg fill='%237577a9' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E%0A");width:20px;height:20px}
.icon-volume-down:before{background-image: url("data:image/svg+xml,%3Csvg fill='%237577a9' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z'/%3E%3C/svg%3E%0A");width:20px;height:20px}

Bước 3: Thêm đoạn JavaScript sau vào giao diện hoặc là file JS của bạn. Ở đây mình tạo JS dạng Array để thêm danh sách các bài nhạc.

// Để thêm nhạc bạn sao chép và chỉnh sửa bên trong đoạn array như sau
//   {
//     name: "Tên bài nhạc",
//     artist: "Nghệ sĩ",
//     img: "Tên đường dẫn hình ảnh",
//     src: "Tên đường dẫn theo bài nhạc"
//   }
let allMusic = [
    {
        name: "Harley Bird - Home",
        artist: "Jordan Schor",
        img: "https://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-1.jpg",
        src: "https://ia801400.us.archive.org/27/items/music_20210917/music-1.mp3",
        id: "m1"
    },
    {
        name: "Ikson Anywhere – Ikson",
        artist: "Audio Library",
        img: "https://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-2.jpg",
        src: "https://ia801400.us.archive.org/27/items/music_20210917/music-2.mp3",
        id: "m2"
    },
    {
        name: "Beauz & Jvna - Crazy",
        artist: "Beauz & Jvna",
        img: "https://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-3.jpg",
        src: "https://ia801400.us.archive.org/27/items/music_20210917/music-3.mp3",
        id: "m3"
    },
    {
        name: "Hardwind - Want Me",
        artist: "Mike Archangelo",
        img: "https://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-4.jpg",
        src: "https://ia801400.us.archive.org/27/items/music_20210917/music-4.mp3",
        id: "m4"
    },
    {
        name: "Jim - Sun Goes Down",
        artist: "Jim Yosef x Roy",
        img: "https://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-5.jpg",
        src: "https://ia801400.us.archive.org/27/items/music_20210917/music-5.mp3",
        id: "m5"
    },
    {
        name: "Lost Sky - Vision NCS",
        artist: "NCS Release",
        img: "https://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-6.jpg",
        src: "https://ia801400.us.archive.org/27/items/music_20210917/music-6.mp3",
        id: "m6"
    }
];

Bước cuối: Tiếp tục thêm đoạn JavaScript sau, đoạn JavaScript này là các function và event cho trình phát nhạc.

const wrapper = document.querySelector(".music-box"),
    musicImg = wrapper.querySelector(".img-area img"),
    musicName = wrapper.querySelector(".song-details .name"),
    musicArtist = wrapper.querySelector(".song-details .artist"),
    playPauseBtn = wrapper.querySelector(".play-pause"),
    prevBtn = wrapper.querySelector("#prev"),
    nextBtn = wrapper.querySelector("#next"),
    mainAudio = wrapper.querySelector("#main-audio"),
    progressArea = wrapper.querySelector(".progress-area"),
    progressBar = progressArea.querySelector(".progress-bar"),
    musicList = wrapper.querySelector(".music-list"),
    moreMusicBtn = wrapper.querySelector("#more-music"),
    closemoreMusic = musicList.querySelector("#close"),
    volumeslider = wrapper.querySelector(".volume_slider"),
    maxvolum = wrapper.querySelector("#max-volume"),
    minvolum = wrapper.querySelector("#min-volume");
let musicIndex = Math.floor((Math.random() * allMusic.length) + 1);
isMusicPaused = true;
curr_track = mainAudio;
window.addEventListener("load", () => {
    loadMusic(musicIndex);
    playingSong();
});
function loadMusic(indexNumb) {
    musicName.innerText = allMusic[indexNumb - 1].name;
    musicArtist.innerText = allMusic[indexNumb - 1].artist;
    musicImg.alt = allMusic[indexNumb - 1].artist;
    musicImg.title = allMusic[indexNumb - 1].artist;
    musicImg.src = allMusic[indexNumb - 1].img;
    mainAudio.src = allMusic[indexNumb - 1].src;
}
function playMusic() {
    wrapper.classList.add("paused");
    playPauseBtn.querySelector("i").classList.remove("music-play");
    playPauseBtn.querySelector("i").classList.add("music-pause");
    mainAudio.play();
}
function pauseMusic() {
    wrapper.classList.remove("paused");
    playPauseBtn.querySelector("i").classList.remove("music-pause");
    playPauseBtn.querySelector("i").classList.add("music-play");
    mainAudio.pause();
}
function prevMusic() {
    musicIndex--;
    musicIndex < 1 ? musicIndex = allMusic.length : musicIndex = musicIndex;
    loadMusic(musicIndex);
    playMusic();
    playingSong();
}
function nextMusic() {
    musicIndex++;
    musicIndex > allMusic.length ? musicIndex = 1 : musicIndex = musicIndex;
    loadMusic(musicIndex);
    playMusic();
    playingSong();
}
playPauseBtn.addEventListener("click", () => {
    const isMusicPlay = wrapper.classList.contains("paused");
    isMusicPlay ? pauseMusic() : playMusic();
    playingSong();
});
prevBtn.addEventListener("click", () => {
    prevMusic();
});
nextBtn.addEventListener("click", () => {
    nextMusic();
});
mainAudio.addEventListener("timeupdate", (e) => {
    const currentTime = e.target.currentTime;
    const duration = e.target.duration;
    let progressWidth = (currentTime / duration) * 100;
    progressBar.style.width = `${progressWidth}%`;
    let musicCurrentTime = wrapper.querySelector(".current-time"),
        musicDuartion = wrapper.querySelector(".max-duration");
    mainAudio.addEventListener("loadeddata", () => {
        let mainAdDuration = mainAudio.duration;
        let totalMin = Math.floor(mainAdDuration / 60);
        let totalSec = Math.floor(mainAdDuration % 60);
        if (totalSec < 10) {
            totalSec = `0${totalSec}`;
        }
        musicDuartion.innerText = `${totalMin}:${totalSec}`;
    });
    let currentMin = Math.floor(currentTime / 60);
    let currentSec = Math.floor(currentTime % 60);
    if (currentSec < 10) {
        currentSec = `0${currentSec}`;
    }
    musicCurrentTime.innerText = `${currentMin}:${currentSec}`;
});
progressArea.addEventListener("click", (e) => {
    let progressWidth = progressArea.clientWidth;
    let clickedOffsetX = e.offsetX;
    let songDuration = mainAudio.duration;
    mainAudio.currentTime = (clickedOffsetX / progressWidth) * songDuration;
    playMusic();
    playingSong();
});
const repeatBtn = wrapper.querySelector("#repeat-plist span");
wrapper.querySelector("#repeat-plist").addEventListener("click", () => {
    let getText = repeatBtn.innerText;
    switch (getText) {
        case "repeat":
            repeatBtn.innerText = "repeat_one";
            wrapper.querySelector("#repeat-plist").classList.toggle("music-repeat");
            wrapper.querySelector("#repeat-plist").classList.toggle("music-repeatone");
            wrapper.querySelector("#repeat-plist").setAttribute("title", "Song looped");
            break;
        case "repeat_one":
            repeatBtn.innerText = "shuffle";
            wrapper.querySelector("#repeat-plist").classList.toggle("music-repeatone");
            wrapper.querySelector("#repeat-plist").classList.toggle("music-shuffle");
            wrapper.querySelector("#repeat-plist").setAttribute("title", "Playback shuffled");
            break;
        case "shuffle":
            repeatBtn.innerText = "repeat";
            wrapper.querySelector("#repeat-plist").classList.toggle("music-shuffle");
            wrapper.querySelector("#repeat-plist").classList.toggle("music-repeat");
            wrapper.querySelector("#repeat-plist").setAttribute("title", "Playlist looped");
            break;
    }
});
mainAudio.addEventListener("ended", () => {
    let getText = repeatBtn.innerText;
    switch (getText) {
        case "repeat":
            nextMusic();
            break;
        case "repeat_one":
            mainAudio.currentTime = 0;
            loadMusic(musicIndex);
            playMusic();
            break;
        case "shuffle":
            let randIndex = Math.floor((Math.random() * allMusic.length) + 1);
            do {
                randIndex = Math.floor((Math.random() * allMusic.length) + 1);
            } while (musicIndex == randIndex);
            musicIndex = randIndex;
            loadMusic(musicIndex);
            playMusic();
            playingSong();
            break;
    }
});
moreMusicBtn.addEventListener("click", () => {
    musicList.classList.toggle("show");
});
closemoreMusic.addEventListener("click", () => {
    moreMusicBtn.click();
});
const ulTag = wrapper.querySelector("ul");
for (let i = 0; i < allMusic.length; i++) {
    let liTag = `<li li-index="${i + 1}">
                <div class="row">
                  <span>${allMusic[i].name}</span>
                  <p>${allMusic[i].artist}</p>
                </div>
                <span id="${allMusic[i].id}" class="audio-duration">3:40</span>
                <audio class="${allMusic[i].id}" src="${allMusic[i].src}"></audio>
              </li>`;
    ulTag.insertAdjacentHTML("beforeend", liTag);
    let liAudioDuartionTag = ulTag.querySelector(`#${allMusic[i].id}`);
    let liAudioTag = ulTag.querySelector(`.${allMusic[i].id}`);
    liAudioTag.addEventListener("loadeddata", () => {
        let duration = liAudioTag.duration;
        let totalMin = Math.floor(duration / 60);
        let totalSec = Math.floor(duration % 60);
        if (totalSec < 10) {
            totalSec = `0${totalSec}`;
        };
        liAudioDuartionTag.innerText = `${totalMin}:${totalSec}`;
        liAudioDuartionTag.setAttribute("t-duration", `${totalMin}:${totalSec}`);
    });
}
function playingSong() {
    const allLiTag = ulTag.querySelectorAll("li");

    for (let j = 0; j < allLiTag.length; j++) {
        let audioTag = allLiTag[j].querySelector(".audio-duration");

        if (allLiTag[j].classList.contains("playing")) {
            allLiTag[j].classList.remove("playing");
            let adDuration = audioTag.getAttribute("t-duration");
            audioTag.innerText = adDuration;
        }
        if (allLiTag[j].getAttribute("li-index") == musicIndex) {
            allLiTag[j].classList.add("playing");
            audioTag.innerText = "Playing";
        }
        allLiTag[j].setAttribute("onclick", "clicked(this)");
    }
}
function clicked(element) {
    let getLiIndex = element.getAttribute("li-index");
    musicIndex = getLiIndex;
    loadMusic(musicIndex);
    playMusic();
    playingSong();
}
function setVolume() {
    curr_track.volume = volumeslider.value / 100;
}
maxvolum.addEventListener("click", () => {
    curr_track.volume = 1;
    volumeslider.value = 100
})
minvolum.addEventListener("click", () => {
    curr_track.volume = 0.01;
    volumeslider.value = 0
})

Như vậy là hết rồi đó, ở tên miền cũ nguyenluongduy.com mình thấy một số bạn comments xin code trình phát nhạc của mình thì bài viết này mình đã chia sẻ cho các bạn code hiển thị trình phát nhạc sử dụng JavaScript rồi. Bạn nào không hiểu đoạn nào hay lỗi gì thì cứ comments bên dưới bài viết này mình sẽ hỗ trợ nhé!