Un slider muy sencillo con JQuery y CSS

Slide sencillo con Jquery

Hace algún rato habíamos hecho experimentos con otro slider sencillo con JQuery , este a diferencia del anterior es extremadamente sencillo y con un código muy liviano, cabe destacar que lo pueden ajustar a su gusto, las imágenes que usé como ejemplo miden 600px de ancho, pero pueden usar las que gusten.
Para los que les gusta esta clase de elementos siempre es recomendable hacer cualquier cantidad de variantes hasta encontrar lo que buscan, las imágenes, los botones, el tiempo de transición, los fondos, todo eso se puede personalizar al gusto.
Para aplicarlo vamos a diseño y agregamos un HTML-JavaScript y pegamos el siguiente código:
<style type="text/css">
.sliderContainer{
width: 600px;
height: 315px;
position: relative;
margin:auto;
}
.slidesContainer{
border-top: 6px solid #98119a;
}
#slider {
width: auto;
height: 315px;
background: #FFF;
border: 5px solid #FFF;
overflow: hidden;
position: relative;
margin: auto;
}
#slider .slide{
width: 600px;
height: 315px;
float: left;
}
.slide p{
color: #ffffff;
position: relative;
bottom: 90px;
padding: 12px;
background: rgba(255, 0, 0, 0.2);
border-left: 5px solid #98119a;
}
.prev, .next{
display: block;
height: 40px;
width: 23px;
position: absolute;
top: 147px;
z-index: 1;
}
.prev{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioBLPybaMZ74hHrLYqJbBE2St6z6um4nMQpG5RSGh3bqKXmldPo8T0uh8WnQGxB1u5F-tEU0GEK6KXPFY1lSHho-EzDjB9x8I_denJtrs7-O3sAoYEWpL7bWuFBlecGGLD1pND1WyTLwc/h120/S2.png') no-repeat;
background-position: 0 0;
left: 5px;
}
.prev:hover{
background-position: 0 1px;
}
.next{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKaD-tZZZ_bG2ZjJg8Gzp0-jRBnozJsiz51rSKAVCZP8_XwsKKLq8CAnKPgAd_D8Maz52PajwPoNnDnTT0y7tttF_Q1rUcFZfuoIcIzkWZ18hcTwy4yCChVBnZnUWvL2EtB4PA2IeT3j0/h120/S1.png') no-repeat;
background-position: 0 0;
right: 5px;
}
.next:hover{
background-position: 0 1px;
} </style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'>
</script>
<script src="https://sites.google.com/site/escribiendotrazos/SliderLC.txt"></script>
<div class="sliderContainer">
<a href="#siguiente" class="next" title="Siguiente"></a>
<a href="#anterior" class="prev" title="Anterior"></a>
<div id="slider">
<div class="slidesContainer" style="width: 1800px;">
<div class="slide"><img src="URL de su imagen" alt="Descripcion de la imagen"><p>Un resumen de la imagen o del tema </p></div>
<div class="slide"><img src="URL de su imagen" alt="Descripcion de la imagen "><p>Un resumen de la imagen o del tema </p></div>
<div class="slide"><img src="URL de su imagen" alt="Descripcion de la imagen"><p>Un resumen de la imagen o del tema </p></div>
</div> <!-- /slidesContainer -->
</div> <!-- /slider -->
</div>

Lo ideal sería arrastrar el gadget justo arriba de las entradas, y pueden condicionarlo a su gusto.
Ajustes:
Como decía al principio estas imágenes de ejemplo miden 600px de ancho, en caso de usar imágenes de otras medidas este punto es importante, en este pate de código HTML:
<div class="slidesContainer" style="width: 1800px;">
Al usar imágenes de un ancho ejemplo de 800px es necesario multiplicar el ancho por la cantidad de imágenes, ejemplo si usan 5 imágenes se debe multiplica 800x5 y el ancho seria de 4000px.

Cambiar todos los width y height por el ancho y alto de las imágenes.

Para agregar enlaces a cada imagen del slider, la estructura sería de esta manera aplicándose a cada caso.

<div class="slide"> <a href="URL del enlace"><img alt="Descripción la imagen" src="URL de la imagen" /><p>Resumen del enlace o tema a tratar.</p></a></div>

El resultado final sería el siguiente:


Los leones de áfrica son una de las especies más peligrosas

Los leones son una de las criaturas más espectaculares del áfrica, el rey de la selva forma parte de la línea número uno de depredadores.

Los leones de áfrica son una de las especies más peligrosas

Los leones son capaces de alcanzar 60km por hora en arranques violentos dentro de los 50 metros de la zona de muerte.

Los leones de áfrica son una de las especies más peligrosas

Los leones al atacar en manda son capaces de derribar a un enemigo con casi una tonelada de peso, los búfalos cafre.



Más fácil imposible!

Sistema de paginación para blogger

Sistema de paginación para blogger
Las paginaciones en blogger ayudan a la experiencia de los lectores dentro de determinado sitio, más aun si este contiene una gran cantidad de publicaciones, la navegación se hace más cómoda y más ordenada.
Las ventajas son evidentes a la hora de aplicarlo, el Script que usaremos es bastante liviano apenas 4kb y está basado en Json, este hará la función de leer los feeds de nuestro sitio para hacer la ordenación y el sistema de paginación.

Para aplícalo lo que haremos es desgargar este pequeño archivo lo copiamos y vamos a la plantilla a ubicar esta línea </body>, y justo arriba lo pegamos.
Una vez hecho esto guardamos la plantilla y nos dirigimos a diseño y agregamos un HTML-JavaScript en el cual pegaremos el siguiente cogido que contiene los estilos de la paginación, y los ajustes, es recomendable ubicarlo luego debajo de las entradas.
<style type="text/css">.blog-pager,#blog-pager{
clear:both;
font-family:'century gothic', Arial, Verdana, Helvetica;
font-size:15px;
padding-top: 5px;
margin-left: 0px;
}
.showpageNum,.showpage,.showpagePoint{
margin: 2px;
}
.showpageNum a,.showpage a {
border: 1px solid #306eb3;
background-color: #4a4a4d;
background-image: -moz-linear-gradient(#4a4a4d, #2a272b);
background-image: -webkit-gradient(linear, left top, left bottom, from(#4a4a4d), to(#2a272b));
background-image: -webkit-linear-gradient(#4a4a4d, #2a272b);
background-image: -o-linear-gradient(#4a4a4d, #2a272b);
background-image: -ms-linear-gradient(#4a4a4d, #2a272b);
background-image: linear-gradient(#4a4a4d, #2a272b);
margin:0px 1px 0 1px;
padding:3px 8px;
text-decoration:none;
color:#ffffff;
line-height: 14px;
cursor: pointer;
white-space: nowrap;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
text-shadow: 0 -1px 0 #000;
}
.showpageNum a:hover,.showpage a:hover {
background-color: #4a4a4d;
background-image: -moz-linear-gradient(#2a272b, #4a4a4d);
background-image: -webkit-gradient(linear, left top, left bottom, from(#2a272b), to(#4a4a4d));
background-image: -webkit-linear-gradient(#2a272b, #4a4a4d);
background-image: -o-linear-gradient(#2a272b, #4a4a4d);
background-image: -ms-linear-gradient(#2a272b, #4a4a4d);
background-image: linear-gradient(#2a272b, #4a4a4d);
border:1px solid #242d3f;
color:#2b71f1;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
text-decoration:none;
text-shadow: 0 -1px 0 #000;
}
.showpageOf{
display: none;
}
.showpagePoint {
background: #3b77f2;
margin:0 3px 0 3px;
padding:3px 8px;
line-height:14px;
cursor:pointer;
white-space:nowrap;
-webkit-border-radius: 5px !important;
-moz-border-radius: 5px !important;
-o-border-radius: 5px !important;
border-radius: 5px !important;
border:1px solid #4a464b;
color:#ffffff;
text-decoration:none;
text-shadow: 0 -1px 0 #000;
}
</style>
<script style='text/javascript'>
var numshowpage=5;
var postperpage ='6';
var upPageWord="«";
var downPageWord="»";
var home_page="/";
var urlactivepage=location.href;
</script>

Ajustes:
var numshowpage=5;
Es la cantidad de páginas que mostrará la numeración.
var postperpage ='6';
Es la cantidad entradas que se mostrará en cada página (importante debe ser la misma cantidad que se establezca en los ajustes del blog, en cuanto a la cantidad de entradas a mostrar en el home)
var upPageWord="«";
Flechas de navegación, esto pueden cambiarlo si gustan por algo de su preferencia.
var downPageWord="»";
Con esto ya tenemos nuestro sistema de paginación en Blogger, más fácil imposible.

Personalizar entradas populares de blogger solo CSS

Entradas populares
Las entradas populares suelen usarse mucho sobre todo en esos sitios con muchas publicaciones, el gadget que blogger ofrece a veces no cumple las expectativas que uno espera, lo que vamos hacer es tratar de personalizarlo un poco para darle un toque más sencillo pero con algo de vistosidad, las entradas quedarán enumeradas como se puede ver en esta imagen, para aplicar los cambios iremos a diseño en caso de no tenerlo y agregar el gadget de entradas populares pero lo configuramos solo con el título sin extracto de texto y sin imagen ya que lo que buscamos es que quede sencillo y resumido solo con títulos.

 personlaizar entradas populares

Una vez guardado nuestro gadget nos vamos a la plantilla y pegamos antes de ]]></b:skin> el siguiente código:
/* Entradas populares personalizado, Lápiz y café */
.popular-posts ul li a {
background: none repeat scroll 0 0 #0f78e3;
color: #ffffff;
display: block;
margin: 0 0 0.5em;
padding: 0.4em;
position: relative;
text-decoration: none;
transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:before {
background: none repeat scroll 0 0 #0f78e3;
font-weight: 700;
height: 2em;
left: -2.5em;
line-height: 2em;
margin-top: -1em;
position: absolute;
text-align: center;
top: 50%;
width: 2em;
}
.popular-posts ul li a:after {
border: 0.5em solid transparent;
content: "";
left: -1em;
margin-top: -0.5em;
position: absolute;
top: 50%;
transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:hover {
background: none repeat scroll 0 0 #3c4049;
}
.popular-posts ul li a:hover:after {
border-left-color: #3c4049;
left: -0.5em;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before{content:"10"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before{content:"9"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before{content:"8"}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before{content:"7"}
.popular-posts ul li:first-child + li + li + li + li + li a:before{content:"6"}
.popular-posts ul li:first-child + li + li + li + li a:before{content:"5"}
.popular-posts ul li:first-child + li + li + li a:before{content:"4"}
.popular-posts ul li:first-child + li + li a:before{content:"3"}
.popular-posts ul li:first-child + li a:before{content:"2"}
.popular-posts ul li:first-child a:before{content:"1"}

Damos guardar y listo, nos queda el gadget con un toque de diferencia.

Pre carga tu blog con JQuery y CSS

Pre cargador con JQuery
Anteriormente ya habíamos visto uno de estos elementos llamativos llamados pre cargadores o pre loader, hoy haremos otro experimento para aplicar este con un estilo diferente, ya que no requiere de ninguna imagen GIF y eta hecho solo con CSS, la función es prácticamente la misma solo que esta vez aplicaremos todo el código junto lo que lo hace más sencillo de emplear.
Al igual que el anterior este código está condicionado para que se ejecute solo en el home de su sitio.

Ventajas: está hecho solo con CSS mas JQuery, es más liviano que el anterior y se puede personalizar mucho más.
Para emplearlo buscamos la etiqueta <body> o en caso de no encontrarla buscamos esta; <body expr:class='"loading" + data:blog.mobileClass'> y justo debajo pegamos el siguiente cogido:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='loader'>
<div class='balls'></div>
<div class='balls'></div>
<div class='balls'></div>
<div class='balls'></div>
</div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
$(window).load(function () {
setTimeout(function () {
$(&quot;.balls&quot;).fadeOut(&quot;slow&quot;);
setTimeout(function () {
$(&quot;#loader&quot;).fadeOut(&quot;slow&quot;)
}, 1000)
}, 1000)
});
</script>
<style>
#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#32373c;z-index:1000}
.balls{width:30px;height:30px;position:absolute;background-color:#ccc;top:45%;border-radius:50%}.balls:nth-child(1) {background-color:#1164c2;animation:move 2s infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(2){background-color:#059a67;animation:move 2s 150ms infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(3){background-color:#e10a4c;animation:move 2s 300ms infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(4){background-color:#e1880a;animation:move 2s 450ms infinite cubic-bezier(.2,.64,.81,.23)}@keyframes move{0%{left:0%}100%{left:100%}}
</style>
</b:if>

El resultado se cera de la siguiente manera:

Como descargar un video de Facebook

Descargar video Facebook
A veces andamos en la famosa red social y como está muy de moda eso de los videos que cada vez vemos más seguido, ocurre que de pronto queremos descargar alguno y no vemos la manera o la opción para hacer lo propio, bueno acá tenemos este buen sitio el cual te permite hacer la descarga en formato MP4 de los mencionados rodados, inclusive los que están en alta definición.
Para hacerlo lo único que debemos hacer es copiar toda la URL del video que anteriormente era muy extensa con muchos números y códigos, pero como cada día van cambiando las cosas en Facebook, ahora es algo más corta.

Descargar video Facebook

Nos dirigimos a nuestro sitio pegamos y damos descargar, nos dará una imagen miniatura del video y debajo un botón que dará el siguiente mensaje: Download this Video

Pagina para descargar video Facebook
El cual le daremos clip y abrirá una ventana nueva con el dicho video, le damos clip derecho y guardar como.
Así de fácil.