Đổi màu và kích cỡ chữ các bài đăng trên blog

Đối với người quản trị blog thì việc đổi màu và kích cỡ chữ các bài đăng trên blog là chuyện "đương nhiên" nhưng với khách tham quan thì vấn đề này là "KHÔNG THỂ"...

Nhưng với thủ thuật dưới đây, khách tham quan có thể đổi màu và kích cỡ chữ ở các bài đăng dễ dàng, chỉ cần "Click và Click" chuột mà thôi.

Bạn bấm thử các ô màu và ô số phía dưới để "cảm nhận" nha.

 

Change Font Color

black whitebluegray

Change Font Size

10 121416

Rất đơn giản, bạn chỉ cần đăng nhập vào blog > Chọn Thiết kế > Thêm tiện ích HTML rồi dán tất cả các đoạn code phía dưới vào và bấm Lưu lại là xong.
LINK TẢI

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br />
<br />
<!-- http://TheUnnecessaryWorld.co.cc --><br />
<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-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><br />
<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;
});
// 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;
});
// Change Font Size -- ends
});
</script><br />
<!-- TUW Blogger Change Font color and size widget begins --><br />
<div id="tuw-font-change-widget"><div class="tuw-fcw"><h2>Change Font Color </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>
</ul></div><br />
<div class="tuw-fcw"><h2>Change Font Size </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>
</ul></div></div><!-- TUW Blogger Change Font color and size widget ends --><br />

nguồn: dunghennessy

...