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

Áo Đôi Đẹp

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%}