Un bloguero Practicando

Calendario con Reloj + Buscador con JQuery y CSS

Calendario con Reloj + Buscador con JQuery y CSS

Comparteme :


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:&quot;\f133&quot;;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 &#39;PT Sans&#39;,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 &#39;PT Sans&#39;,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 &#39;PT Sans&#39;,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 &#39;PT Sans&#39;,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:&quot;\f133&quot;;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(&quot;Domingo&quot;,&quot;Lunes&quot;,&quot;Martes&quot;,&quot;Miercoles&quot;,&quot;Jueves&quot;,&quot;Viernes&quot;,&quot;Sábado&quot;);tmonth=new Array(&quot;Enero&quot;,&quot;Febrero&quot;,&quot;Marzo&quot;,&quot;Abril&quot;,&quot;Mayo&quot;,&quot;Junio&quot;,&quot;Julio&quot;,&quot;Agosto&quot;,&quot;Septiembre&quot;,&quot;Octubre&quot;,&quot;Noviembre&quot;,&quot;Diciembre&quot;);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&lt;1000)nyear=nyear+1900;if(nhour&lt;=9){nhour=&quot;0&quot;+nhour}if(nhour==0){ap=&quot; AM&quot;;nhour=12}else if(nhour&lt;=11){ap=&quot; AM&quot;}else if(nhour==12){ap=&quot; PM&quot;}else if(nhour&gt;=13){ap=&quot; PM&quot;;nhour-=12}if(nmin&lt;=9){nmin=&quot;0&quot;+nmin}if(nsec&lt;=9){nsec=&quot;0&quot;+nsec}document.getElementById(&#39;clocks&#39;).innerHTML=&quot; &quot;+tday[nday]+&quot;,&quot;+&quot; &quot;+ndate+&quot; &quot;+tmonth[nmonth]+&quot; &quot;+nyear+&quot; &quot;+nhour+&quot;:&quot;+nmin+&quot;:&quot;+nsec+ap+&quot;&quot;;setTimeout(&quot;GetClock()&quot;,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>
Demostración



Comparteme :
Bloguero Tutorial

Author :

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

Artículos Relacionados

Tu mensaje sera visible tras la aprobación del administrador