Widget Pengatur Ukuran & Warna Text posting Widget Pengatur Ukuran & Warna Text posting

DEMO

Masukkan kode di bawah ini diatas kode </head>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

lalu simpan template....

dan tambahkan ini di layout - gadget anda....

<!-- http://TheUnnecessaryWorld.co.cc -->

<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: 
#088A08 !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>

<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: "#088A08" });

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>

<!-- TUW Blogger Change Font color and size widget begins -->

<div id="tuw-font-change-widget">

<div class="tuw-fcw">

<h2> Ganti warna tulisan </h2>

<ul id="fcw-color">

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

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

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

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

</ul>

</div>



<div class="tuw-fcw">

<h2> Ganti ukuran tulisan </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 -->

<!-- Code ends -->