Add Theme Switcher Widget in Blogger / Wordpress

Theme switcher widget allows you to change theme colors or anything else on your website or blog today in this article I am going to tell you how you can add this theme switcher plugin or widget in your blogger blog.

You can also follow the same steps to install this widget in WordPress it will also work fine there.

If you want to see the demo of this theme switcher widget you can see that other right side of this page because I have already installed this widget in my blog.

It's not too much difficult but it require's full attention to install this widget I will also make a video about it how to install this widget because it's somehow confusing for new users.

This theme switcher widget gives access to use visitors to change colors, fonts etc. of your website according to their requirements whatever they want they can choose you can also specify other things like font but in this widget I haven't added fonts I only have added text color and background color you can also set the images as a background.

When user changes the color of your website using this theme switcher widget we have to store cookies using JavaScript to automatically load that color from cookie again when visitors for your user visits your website again.

Don't worry everything that is required for this widget is i will provide you.

So now without wasting our time see the steps by which you can install this widget in your blogger blog so the steps that are provided below are the steps that you have to follow to install this widget in blogger

Attention:
Before following the steps I recommend you to download the backup of your template because you you will face some problems while installing this widget. If you have created backup of your theme or template then you don't have to worry about anything.

Steps to follow:

Go to Blogger Dashboard
Go to Theme/Template Section
Click Edit HTML
Now Search for </head>

To search anything in blogger template section press Ctrl+F and then type term to search and press enter.

Now cope the code provided below and paste it just above the tag which we founded in step 4.

<style>
:root {
--selected-bgcolor: #69E781;
--selected-hoverbgcolor: #49d295;
--selected-textcolor: #0B2239;
}
/*Style Switcher*/
.switcher{z-index:999999;width:auto;max-width:130px;padding:10px;height:auto;border:0px solid #ccc;font-family:roboto;margin-right:0;position:fixed;bottom:10%;right:0;-ms-transform:translate(0,-50%);transform:translate(0,-50%);border-radius:20px 0 0 20px;background:#fff;display:none}.switcher ul{display:inline-block}.switcher li{list-style:none;display:inline-block;width:20px;height:20px;margin:1px}.switcher li div{width:100%;height:100%;cursor:pointer;color:#fff}.show_switcher{z-index:999999;position:fixed;bottom:30%;right:0;-ms-transform:translate(0,-50%);transform:translate(0,-50%);background:var(--selected-bgcolor);color:#fff;border:1px solid var(--selected-bgcolor);padding:8px 16px}.hide_switcher{z-index:999999;text-align:center;position:absolute;margin-right:5px;font-weight:700;font-size:25px;color:#ccc;cursor:pointer;transition:.2s all;top:-30px;left:40%;background:#fff;width:40px;border-radius:30px 30px 0 0}.hide_switcher:hover{color:#000}.slideInRight{display:inline-block;-webkit-animation-name:slideInRight;animation-name:slideInRight;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes slideInRight{0%{-webkit-transform:translateX(100%);transform:translateX(100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInRight{0%{-webkit-transform:translateX(100%);transform:translateX(100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{visibility:hidden;-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes slideOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{visibility:hidden;-webkit-transform:translateX(100%);transform:translateX(100%)}}.selector{height:60px;width:60px;border-radius:50%;cursor:pointer;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.selector::before{width:calc(100% - 12px);height:calc(100% - 12px);border:4px solid #fff;border-radius:50%;position:absolute;top:6px;left:6px;background-color:transparent;content:"";box-sizing:border-box;-webkit-transform:scale(0);transform:scale(0);transition:.5s ease}.selector--active{position:relative}.selector--active::before{-webkit-transform:scale(1);transform:scale(1)}
.breadcrumbs {background: #fff;color: #a4b0be;padding: 15px;display: block;margin: 0 10px 20px 0;border-radius: 3px;box-shadow: 0 2px 8px rgba(0,0,0,0.05);border: 0;font-size: 12px;}.breadcrumbs a,.breadcrumbs a:hover{color:#a4b0be}#content{width:67.8%;float:left}
@media (max-width: 728px) {.computer{display:none;}}a{color:var(--selected-textcolor)}
.kotak_iklanpost{margin:20px auto;text-align:center}#st-4{z-index:70!important}.kotak_iklanpost img{margin:auto;-webkit-touch-callout:initial;-webkit-user-select:initial;-khtml-user-select:initial;-moz-user-select:initial;-ms-user-select:initial;user-select:auto;pointer-events:auto;width:100%}
span.mark, mark{background-color: var(--selected-bgcolor);color: var(--selected-textcolor);padding: 2px 5px;border-radius: 2px;}
</style>

Replacement	Description
--selected-bgcolor: #69E781;	Replace marked hex code with the background color code that you like.
--selected-hoverbgcolor: #49d295;	Replace marked hex code with the Hover background color code that you like.
--selected-textcolor: #0B2239;	Replace marked hex code with the Text color code that you like.

Now replace every color code that is the background color with var(--selected-bgcolor); i mean that. If before it is background:#fc801c; replace it with background:var(--selected-bgcolor);
Now replace every color code that is the hover background color with var(--selected-hoverbgcolor); i mean that. If before it is background:#fc801c; replace it with background:var(--selected-hoverbgcolor);
Now replace every color code that is the text color with var(--selected-textcolor); i mean that. If before it is background:#fc801c; replace it with background:var(--selected-textcolor);
Save Theme/Template

Now Making a widget and adding html and javascript code:

Go to Blogger Dashboard
Go to Layout Section
Click Add New Widget
Choose HTML/Javascript widget from the list

You can place this widget anywhere if will not effect the position of this widget because it is fixed.

Now cope the code provided below and paste it as widget content.

<button class="show_switcher"><i class="fa fa-eye" aria-hidden="true"></i></button><div class="switcher"><span class="hide_switcher">×</span><ul><li><div class="selector" data-bgcolor="#ffbe1b" data-textcolor="#000000"></div></li><li><div class="selector" data-bgcolor="#fe7860" data-textcolor="#000000"></div></li><li><div class="selector" data-bgcolor="#506cf0" data-textcolor="#000000"></div></li><li><div class="selector" data-bgcolor="#2aabe4" data-textcolor="#000000"></div></li><li><div class="selector" data-bgcolor="#ff5000" data-textcolor="#000000"></div></li><li><div class="selector" data-bgcolor="#0b172a" data-textcolor="#000000"></div></li><li><div class="selector" data-bgcolor="#ff8800" data-textcolor="#000000"></div></li><li><div class="selector" data-bgcolor="#73cff8" data-textcolor="#000000"></div></li><li><div class="selector" data-bgcolor="#4285f4" data-textcolor="#000000"></div></li><li><div class="selector" data-bgcolor="#ea4335" data-textcolor="#000000"></div></li><li><div class="selector" data-bgcolor="#55acee" data-textcolor="#000000"></div></li><li><div class="selector" data-bgcolor="#7b0099" data-textcolor="#000000"></div></li><li><div class="selector" data-bgcolor="#a4c639" data-textcolor="#000000"></div></li><li><div class="selector" data-bgcolor="#003399" data-textcolor="#000000"></div></li><li><div class="selector" data-bgcolor="#ffe2d2" data-textcolor="#000000"></div></li></ul></div>
<script>
// Cookie
function hexToRgb(e,i){e=e.replace("#","");var t=parseInt(3==e.length?e.slice(0,1).repeat(2):e.slice(0,2),16),n=parseInt(3==e.length?e.slice(1,2).repeat(2):e.slice(2,4),16),s=parseInt(3==e.length?e.slice(2,3).repeat(2):e.slice(4,6),16);return i?"rgba("+t+", "+n+", "+s+", "+i+")":"rgb("+t+", "+n+", "+s+")"}function setCookie(e,i,t){var n=new Date;n.setTime(n.getTime()+1e3*t*60*60*24);var s="expires="+n.toGMTString()+";path=/";document.cookie=e+"="+i+"; "+s}function getCookie(e){for(var i=e+"=",t=document.cookie.split(";"),n=0;n<t.length;n++){var s=t[n].trim();if(0==s.indexOf(i))return s.substring(i.length,s.length)}return""}function deleteCookie(e){var i=new Date;i.setTime(i.getTime()-864e5);var t="expires="+i.toGMTString();document.cookie=e+"=; "+t}function disPlayAllCookies(){for(var e=document.getElementById("cookies"),i=document.cookie.split(";"),t=0;t<i.length;t++){var n=document.createElement("p");n.innerHTML=i[t].trim(),e.appendChild(n)}}function deleteAllCookies(){for(var e=document.cookie.split(";"),o=0;o<e.length;o++){var i=e[o],l=i.indexOf("="),t=l>-1?i.substr(0,l):i;document.cookie=t+"=;expires=Thu, 01 Jan 2020 00:00:00 GMT"}}function addmeta(o,a){$("meta[name="+o+"]").attr("content",a)}var cookiebgColor=getCookie("bgColor");if(cookiebgColor==null || cookiebgColor=="")var color="#69E781";else color=cookiebgColor;addmeta("theme-color",color),addmeta("msapplication-navbutton-color",color),addmeta("apple-mobile-web-app-capable","yes"),addmeta("apple-mobile-web-app-status-bar-style",color);
/**  Style Switcher  **/
!function(){"use strict";const t=[...document.querySelectorAll(".selector")];for(let e=0;e<t.length;e++)t[e].style.backgroundColor=t[e].getAttribute("data-bgcolor"),t[e].style.color=t[e].getAttribute("data-textcolor"),t[0].classList.add("selector--active"),document.documentElement.style.setProperty("--selected-bgcolor",getCookie("bgColor")),document.documentElement.style.setProperty("--selected-textcolor",getCookie("textColor")),document.documentElement.style.setProperty("--selected-hoverbgcolor",getCookie("hoverbgColor")),t[e].addEventListener("click",function(){t.forEach(t=>this===t?t.classList.add("selector--active"):t.classList.remove("selector--active")),window.location.reload(),document.documentElement.style.setProperty("--selected-bgcolor",this.getAttribute("data-bgcolor")),document.documentElement.style.setProperty("--selected-textcolor",this.getAttribute("data-textcolor")),document.documentElement.style.setProperty("--selected-hoverbgcolor",hexToRgb(this.getAttribute("data-bgcolor"),.2)),setCookie("bgColor",this.getAttribute("data-bgcolor"),7),setCookie("textColor",this.getAttribute("data-textcolor"),7),setCookie("hoverbgColor",hexToRgb(this.getAttribute("data-bgcolor"),.2),7)})}();
/*Show-Hide function*/
$(document).ready(function(){$(".show_switcher").click(function(){$(this).addClass("slideOutRight"),$(".switcher").removeClass("slideOutRight"),$(".switcher").addClass("slideInRight")}),$(".hide_switcher").click(function(){$(".switcher").addClass("slideOutRight"),$(".show_switcher").css("display","inline-block"),$(".show_switcher").removeClass("slideOutRight"),$(".show_switcher").addClass("slideInRight")})});
/*End*/
</script>

Attributes	Value
data-bgcolor	Replace hex code with the hex code of color which you want to set as background.
data-textcolor	Replace hex code with the hex code of color which you want to set as text color.

You are done. You have successfully added theme switcher widget in blogger now just go and have look.

I hope that you will like my this post and now you have successfully added this theme switcher plugin or widget in your blogger blog and this works perfect for me I don't know about you if you have any difficulty you can comment me below I will try to resolve your problem as soon as possible.

Conclusion:

In this article you have learnt how you can install theme switcher widget in blogger or WordPress.

If you have followed all the steps perfectly as they are listed then this widget will be installed and it will work perfectly fine but if you miss any step or do something wrong then this is it will not work in that case you can contact me or comment below.

Video will be Uploaded soon.

Good Luck!

source:softwebtuts.com

A4F

Add Theme Switcher Widget in Blogger / Wordpress