Theme Style Switcher For Blogger/Website

From above image itself you can understand what we going to post today for you. As a main factor in website/blog to make it user friendly, mean visitors should satisfied while browsing your website. So sometime visitors are likely to make your site content in higher font size or want to change the color as well as body background through their own style. But it's not possible on the website unless the administrator change the style of it.

Theme Style Switcher widget allow the visitors to change such style (mentioned above) live without asking to administrator of it. This widget can be used to change the background color, font size, font type and text color by the visitor live on your website/blog.

Live Demo

How To Add Theme Style Switcher To Blogger

1. Go to Blogger > Template > Edit HTML.

2. Find (Ctrl+F) </body> and add the following script before it.

<script src='http://softglad.at.ua/widgets/theme-style-cookie.js' type='text/javascript'/>
<script type='text/javascript'>
/**
 * Theme Style Switcher by Ashiq (SOFTGLAD)
 * URL: https://www.softglad.com
 */

//<![CDATA[
var expiredStyle = 7000,
    dbs = document.body.style;

// background switcher
function bgSwitch(v) {
    dbs.background = v;
    createCookie('bgstyle', v, expiredStyle);
}

// font switcher
function fontSwitch(v) {
    dbs.fontFamily = v;
    createCookie('fontstyle', v, expiredStyle);
}

// font sizer
function changeFontSize(v) {
    dbs.fontSize = v + 'px';
    createCookie('fontsize', v, expiredStyle);
}

// color switcher
function fontColor(v) {
    dbs.color = v;
    createCookie('fontcolor', v, expiredStyle);
}

if (readCookie('bgstyle')) {
    dbs.background = readCookie('bgstyle');
}
if (readCookie('fontstyle')) {
    dbs.fontFamily = readCookie('fontstyle');
}
if (readCookie('fontsize')) {
    dbs.fontSize = readCookie('fontsize') + 'px';
    document.getElementById('fontSizer').value = readCookie('fontsize');
}
if (readCookie('fontcolor')) {
    dbs.color = readCookie('fontcolor');
    document.getElementById('fontColorer').value = readCookie('fontcolor');
}

function resetStyle() {
    eraseCookie('bgstyle');
    eraseCookie('fontstyle');
    eraseCookie('fontsize');
    eraseCookie('fontcolor');
    window.location.reload(1);
}
//]]>
</script>

3. Click Save Template
4. Now you have to add HTML and CSS to website/blog. So if you love to add with one click installer, then you may click below Add To Blogger Button.

OR Go to Layout page > Add Gadget > HTML/JavaScript and Copy-Paste in it.

<style>
#stylechanger {
  border:none;
  margin:0 0;
  padding:0 0;
  width:98%;
  text-align:left;
  font:normal 11px Arial,Sans-Serif;
  border-collapse:collapse;
}

#stylechanger th,
#stylechanger td {
  vertical-align:middle;
  border:none !important;
  padding:2px 10px;
}

#stylechanger th.title {
  background-color:#33AFE0;
  padding:5px 10px;
  margin:0 0 10px;
  text-transform:uppercase;
  font-size:12px;
  font-family: Arial,Sans-Serif;
  color: #FFF;
}

#stylechanger select,
#stylechanger input[type="text"] {
  width:130px;
  padding:2px;
  font:bold 11px Arial,Sans-Serif;
  display:block;
  margin:0 0 0;
  height:24px;
  outline: 0;
}

#stylechanger select option {
  padding:5px 10px;
  cursor:pointer;
}

#stylechanger button {
  font:normal 11px Arial,Sans-Serif;
  padding:3px 5px;
  cursor:pointer;
}

#stylechanger #bgColorer {
  overflow:hidden;
  margin:10px 0 10px;
}

#stylechanger #bgColorer span {
  display:block;
  float:left;
  width:20px;
  height:20px;
  border:1px solid black;
  margin:0 5px 0 0;
  cursor:pointer;
}

#stylechanger input[type="text"] {
  width:118px !important;
  padding:4px !important;
  height:auto !important;
}
</style>

<table border="0" id="stylechanger">
    <tr><th class="title" colspan="2">Background Color Changer</th></tr>
    <tr>
        <td colspan="2">
            <div id="bgColorer">
                <span style="background-color:#523690;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#248bcb;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#fed100;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#c91212;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#3a9838;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#36404a;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#ffffff;" onclick="bgSwitch(this.style.backgroundColor);"></span>
            </div>
        </td>
    </tr>
    <tr><th>Font Type</th>
        <td>
            <select onchange="fontSwitch(this.value);">
                <option selected />--
                <option value="&#39;Book Antiqua&#39;,Serif" />Book Antiqua
                <option value="&#39;Times New Roman&#39;,Serif" />Times New Roman
                <option value="Georgia,Serif" />Georgia
                <option value="Arial,Sans-Serif" />Arial
                <option value="Tahoma,Verdana,Arial,Sans-Serif" />Tahoma
                <option value="&#39;Trebuchet MS&#39;,Arial,Sans-Serif" />Trebuchet
                <option value="Verdana,Arial,Sans-Serif" />Verdana
                <option value="&#39;Century Gothic&#39;,Tahoma,Verdana,Arial,Sans-Serif" />Century Gothic
                <option value="&#39;Comic Sans MS&#39;,Serif" />Comic Sans
            </select>
        </td>
    </tr>
    <tr><th>Text Color</th>
        <td><input type="text" id="fontColorer" value="#000000" onkeyup="fontColor(this.value);"/></td>
    </tr>
    <tr><th>Font Size</th>
        <td><input type="text" id="fontSizer" value="12" maxlength="3" onkeyup="changeFontSize(this.value);"/></td>
    </tr>
    <tr><th>Reset</th>
        <td><button onclick="resetStyle();">Reset</button></td>
    </tr>
</table>

5. Save it.

Hope you like Theme Style Switcher widget as well a my post and this widget will work on custom blogger template and blogger template. Comment it below for any error or review about this widget.

SHARE

Tweet