Plus Ui 2.6.3 | Blogger Auto Theme Changer Code

Auto Theme Changer - Plus UI 2.6.3 latest Version Addon

Hello! Welcome to DaudBD Blog.

In this article, I will share with you Plus Ui 2.6.3 | Auto Theme Changer Addon Blogger.

Autotheme

Auto Theme Changer Addon

  • Auto Theme Changer When turned on automatically : changes the theme color on reload.
  •  Auto Themer When turned on automatically changes : the theme color every 5 sec.

Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.

Step 1:Just add the CSS using any one of the following methods above the </head> in your theme.

<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 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 2:Now, put the following javascript above: </body> in your theme, using any one of the cdn links.

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 autoThemeChanger, then use the below cdn link.

<script src='https://theamanstark.com/cdn/blogger/plus-ui/autoThemeChanger/v1.0/autoTheme.min.js'></script>

Step 3: Finally, add the following HTML in the <div class='cusP'>; check the image below to know the place of addition.

html help
<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>

Note: If you experience any problems with the code, raise the issue on the repo's Issues tab. Also, you cannot presently adjust the time-frame of Auto Themer from 5 seconds to a custom number; this will be included in a future version of the code.

Source:
Aman Singh.

Conclusion

In this article, I have shared Auto Theme Changer - Plus UI Addon. I hope you have liked it Please do share it with your friends and follow our blog for more.

About the author

Daud
Hey! I'm Daud, Currently Working in IT Company BD. I always like to learn something new and teach others.

Post a Comment

To avoid SPAM, all comments will be moderated before being displayed.
Don't share any personal or sensitive information.