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.
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <script type='text/javascript'>/** * Theme Style Switcher by Ashiq (SOFTGLAD) * URL: https://www.softglad.com *///<![CDATA[var expiredStyle = 7000, dbs = document.body.style;// background switcherfunction bgSwitch(v) { dbs.background = v; createCookie('bgstyle', v, expiredStyle);}// font switcherfunction fontSwitch(v) { dbs.fontFamily = v; createCookie('fontstyle', v, expiredStyle);}// font sizerfunction changeFontSize(v) { dbs.fontSize = v + 'px'; createCookie('fontsize', v, expiredStyle);}// color switcherfunction 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> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | <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="'Book Antiqua',Serif" />Book Antiqua <option value="'Times New Roman',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="'Trebuchet MS',Arial,Sans-Serif" />Trebuchet <option value="Verdana,Arial,Sans-Serif" />Verdana <option value="'Century Gothic',Tahoma,Verdana,Arial,Sans-Serif" />Century Gothic <option value="'Comic Sans MS',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.
Spread The Love, Share Our Article
0 comments:
Post a Comment