Here we are with a fully functional widget for your Blogger blog to give your readers more options to increase their reading comfort.
Features of This Widget
- It's completely packed and well formatted.
- It allow us to change the text color of the post area as black, white, blue and gray.
- It allow us to change the text size of the post area as 10, 12, 14, 16.
Installation
Step #1 : From your Blogger Dashboard navigate to Layout › Edit HTML. On that page in the code area (text area) search (CTRL + F) for </head> and just before </head> line insert this line of code and save the template.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
P.S : If your blog already have a jQuery main file linked to it then above step isn't required.
Step #2 : Now navigate to Layout › Page Elements and on the sidebar area open Add A Gadget link and in the new pop up window select HTML/javaScript widget.
On the new page in the same pop up window leave the Title area blank and under the Content area put this code and save the widget and you are done.
<!– Code Begins –>
<!– http://blog.ajDeskta.com/ –>
<style type="text/css">
/** ajDeskta Blog - 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 { background: #333333 !important; }
/** ajDeskta Blog - 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;
});</p> <p>$(" #fcw-color #fcw-white ").click(function() {
$(" .post-body ").css({ color: "#FFFFFF" });
return false;
});</p> <p>$(" #fcw-color #fcw-blue ").click(function() {
$(" .post-body ").css({ color: "#0066CC" });
return false;
});</p> <p>$(" #fcw-color #fcw-gray ").click(function() {
$(" .post-body ").css({ color: "#666666" });
return false;
});
// Change Font Color — ends</p> <p>// Change Font Size — begins
$(" #fcw-size #fcw-10 ").click(function() {
$(" .post-body ").css({ fontSize: "10px" });
return false;
});</p> <p>$(" #fcw-size #fcw-12 ").click(function() {
$(" .post-body ").css({ fontSize: "12px" });
return false;
});</p> <p>$(" #fcw-size #fcw-14 ").click(function() {
$(" .post-body ").css({ fontSize: "14px" });
return false;
});</p> <p>$(" #fcw-size #fcw-16 ").click(function() {
$(" .post-body ").css({ fontSize: "16px" });
return false;
});
// Change Font Size — ends
});
</script>
<!– ajDeskta Blog - Blogger Change Font color and size widget begins –>
<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></p> <p><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>
<!– ajDeskta Blog - Blogger Change Font color and size widget ends –>
<!– Code ends –>
Have fun with this new widget on your blog.
enjoy :)
