Time To Color Blogger Widget


The time to color Blogger widget will generate a background color for your blog according to the current time and update every second.




The end result will look like this.



The Time To Color script can be used on any HTML page. Here are the steps for adding it to Blogger as a widget:


Tutorial



1. Login to your Blogger Dashboard
2. Click Layout


3. Click Add a Gadget
4. Select HTML / JavaScript


4. Without adding a title add the following code:
<script>
$(document).ready(function() {
    $('body').css('background-image', 'none');
    $('.cap-top').remove();
    var setBackground = function() {
        var rightNow = new Date();
        var currentProcessedTime = function(val) {
            if (val.toString().length == 1) {
                return "0" + val.toString()
            } else {
                return val.toString()
            }
        };
        var currentTime = currentProcessedTime(rightNow.getHours()) + currentProcessedTime(rightNow.getMinutes()) + currentProcessedTime(rightNow.getSeconds());
        var timeColor = function() {
            return '#' + currentTime
        };
        $('body').css('background-color', timeColor());
    };
    window.setInterval(function() {
        setBackground();
    }, 1000);
});
</script>
5. Click Save and you are all set.

Comments

Popular posts from this blog

How to create a PHP, Bootstrap 3 Contact Form which works with blogger and any other platform