Hướng dẫn thêm chức năng thay đổi kiểu chữ chuyên nghiệp vào Blogspot

Hello anh em, ở bài viết này mình sẽ hướng dẫn anh em cách để thêm Popup thay đổi kiểu chữ tuyệt đẹp vào Blogspot, Popup này sẽ không ngốn tài nguyên cũng như không làm tăng tốc độ load của Blog và còn rất tiện lợi , phù hợp cho nhu cầu của từng cá thể, độc giả khác nhau.
- Popup này mình có mượn một số CSS từ Bacsiwindows nhưng còn Javascript thì hoàn toàn tự viết chứ không copy trên bất kỳ blog nào nha, nếu bạn có phản hồi về bản quyền bài viết cũng như Javascript vui lòng bình luận bên dưới để mình rút kinh nghiệm nhé.

Hướng dẫn thêm chức năng thay đổi kiểu chữ vào Blog

- Đầu tiên bạn vào chỉnh sửa template và tìm từ khóa <body> (nếu không có thì tìm <body) sau đó sửa từ:
<body>

thành
<body id='thayfont'>
- Tiếp theo bạn cho đoạn code sau vào ngay sau thẻ body :
<div id='tnbdxviii'>
    <div class='tnbdxviii_'>
        <h2>THAY ĐỔI KIỂU CHỮ</h2>
      <p>
<select class="form-control" onchange="thayfont(this);">
<option value='normal'>Font chữ bình thường</option>
<option value='italic'>Font chữ in nghiên</option>
      </select></p>
<a class='close' href='#close-bsw'><i aria-hidden='true' class='fa fa-check' style='margin:0 4px 0 0'/> ĐÃ HIỂU</a>
  </div>
</div>
- Tìm đến </body> , cho đoạn Javascript và HTML sau vào ngay trước nó :
<a class='thay-font ripple' href='#tnbdxviii' title='Thay đổi font chữ'><i class="fa fa-font" aria-hidden="true"></i></a>
<script>
function thayfont(selectTag) {
  var listValue = selectTag.options[selectTag.selectedIndex].value;
  document.getElementById("thayfont").style.fontStyle = listValue;
}
</script>
- Cuối cùng bạn cho các CSS sau vào thẻ đóng ]]></b:skin> :
#tnbdxviii{top:0;left:0;right:0;bottom:0;position:fixed;opacity:0;visibility:hidden;transition:.5s;transform:scale(1.05)}
#tnbdxviii:target{transform:scale(1);background:rgba(0,0,0,.2);opacity:1;visibility:visible;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999999999999;transition:.5s}
.tnbdxviii_{background:#fff;border-radius:4px;z-index:999;width:600px;max-width:100%;position:fixed;top:45%;left:50%;transform:translate(-50%,-50%);margin:0;padding:20px;box-sizing:border-box;box-shadow:0 0 100px rgba(0,0,0,.1)}
.tnbdxviii_ h2{margin:0 0 .75em;padding:0;text-align:center;font-weight:700;font-family:Roboto,sans-serif;color:#4267b2}
.tnbdxviii_ h3{margin:0 0 5px;padding:0;font:500 15px Roboto;text-transform:uppercase}
.tnbdxviii_ p{margin:0;padding:0;font:400 16px Roboto;color:#333;line-height:1.5}
.tnbdxviii_ p a{font-weight:700;color:#555}
.tnbdxviii_ p a:hover{text-decoration:underline}
.tnbdxviii_ a.close{padding:10px 30px;display:inline-block;margin:10px 0 0;float:right;font-size:14px;border-bottom:1px solid #ccc;font-weight:500;color:#888!important}
.tnbdxviii_ a.close:hover{color:#7577a9!important;border-color:#7577a9}
.tnbdxviii_ select{background:#d8d8d8;color:#545454;border:none;padding:10px;font-size:14px;font-weight:700;width:100%}
a.thay-font{background:#fff;color:#4a4854;box-shadow:0 0 100px rgba(0,0,0,.05);position:fixed;left:0;bottom:0;margin:1.5em;height:44px;width:44px;line-height:44px;text-align:center;border-radius:100px}
a.thay-font .splash-wrapper{border-radius:50%}
- Lưu lại sau đó vào trang chủ và xem thành quả.

Tổng kết

- Bài viết đến đây là kết thúc, nếu bạn thấy hay thì đừng quên bình luận cũng như chia sẻ bài viết để góp phần phát triển Blogspot247 nhé, chúc các bạn có một ngày tốt lành.
Có leech đi đâu vui lòng ghi nguồn Blogspot247.Com
  1. Đoạn javascript bị thiếu thẻ đóng "a" anh ơi

    Trả lờiXóa
  2. Trả lời
    1. Cho nó mới xíu ý mà anh ~~

      Xóa
    2. sao bài viết cứ để load mãi vậy em?

      Xóa
    3. Theme mặc định vậy rồi anh , để tí rảnh em vào sửa lại

      Xóa
    4. toàn thêm rip của ngta ko :3

      Xóa
    5. -.- nói nghe buồn dễ sợ

      Xóa
    6. Anh click cái biểu tượng cài đặt trong phần bài viết ấy anh, chọn kiểu chữ là nó sẽ thay đổi (chỉ thay đổi kiểu chữ ở nội dung bài viết)

      Xóa
    7. Sao ko tắt load bài viết nhỉ :3

      Xóa
    8. Ok rồi a, chỉ sửa s.scroll thành s.click thôi mà em bận quá nên quên

      Xóa
  3. độ này trình độ rip temp được đấy trùm buôn ma thuột :P

    Trả lờiXóa
  4. có cả chức năng này à??? vip quá ô ơi :)

    Trả lờiXóa
  5. cái này mỗi đổi được ở body

    Trả lờiXóa
  6. hướng dẫn tạo cái popular post ở phần footer đi ô ơi

    Trả lờiXóa
  7. Tên: ADMIN THẢO BLOG
    Link: https://www.adminthaoblog.ga
    đó a

    Trả lờiXóa
CÓ THỂ BẠN ĐANG TÌM