Đổi màu và kích thước chữ bằng jquery cho blogspot

Namkna đã từng giới thiệu thủ thuật Tăng giảm cỡ chữ của nội dung bài đăng Blogspot hôm nay Namkna sẽ giới thiệu thêm 1 Scrip mới bao gồm cả dổi màu chữ và thay đổi cỡ chữ cho bài viết của blogspot. 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.

XXEM DEMO

☼ Bắt đầu thủ thuật
1. Đầu tiên bạn hãy vào tài khoản blogger
2. Vào Thiết kế chọn Thêm tiện ích
3. Chọn phần Thêm tiện ích -> Tạo một HTML/Javarscrip

4. Dán code bên dưới vào

<script type="text/javascript" src="http://tavannam.googlecode.com/files/jquery-latest.js"></script>
<!-- http://namkna.blogspot.com/ -->
<style type="text/css">
/** TUW Font Color and Size Change widget begins **/
#tuw-font-change-widget {width: auto;}
#tuw-font-change-widget h2 {margin: 0 0 8px 0 !important;font: 12px Tahoma !important;font-weight: normal !important;border: 0 !important;}
#tuw-font-change-widget ul {width: auto; overflow: hidden;margin: 0 0 20px !important;padding: 0 !important;list-style; none !important;}
#tuw-font-change-widget ul li {width: 20px !important;height: 20px !important;overflow: hidden;margin: 0 10px 0 0 !important;padding: 2px !important;display: block !important;float: left !important;border: 1px solid #CCCCCC !important;}
#tuw-font-change-widget ul li a {width: 20px !important;height: 20px !important;display: block !important;line-height: 18px !important;text-align: center !important;color: #FFFFFF !important;font-size: 11px !important;font-family: Tahoma !important;text-decoration: none !important; outline: 0 !important;}
#fcw-black { background: #000000 !important; } 
#fcw-white { background: #FFFFFF !important; } 
#fcw-blue { background: #0066CC !important; } 
#fcw-gray { background: #666666 !important; }
#fcw-red { background: #F50B0B !important; }
#fcw-color a { text-indent: -999px !important; }
#fcw-size a { text-indent: 0 !important; background: #333333 !important; }
/** TUW Font Color and Size Change widget begins **/
</style>
<script type="text/javascript">
$(document).ready(function(){
// Change Font Color -- begins
$(" #fcw-color #fcw-black ").click(function() {
$(" .post-body ").css({ color: "#000000" });
return false;
});

$(" #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;
});
// 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;
});
// Change Font Size -- ends
});
</script>
<!-- TUW Blogger Change Font color and size widget begins -->
<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>
</ul></div>
<div class="tuw-fcw"><h2>Đổi cỡ 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>
</ul></div></div>
<!-- TUW Blogger Change Font color and size widget ends -->

- Các bạn nên Download file Js về TẠI ĐÂY và upload lên host riêng để dùng TẠI ĐÂY
- Thay đổi 2 phần màu đỏ cho phù hợp với ý bạn
- Nếu muốn fon chữ mặc định bạn đầu cho blog là 14 thay vì 12 như trên thì bạn thay đổi đoạn code sau:

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

Thành:

<li> <a id="fcw-10" href="#">10</a> </li>
<li> <a id="fcw-12" href="#">12</a> </li>
<li> <a id="fcw-14" href="#" title="Default Size">14</a> </li>
<li> <a id="fcw-16" href="#">16</a> </li>
<li> <a id="fcw-18" href="#">18</a> </li>

- Nếu bạn nào không muốn mất thời gian thì làm đến đây là đủ.


☼ Cài đặt nâng cao: Thêm một ô chỉnh màu sắc.
- Thêm các đoạn code sau:

#fcw-yellow { background: #EFFC00 !important; }

và:

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

và:

<li> <a id="fcw-yellow" href="#">yellow</a> </li>

Trong đó: yellow là tên màu.chữ. 
                 color: "#EFFC00" là mã màu chữ. bạn có thể xem mã màu TẠI ĐÂY
Thêm chúng vào sau các đoạn co tương ứng như sau.

#fcw-red { background: #F50B0B !important; }

và:

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

và:

<li> <a id="fcw-red" href="#">red</a> </li>

☼ Cài đặt nâng cao: Thêm một ô chỉnh cỡ chữ.
Bạn thêm các đoạn code sau:

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

và:

<li> <a id="fcw-20" href="#">20</a> </li>

Trong đó : 20 là cỡ chữ muốn thêm
Thêm Vào sau các đoạn code lần lượt là:

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

và:

<li> <a id="fcw-18" href="#">18</a> </li>

- Ví dụ Code sau khi thêm 2 bước nâng cao trên:

<script type="text/javascript" src="http://tavannam.googlecode.com/files/jquery-latest.js"></script>
<!-- http://namkna.blogspot.com/ -->
<style type="text/css">
/** TUW Font Color and Size Change widget begins **/
#tuw-font-change-widget {width: auto;}
#tuw-font-change-widget h2 {margin: 0 0 8px 0 !important;font: 12px Tahoma !important;font-weight: normal !important;border: 0 !important;}
#tuw-font-change-widget ul {width: auto; overflow: hidden;margin: 0 0 20px !important;padding: 0 !important;list-style; none !important;}
#tuw-font-change-widget ul li {width: 20px !important;height: 20px !important;overflow: hidden;margin: 0 10px 0 0 !important;padding: 2px !important;display: block !important;float: left !important;border: 1px solid #CCCCCC !important;}
#tuw-font-change-widget ul li a {width: 20px !important;height: 20px !important;display: block !important;line-height: 18px !important;text-align: center !important;color: #FFFFFF !important;font-size: 11px !important;font-family: Tahoma !important;text-decoration: none !important; outline: 0 !important;}
#fcw-black { background: #000000 !important; } 
#fcw-white { background: #FFFFFF !important; } 
#fcw-blue { background: #0066CC !important; } 
#fcw-gray { background: #666666 !important; }
#fcw-red { background: #F50B0B !important; }
#fcw-yellow { background: #EFFC00 !important; }
#fcw-color a { text-indent: -999px !important; }
#fcw-size a { text-indent: 0 !important; background: #333333 !important; }
/** TUW Font Color and Size Change widget begins **/
</style>
<script type="text/javascript">
$(document).ready(function(){
// Change Font Color -- begins
$(" #fcw-color #fcw-black ").click(function() {
$(" .post-body ").css({ color: "#000000" });
return false;
});

$(" #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>
<!-- TUW Blogger Change Font color and size widget begins -->
<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>
<!-- TUW Blogger Change Font color and size widget ends -->

Chúc thành công!

Tweet