You are here:Home » JavaScript » Reading Mode Widget/Plugin for Blogger and WordPress

Reading Mode Widget/Plugin for Blogger and WordPress


Blogging is not all about creating content. It is also about gaining loyal readers. Apart from the quality of the content you provide, the visibility and readability of the content also matters. To be specific, readability includes font styles, backgrounds and eye-friendly modifications to the text on the webpage.

It is however difficult to modify the styles according to individual reader’s choice. So, it is better to leave that option to the reader himself. We have developed a simple and useful snippet of HTML/JS that allows the users change the font styles and sizes according to their eye feasting taste.

Reading Mode widget for blogger wordpress from amfastech

Copy the follow snippet of code and install it on your Blogger/WordPress blog.
<script>
function myFunction() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="Open Sans";
}
function myFunction2() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="Roboto";
}
function myFunction3() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="Calibri";
}
function myFunction4() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="Calibri";
}
function myFunction5() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="PT Sans";
}
function myFunction6() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="Georgia";
}
</script>
<button type="button" onclick="myFunction()">Style 1</button>
<button type="button" onclick="myFunction2()">Style 2</button>
<button type="button" onclick="myFunction3()">Style 3</button>
<button type="button" onclick="myFunction4()">Style 4</button>
<button type="button" onclick="myFunction5()">Style 5</button>
<button type="button" onclick="myFunction6()">Style 6</button>

Customization

Change the ID “Blog1” with the blog post area of your blog. “Blog1” here is the blog post area of Blogger blog.

Change x.style.fontSize with the values of your choice.

Change x.style.color with the color of your choice.

Change x.style.fontFamily with the font family of your choice.

This is a basic script and needs to be tweaked. Any suggestions of the tweaks from your side are welcomed. You suggestions will be credited and updated in the article.

0 comments:

Post a Comment

We're happy to read your thoughts and we'd try our level best to clear your queries if asked. Let's discuss it in a better way. Please don't spam and spoil the conversation :) Thank you!!