Auto theme color changer script for Plus Ui Blogger theme.

"This article is directly taken from theamanstark's auto theme changer repository".

Auto theme color changer script for Plus Ui Blogger theme.

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.

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.

Blogger website dashboard -> Click on theme section-> Click on arrow icon -> Click on backup-> Click on download -> Save the downloaded file in a safe place for future use.

Step 1:

Go to Blogger Dashboard.

Step 2:

Click theme button, And Click EDIT HTML.

Step 3:

Now copy JS code and paste 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 Queries */
            @media screen and (min-width: 750px) {
                .switch {
                    left: 205px;
                    transform: rotate(90deg);
                    top: -48px;
                }
            }
            /* Other Media Queries */
            /* ... */
        </style>
    

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 it.

        <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 CDN 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"></span>
            </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"></span>
                </label>
            </div>
        </div>
    

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