Đổi màu và kích thước chữ cho blog/Blogger

Một tiện ích rất hay từ Namkha blog. Tôi có thử nhiều cách khác nhau với tiện ích này, nhưng ưng ý nhất là phần bài viết này của Namkha vì các lý do sau:

Rõ ràng, chỉ dẫn tương đối dễ hiểu
Tiện ích đơn giản, áp dụng cho Blog không khó.
Bài viết có Demo, tiện cho bạn xem trước tiện ích muốn thêm.
XEM DEMO
Tiện ích này rất hữu ích, nó có thể giúp chúng ta lựa chọn cở chữ phù hợp để xem. Bạn có thể xem bài ở cở chữ lớn hoặc nhỏ khác nhau chỉ cần click vào các ô cỡ chữ, bạn cũng có thể thay đổi màu chữ với các ô chữ có màu sắc khác nhau.

THỰC HIỆN

Vào phần tử trang - > Thêm tiện ích HTML/WIDGET -> Copy và Dán đoạn code sau vào phần nội dung.
Đặt tên cho tiện ích rồi Lưu lại là xong.

$(" #fcw-color #fcw-white ").click(function() {
$(" .post-body ").css({ color: "#FFFFFF" });
return false;
});

$(" #fcw-color #fcw-blue ").click(function() {
$(" .post-body ").css({ color: "#0066CC" });
return false;
});

$(" #fcw-color #fcw-gray ").click(function() {
$(" .post-body ").css({ color: "#666666" });
return false;
});

$(" #fcw-color #fcw-red").click(function() {
$(" .post-body ").css({ color: "#F50B0B" });
return false;
});

$(" #fcw-color #fcw-yellow").click(function() {
$(" .post-body ").css({ color: "#EFFC00" });
return false;
});
// Change Font Color -- ends

// Change Font Size -- begins
$(" #fcw-size #fcw-10 ").click(function() {
$(" .post-body ").css({ fontSize: "10px" });
return false;
});

$(" #fcw-size #fcw-12 ").click(function() {
$(" .post-body ").css({ fontSize: "12px" });
return false;
});

$(" #fcw-size #fcw-14 ").click(function() {
$(" .post-body ").css({ fontSize: "14px" });
return false;
});

$(" #fcw-size #fcw-16 ").click(function() {
$(" .post-body ").css({ fontSize: "16px" });
return false;
});
$(" #fcw-size #fcw-18 ").click(function() {
$(" .post-body ").css({ fontSize: "18px" });
return false;
});
$(" #fcw-size #fcw-20 ").click(function() {
$(" .post-body ").css({ fontSize: "20px" });
return false;
});
// Change Font Size -- ends
});
</script>

<div id="tuw-font-change-widget">
<div class="tuw-fcw">
<h2>
Đổi màu chữ </h2>
<ul id="fcw-color">
<li> <a id="fcw-black" href="#">black</a> </li>
<li> <a id="fcw-white" href="#">white</a> </li>
<li> <a id="fcw-blue" href="#">blue</a> </li>
<li> <a id="fcw-gray" href="#">gray</a> </li>
<li> <a id="fcw-red" href="#">red</a> </li>
<li> <a id="fcw-yellow" href="#">yellow</a> </li>
</ul>
</div>
<div class="tuw-fcw">
<h2>
Đổi font chữ </h2>
<ul id="fcw-size">
<li> <a id="fcw-10" href="#">10</a> </li>
<li> <a id="fcw-12" href="#" title="Default Size">12</a> </li>
<li> <a id="fcw-14" href="#">14</a> </li>
<li> <a id="fcw-16" href="#">16</a> </li>
<li> <a id="fcw-18" href="#">18</a> </li>
<li> <a id="fcw-20" href="#">20</a> </li>
</ul>
</div>
</div>

BONUS

Tôi không muốn bạn rối thêm, nên tôi chỉ viết ngắn gọn về tiện ích như vậy. Nếu bạn yêu thích và muốn tuỳ biến, có thể tham khảo bài viết gốc của tác giả để biết thêm chi tiết.