ENTRADAS POPULARES CON ANIMACIÓN PARA BLOGGER .

Como todos sabemos, en Blogger tenemos el gadget de entradas populares. Pues bien, ahora vamos a darle un toque de movimiento con un poquito de JQuery.

No tiene mucha complicación y nos quedara muy 'cool'.

Primero, añadimos el gadget de entradas populares, claro, y donde pone "mostrar un máximo de" ponemos 4 entradas.

Para añadirlo: 

Ir a Blogger  

1-Un clic en “Diseño” 

2-Clic en “Añadir un gadget”

3-Busca el widget que dice “HTML-Javascript” y ábrelo 

4-Coloca el siguiente codigo en el interior

<style type="text/css" media="screen">

#PopularPosts1 {
 overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;

}

#PopularPosts1 ul {
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}

#PopularPosts1 li {
 width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#PopularPosts1 li .item-title {
    color:#A5A9AB;
    font-size:1em;
    margin-bottom:0.5em;
}

#PopularPosts1 li .item-title a {
 text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#PopularPosts1 li img {
 float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}

#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}

#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
}

#PopularPosts1 {
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
}

.tags span,
.tags a {
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
}

a img {
    border: 0;
}

-->
</style><br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script><br />
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script><br />
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

Despues de haber insertado el código, un clic en  "Guardar"

Imagen de donde colocar el Gadget.

Fecha: 02/04/2019

Fuente: redeando

Publicado por:                                                           

EFECTO ENTRADAS POPULARES CON ZOOM EN BLOGGER.

Como ya sabeis, hace ya tiempo Blogger añadio el gadget de Entradas Populares a su lista.

El gadget en si esta bien, depende la plantilla puede variar el diseño, pero más o menos en casi todas son prácticamente iguales.

Para darle un poco de vidilla y un look más cool, vamos a re diseñarlo un poco con CSS.

El resultado será darle un tamaño especifico, redondear y darle un efecto Zoom a las imágenes (ahora mismo lo podéis ver en la sidebar de este blog).

Lo primero es incluir el gadget de entradas populares en nuestra sidebar, claro.

Os aconsejo poner solo "imagen en miniatura" para que quede bien el asunto.


Una vez hecho esto, nos vamos a Diseño, Edición de HTML y en la plantilla buscamos ]]></b:skin>. Y justo antes añadimos el siguiente códigos:

Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:



1 Un clic en “Plantilla”

   2 Un clic en “Editar HTML”

  Ahora se te abrirá el Editor HTML de tu plantilla

En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,

3 Busca el siguiente código


]></b:skin>


4 Busca este código ]]></b:skin> una vez que hayas encontrado el código deberás insertar las siguientes líneas de código justo arriba del código que encontraste

/* Entradas populares con Zoom
----------------------------------------------- */
 .PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;padding: 0 !important;margin: 5px !important;}
.PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
.PopularPosts .item-title {line-height:1.8;text-align:top;display:inline;padding-top:20px;}

Fecha: 02/04/2019

Fuente: redeando

Publicado por:                                                     

IMÁGENES EN LAS ENTRADAS AMPLIADAS CON JQUERY .

Los efectos con JQuery me encantan, y para muestra un botón . En Blogger hace poco que nos han habilitado la opción del "lightbox" en las imágenes, esto es algo parecido pero aún me gusta más. 

Cuando pasamos el ratón por la imagen, el cursor se convierte en una lupa y al hacer click sobre ella se amplia rápidamente con un efecto suave mui molón. 

Al volver a dar click sobre ella, vuelve a su tamaño original.

Para poner este efecto tan chulo en vuestro blog o web, añadís el siguiente código en vuestra plantilla antes de  </head>:

Un clic en “Plantilla”

 Un clic en “Editar HTML”

 Ahora se te abrirá el Editor HTML de tu plantilla

En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,

  Busca el siguiente código


</head>



Ahora justo encima (ó antes) de esa etiqueta, pegamos lo siguiente:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://hostredeando.ucoz.es/SCRIPTS-BLOG/jquery.magnifier.js" type="text/javascript">
/***********************************************
* Imagen amplada con jQuery
REDEANDO - tu blog webmaster
http://redeando.blogspot.com/
***********************************************/
</script>

Una vez hecho esto, ya solo nos queda añadir el siguiente codigo cada vez que querais poner una imagen con este efecto.

Cambiais lo que esta en rojo por la url de la imagen y el tamaño y listo.

<img class="magnify" src="URL DE LA IMAGEN" style="height: 200px; width: 200px;" />

Fecha: 02/04/2019

Fuente: redeando

Publicado por: