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
thành
- Tiếp theo bạn cho đoạn code sau vào ngay sau thẻ body :<body> (nếu không có thì tìm <body) sau đó sửa từ:<body>
thành
<body id='thayfont'>
<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
