Let Readers Choose Font Style & Size Widget

Tweets by @mrqasimashraf

It is very important that you let your blog to be easily accessible by any user's, that's why we come up with this awesome widget that allow visitors to view your blog in any font style and size they wish. Considering user's with bad sight, large or small screen resolution, so it will make sense if you can provide them an option to view your blog according to their own convenience. One thing i love most about this widget is that, it apply the changes made automatically without refreshing the page, cool right? Now let's get to work.

DEMO:

Times New Roman Arial Book Antiqua Bookman Old Style Century Gothic Comic Sans Ms Tahoma Trebuchet Ms Verdana 8 9 10 11 12 14 16 18

How to Add Font Style And Size Widget

• Go to your dashboard
• Click on Layout > Add a Gadget > HTML/JavaScript 
• Paste the following code in the content box and give it any title.

<script>
function go1(){
if (document.selecter2.select2.options
[document.selecter2.select2.selectedIndex].value != "none") {
document.getElementById('main').style.fontSize
=document.selecter2.select2.options
[document.selecter2.select2.selectedIndex].value
}
}

function go2(){
if (document.selecter2.select3.options
[document.selecter2.select3.selectedIndex].value != "none") {
document.getElementById('main').style.fontFamily
=document.selecter2.select3.options
[document.selecter2.select3.selectedIndex].value
}
}
</script>
<form id="forma" name="selecter2" method="POST">

<select onchange="go2()" style="font-family:verdana;font-size:8pt" name="select3" size="1">
<option value="Times New Roman"/>Times New Roman
<option value="Arial"/>Arial
<option selected value="Book Antiqua"/>Book Antiqua
<option value="Bookman Old Style"/>Bookman Old Style
<option value="Century Gothic"/>Century Gothic
<option value="Comic Sans Ms"/>Comic Sans Ms
<option value="Tahoma"/>Tahoma
<option selected value="Trebuchet Ms"//>Trebuchet Ms
<option value="Verdana"/>Verdana
</select>
<select onchange="go1()" style="font-family:verdana;font-size:8pt" name="select2" size="1">
<option value="8px"/>8
<option value="9px"/>9
<option value="10px"/>10
<option value="11px"/>11
<option selected value="12px"/>12
<option value="14px"/>14
<option value="16px"/>16
<option value="18px"/>18
</select></form>

•  Save your widget and you are done.

Enjoyed This Post? Subscribe For More Update!

Follow @mrqasimashraf