"This article is directly taken from theamanstark's auto theme changer repository".
Hello! Welcome to Tech Ankur.
If you are looking for how to add Auto theme changer to blogger website then this post is just for you.
What is Auto theme changer & Working
- Auto Theme Changer will change the theme on site load, opening posts, pages, searches, labels, categories, and reloading the site.
- The Auto Theme Changer is turned on by default for every user; this behavior cannot be configured right now but will be added in the later version of autoThemeChanger.
- Auto Themer will change the site theme every 5 seconds, giving it a disco-like look. Use this as an Easter egg on your site.
- Auto Theme Changer and Auto Themer will be disabled in dark mode since Plus UI lacks support for dark mode theme colors.
- When the user returns to light mode from dark mode, the toggle button will be activated automatically upon the next site load or reload.
- The future version of autoThemeChanger is heavily influenced by the number of people who are currently using the code as well as the next Plus UI upgrade. If the code is not widely used, an update will be issued occasionally. Instead of in a timely manner.
You can see the demo here⤵
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Theme.
Step 3: Click the arrow down icon next to 'customize' button.
Step 4: Click Edit HTML, you will be redirected to editing page.
Step 5: Now search the code </head> and paste the following javascript Code just above to it.
<style>
.head1,.para1,.para2{margin-left:6px}.head1{font-size:14px;font-family:"Google Sans Text";color:#343435;margin-bottom:-7px;font-weight:unset}.para1{margin-bottom:-11px}.brr{content:"";display:block;border-bottom:1px solid var(--contentL);margin:12px 5px}.cusP{margin-bottom:-20px}@media screen and (min-width:750px){.switch{left:205px;transform:rotate(90deg);top:-48px}}@media screen and (max-width:361px) and (min-width:322px){.switch{left:220px!important;top:-45px!important}}@media screen and (max-width:321px){.switch{left:202px!important;top:-46px!important;transform:rotate(90deg)!important}}@media screen and (max-width:376px) and (min-width:362px){.switch{left:240px!important;top:-45px!important}}@media screen and (max-width:415px) and (min-width:395px){.switch{left:280px!important;top:-45px!important}}@media screen and (max-width:394px) and (min-width:377px){.switch{left:255px!important;top:-45px!important}}@media screen and (max-width:749px) and (min-width:416px){.switch{left:286px;top:-45px}}.switch{position:relative;display:inline-block;width:55px;height:30px;margin-bottom:-2000px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:"";height:22px;width:22px;left:3.5px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--linkC)}.drK input:checked+.slider{background-color:var(--darkU)}input:focus+.slider{box-shadow:0 0 1px #2196f3}input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}
</style>
Note!We suggest adding CSS using the second method, which is to use an external CSS style cdn link. This way, if any changes are made to the code, you will see the updates on your site right away, but if you intend to customize the widget, use the first method.
(ii) Using an external CSS style cdn link 👇
If you want to get the latest updates as soon as possible, then use the below CDN link.
<link rel="stylesheet" href="https://theamanstark.com/cdn/blogger/plus-ui/autoThemeChanger/latest/autoTheme.min.css" />
If you want to use version 1.0 of autoThemeChanger, then use the below cdn link.
<link rel="stylesheet" href="https://theamanstark.com/cdn/blogger/plus-ui/autoThemeChanger/v1.0/autoTheme.min.css" />
Step 6:Now search the code </body> and paste the following javascript Code just above to it.
If you want to get the latest updates as soon as possible, then use the below CDN link.
<script src='https://theamanstark.com/cdn/blogger/plus-ui/autoThemeChanger/latest/autoTheme.min.js'></script>
If you want to use version 1.0 of Auto ThemeChanger, then use the below CND link.
<script src='https://theamanstark.com/cdn/blogger/plus-ui/autoThemeChanger/v1.0/autoTheme.min.js'></script>
Step 7: Finally, add the following HTML in the <div class='cusP'> check the image below to know the place of addition.
<div class="brr"/><h6 class="head1">Auto Theme Changer</h6><p class="para1">When turned on automatically changes</p><p class="para2">the theme color on reload.</p><label class="switch"><input id="theme-toggle" type="checkbox"/><span class="slider round"/></label><div class="brr" style="margin-top:-6px;"/><h6 class="head1">Auto Themer</h6><p class="para1">When turned on automatically changes</p><p class="para2">the theme color every 5 sec.</p><label class="switch"><input id="auto-theme" type="checkbox"/><span class="slider round"/></label>
Important!You can't currently adjust the Auto Themer's time limit from 5 seconds to a custom number; This will be included in a future version of the code.
Step 8: Then Save
That's done!
Source:
https://github.com/theamanstark/autoThemeChanger#-documentation