Loading...

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.