[Tutorial] Widget com hora oficial em tempo real

Informações:
Autor: iChess
Funcionalidade: Todas as Versões

---

Acesse:

Painel de Controle ☛ Modulos ☛ Portal & Widgets ☛ Gestão dos widgets do fórum

E Crie um novo widget sem o table type com esse código:

Código:


<p>
                    <style>#time {
    font-weight: 800;
}
div#widgetladoesquerdo {
z-index: 1;
position: fixed;
left: 12px;
background: #FFF none repeat scroll 0% 0%;
padding: 5px;
text-align: center;
border: 1px solid #B6B6B6;
border-radius: 6px;
bottom: 10px;}div#horaupforum {height: 75px;width: 85px;}.displaynoneup{display:none;}div#widgetsubTOP img {margin-top: 10px;width: 35px;margin-left: 24px;}</style><script>jQuery(function(){
 var selector_css="div#horaupforum";
 var imagen_se_repite=true;
 var horario_inicio=new Array();
 horario_inicio["mañana"]=6;horario_inicio["tarde"]=12;horario_inicio["noche"]=20;
 var imagenes=new Array();
 imagenes["mañana"]="http://i.imgur.com/EgsQJjq.jpg";imagenes["tarde"]="http://i.imgur.com/WdnPjNL.jpg";imagenes["noche"]="http://i.imgur.com/GAT86pA.jpg";
 var horaActual=(new Date()).getHours();
 var imagen="";
 if(horaActual>=horario_inicio["mañana"]&&horaActual<horario_inicio["tarde"]){
 imagen=imagenes["mañana"]}
 else if(horaActual>=horario_inicio["tarde"]&&horaActual<horario_inicio["noche"]){
 imagen=imagenes["tarde"]}
 else if(horaActual>=horario_inicio["noche"]||horaActual<horario_inicio["mañana"]){
 imagen=imagenes["noche"]}
 if(imagen_se_repite){
 jQuery(selector_css).css("background","url("+imagen+") no-repeat 50% 0")}
 else{jQuery(selector_css).css({
 "background-image":"url("+imagen+")","background-repeat":"no-repeat","background-size":"cover"}
 )}
 });
</script>          
</p>
                  
<div id="widgetladoesquerdo">
                                                                                                        
 <div style="background: url(http://i.imgur.com/WdnPjNL.jpg) 50% 0px no-repeat;" id="horaupforum">
                                                                                                            
 </div>
                           <span id="time"></span>                                                                                                                        
</div>
                    

Depois disto, acesse:

Painel de Controle ☛ Modulos ☛ Html e Javascript ☛ Gestão dos codigos Javascript

E Crie um novo Javascript com investimento em todas as paginas com esse codigo:

Código:

function updateClock(){var now=new Date(),time=now.getHours()+':'+now.getMinutes()+':'+now.getSeconds();$('#time').html(time);setTimeout(updateClock,1000)}updateClock();

Resultado: