En este tutorial vamos a crear con JQuery y CSS un calendario con reloj + un buscador de archivos en nuestro blog BLOGGER, Siempre y cuando no cuenten con un buscador en el blog, si lo tuviere elimine el CSS y el script O Html del mismo; Así mismo les dejaré una demostración del funcionamiento en el botón que le muestro a continuación
Demostración
1ro. Ingrese a su cuenta de blogger
2do. Ingrese a la plantilla y busque <head> Debajo del mismo pegan el código que les dejo a continuación:
<link href='http://fonts.googleapis.com/css?family=Oswald|Yanone+Kaffeesatz|PT+Sans' rel='stylesheet' type='text/css'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>3ro. Buscamos ]]></b:skin> Debajo del mismo pegan el código que les dejo a continuación:
<style>
/* CSS Reloj mas calendario - Bloguero Tutorial */
#top-main{background:#222;height:31px;margin:1% 0 1%;padding:5px 15px 5px 5px}
.clocks-box{position:relative;font-size:16px;color:#fff;width:50%;float:left;padding:6px 5px 6px 30px}
.clocks-box:before{content:"\f133";font-family:FontAwesome;text-decoration:inherit;color:#c5c5c5;font-size:18px;position:absolute;top:5px;left:5px}
.likes{background:#fff;position:relative;display:block;float:right;height:25px;overflow:hidden;width:100px;margin:4px 0 4px 2px;border:1px
/* CSS Fin de Reloj mas calendario - Bloguero Tutorial */
</style>
<style>
/* CSS Buscador - Bloguero Tutorial*/
#search-form-feed{width:40%;position:relative;font:normal normal 11px/normal 'PT Sans',Sans-Serif;color:#333;float:right;margin:0 0 10px;padding:0}
#feed-q-input{display:block;width:100%;border:1px solid #ff0;background:#f5f5f5;font:13px 'PT Sans',Sans-Serif;color:#aaa;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:5px}
#feed-q-input:focus{color:#222;outline:none;border-color:#00FA9A}
#search-result-container{width:400px;height:300px;overflow:auto;position:absolute;top:100%;right:0;z-index:999;background:#6CD6AF;border:1px solid #16A085;display:none;margin:10px 0 0;padding:10px 10px 0}
#search-result-container mark{background:#ff0;color:#000}
#search-result-container a{text-decoration:none;color:#0D3E71;font-weight:700;font-size:12px;display:block}
#search-result-container a:hover{color:#052748}
#search-result-container h4{font:13px/normal 'PT Sans',Sans-Serif;color:#000;margin:0 0 10px}
#search-result-container ol{background:transparent;border:none;margin:0 0 10px;padding:0}
#search-result-container li{list-style:none;border:1px solid #B7C1CE;background:#fff;overflow:hidden;word-wrap:break-word;margin:0 0 1px;padding:7px 8px}
#search-result-container li img{display:block;float:left;border:1px solid #B7C1CE;background:#F5F5F5;margin:0 10px 4px 0;padding:2px}
#search-result-loader{position:absolute;top:100%;left:5px;z-index:999;background:#EB5B4C;color:#fff;font:12px/normal 'PT Sans',Sans-Serif;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;display:none;margin:-2px 0 0;padding:3px 5px
/* CSS Fin de Buscador - Bloguero Tutorial*/
</style>Código CSS sin buscador:
<style>
/* CSS Reloj mas calendario - Bloguero Tutorial */
#top-main{background:#222;height:31px;margin:1% 0 1%;padding:5px 15px 5px 5px}
.clocks-box{position:relative;font-size:16px;color:#fff;width:50%;float:left;padding:6px 5px 6px 30px}
.clocks-box:before{content:"\f133";font-family:FontAwesome;text-decoration:inherit;color:#c5c5c5;font-size:18px;position:absolute;top:5px;left:5px}
.likes{background:#fff;position:relative;display:block;float:right;height:25px;overflow:hidden;width:100px;margin:4px 0 4px 2px;border:1px
/* CSS Fin de Reloj mas calendario - Bloguero Tutorial */
</style>
4to. Buscamos </head> Arriba del mismo pegamos el código que les dejo a continuación:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
<script type='text/javascript'>
tday=new // Reloj mas calendario
Array("Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sábado");tmonth=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");function GetClock(){d=new Date();nday=d.getDay();nmonth=d.getMonth();ndate=d.getDate();nyear=d.getYear();nhour=d.getHours();nmin=d.getMinutes();nsec=d.getSeconds();if(nyear<1000)nyear=nyear+1900;if(nhour<=9){nhour="0"+nhour}if(nhour==0){ap=" AM";nhour=12}else if(nhour<=11){ap=" AM"}else if(nhour==12){ap=" PM"}else if(nhour>=13){ap=" PM";nhour-=12}if(nmin<=9){nmin="0"+nmin}if(nsec<=9){nsec="0"+nsec}document.getElementById('clocks').innerHTML=" "+tday[nday]+","+" "+ndate+" "+tmonth[nmonth]+" "+nyear+" "+nhour+":"+nmin+":"+nsec+ap+"";setTimeout("GetClock()",1000)}window.onload=GetClock;
</script>Importante: Si ya tenemos instalado el script que visualiza a continuación, omita la nuestra:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>5to. Por ultimo pegamos el siguiente código en el área deseada (donde se va a visualizar el calendario con reloj + buscador:
<div id='top-main'>
<div class='clocks-box'>
<div id='clocks'/></div>
<div id='search-form-feed'>
<form action='/search' onsubmit='return updateScript();'>
<input id='feed-q-input' name='q' onkeyup='resetField();' placeholder='Texto para buscar y presione enter...' type='text'/>
</form>
<div id='search-result-container'/>
<div id='search-result-loader'>Loading...</div>
</div>
</div>Código HTML sin Buscador:
<div id="top-main">
<div class="clocks-box">
<div id="clocks"></div>
</div>
</div>
Author : Bloguero Tutorial
Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. ,
click aquí ?
Calendario con Reloj + Buscador con JQuery y CSS.
Tu mensaje sera visible tras la aprobación del administrador