Kích hoạt quyền thực thi JavaScript

Để có thể can thiệp sâu vào giao diện và tính năng của blog, bước đầu tiên bạn cần thực hiện là yêu cầu quyền sử dụng JavaScript từ quản trị viên hệ thống. Hãy gửi một email đến địa chỉ contact@cnblogs.com với nội dung yêu cầu mở khóa quyền JS cho tài khoản của bạn. Sau khi nhận được thông báo phê duyệt, bạn mới có thể thực hiện các tùy chỉnh dưới đây.

Tùy chỉnh giao diện bằng CSS

Trong phần quản lý giao diện, hãy chọn template darkgreentrip. Sau đó, tại mục "Page Custom CSS", bạn hãy dán đoạn mã sau để tinh chỉnh bố cục, hình nền và màu sắc. Lưu ý nên đánh dấu vào tùy chọn "Disable default CSS" để tránh xung đột phong cách.

/* Tùy chỉnh khung chứa nội dung chính */
#home {
    margin: 50px auto;
    width: 85%;
    min-width: 950px;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Cài đặt hình nền toàn trang */
body {
    background: #0a2e38 url('https://example.com/your-background.jpg') fixed no-repeat;
    background-position: center;
    background-size: cover;
}

/* Định dạng tiêu đề blog */
#blogTitle h1 {
    font-size: 32px;
    font-weight: 700;
    color: #2d5a27;
    line-height: 1.5;
}

#blogTitle h2 {
    font-size: 16px;
    color: #333;
    text-align: right;
    font-style: italic;
}

/* Thanh điều hướng */
#navigator {
    background-color: rgba(45, 130, 115, 0.85);
    border-radius: 4px;
}

#navList a {
    color: #fff !important;
    font-weight: 600;
    padding: 0 15px;
}

/* Hiệu ứng cho tiêu đề bài viết */
.postTitle {
    border-left: 5px solid #1a73e8;
    padding-left: 15px;
    margin-bottom: 15px;
    font-size: 22px;
}

.postTitle a:hover {
    color: #d93025;
    padding-left: 10px;
    transition: all 0.3s ease;
}

Tự động tạo mục lục bài viết (Table of Contents)

Sử dụng đoạn mã JavaScript sau để tự động quét các thẻ tiêu đề (ví dụ thẻ h3) trong bài viết và tạo một danh sách liên kết nhanh ở đầu bài. Đoạn mã này cũng tích hợp tính năng "Quay lại đầu trang". Dán đoạn mã này vào mục "Page Footer HTML".

<script type="text/javascript">
function buildPostIndex() {
    var postContainer = $('#cnblogs_post_body');
    var headers = postContainer.find('h3');
    
    if (headers.length > 0) {
        var indexHtml = '<div id="custom-toc" style="border:1px solid #ddd; padding:10px; background:#f9f9f9;">';
        indexHtml += '<strong>Mục lục bài viết</strong><ul>';
        
        headers.each(function(index, item) {
            var anchorName = 'section_' + index;
            $(item).before('<a name="' + anchorName + '"></a>');
            
            indexHtml += '<li><a href="#' + anchorName + '">' + $(item).text() + '</a></li>';
            
            // Thêm nút quay lại đầu trang sau mỗi đoạn
            var backToTop = '<div style="text-align:right"><a href="#top">↑ Lên đầu trang</a></div>';
            $(item).nextUntil('h3').last().after(backToTop);
        });
        
        indexHtml += '</ul></div>';
        postContainer.prepend(indexHtml);
    }
}
$(document).ready(function() {
    buildPostIndex();
});
</script>

Hiệu ứng xoay ảnh đại diện trong phần bình luận

Để làm cho phần tương tác sinh động hơn, bạn có thể thêm hiệu ứng CSS xoay 360 độ khi người dùng di chuột qua ảnh đại diện của người bình luận. Thêm đoạn mã này vào "Page Custom CSS".

.feedbackCon img {
    border-radius: 50%;
    transition: transform 0.6s ease-in-out;
}

.feedbackCon img:hover {
    transform: rotate(360deg);
}

Tích hợp liên kết GitHub

Nếu bạn muốn hiển thị một biểu tượng GitHub ở góc màn hình để dẫn link đến kho mã nguồn của mình, hãy thêm đoạn mã HTML sau vào "Page Header HTML". Đừng quên thay đổi URL ảnh và liên kết GitHub của riêng bạn.

<a href="https://github.com/your-username" target="_blank">
    <img style="position: fixed; top: 0; right: 0; border: 0; z-index: 9999;" 
         src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png" 
         alt="Fork me on GitHub">
</a>

Cấu hình Favicon tùy chỉnh

Thay đổi biểu tượng nhỏ hiển thị trên tab trình duyệt bằng cách chèn đoạn mã khởi tạo link tag vào phần footer của trang.

<script type="text/javascript">
    (function() {
        var link = document.createElement('link');
        link.rel = 'shortcut icon';
        link.href = 'https://your-domain.com/favicon.ico';
        document.getElementsByTagName('head')[0].appendChild(link);
    })();
</script>

Thiết kế chữ ký bài viết

Để tạo sự chuyên nghiệp và bảo vệ bản quyền nội dung, bạn nên thiết lập chữ ký tự động ở cuối mỗi bài viết. Bạn có thể định dạng HTML trực tiếp trong phần quản lý chữ ký (Blog Signature).

<div style="border: 1px dashed #ccc; padding: 10px; margin-top: 20px;">
    <p>Tác giả: <strong>Tên của bạn</strong></p>
    <p>Nguồn: <a href="https://www.cnblogs.com/your-blog/">https://www.cnblogs.com/your-blog/</a></p>
    <p>Bản quyền thuộc về tác giả, vui lòng trích dẫn nguồn khi sao chép.</p>
</div>