Entradas Recientes con imágenes y efecto deslizante

Este tutorial me lo pidió Candela de clasicylove.blogspot.com. Primero que nada aclaro que este tutorial no es mio sólo modifiqué un par de códigos jejeje y les enseñaré como hacerlo (OwO). Al final dejaré los créditos correspondientes. Let's GOOOOOO!!

PASO 1: Click en 'Diseño → Diseño → Añadir un gadget → HTML/JavaScript'

PASO 2: Pega el sgte. código...

<center><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<style media="screen" type="text/css">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:200px;
}
#spylist ul{
width:220px;/** ANCHO DE WIDGET **/
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
-moz-border-radius: 35px;/**FORMA DEL RECUADRO EXTERIOR **/
border-radius: 35px;/** FORMA DEL RECUADRO EXTERIOR **/
width:180px;/** ANCHO DEL RECUADRO EXTERIOR **/
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background: #000 repeat;/** COLOR DE FONDO DEL RECUADRO EXTERIOR **/
}
#spylist li a {
text-decoration:none;
color:#FA5882;/** COLOR DEL TITULO **/
font-size:11px;/** TAMAÑO DE LETRA DEL TITULO **/
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
-webkit-border-radius:100px;/** FORMA DEL RECUADRO Y BORDE INTERIOR **/
-moz-border-radius:100px/** FORMA DEL RECUADRO Y BORDE INTERIOR **/
border-radius:100px;float:left;
margin-right:5px;
background:#fff;/** COLOR DE FONDO DEL RECUADRO INTERIOR **/
border:2px solid;/** FORMA DEL RECUADRO Y BORDE INTERIOR **/}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language="javascript">
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[1] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[2] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[3] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[4] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#4a4a4a";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://nemuri-kuma.blogspot.com/";/** URL DE TU BLOG **/
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="https://sites.google.com/site/unwanted86/javascript/animatedrecentpost.js" type="text/javascript">
</script></div>

PASO 3: Guardar y te quedará igual a esto (↓↓↓)

ES ASÍ COMO SE VE EN MI BLOG (*-*)

AHORA A MODIFICAR!!! (esta parte es opcional ^^)

Iniciemos por lo esencial y más fácil. Ves los códigos resaltado de  ROSADO  ok ahí comenzaremos. Todos esos códigos son para cambiar la forma de los recuadros, tanto interno (el que muestra las imágenes) como externo (el de color negro jeje ^^). Aquí abajo dejo los códigos de cada forma (OwO).

-moz-border-radius: 35px; border-radius: 35px;

-moz-border-radius-bottomright: 50px 25px; border-bottom-right-radius: 50px 25px;

-moz-border-radius-bottomright: 50px; border-bottom-right-radius: 50px;

-moz-border-radius: 1em 4em 1em 4em; border-radius: 1em 4em 1em 4em;

-moz-border-radius: 25px 10px / 10px 25px; border-radius: 25px 10px / 10px 25px;

Ahora la parte algo "complicadita", modificar color, tamaño de letras, forma, fondos, bordes, etc. MUCHA ATENCIÓN!! Aquí van los códigos...

width:220px;/** ANCHO DE WIDGET **/ Este es el ancho de todo (TODO) es decir que si el ancho de este es menor que el de abajo(↓↓↓) se verá cortado de un lado (no se verá completo). Por ejemplo: si quieres que el recuadro exterior tenga un ancho de 280 pues, el ancho de widget deberá ser de 300.

width:180px;/** ANCHO DEL RECUADRO EXTERIOR **/ Modifica el 180 por el ancho que desees darle a este widget de tal forma que no se vea muy grande o muy pequeño para la columna donde lo pondrás.

 background: #000 repeat;/** COLOR DE FONDO DEL RECUADRO EXTERIOR **/ Aquí puedes cambiar el color o también puedes colocar una imagen como fondo. Para color cambia #000 por otro código de color. Para imagen sólo reemplaza #000 por url(URL DEL FONDO O IMAGEN) y coloca el url de tu imagen.

color:#FA5882;/** COLOR DEL TITULO **/ Coloca otro código de color para definir el color que gustes, cambia el #FA5882 (^^)

font-size:11px;/** TAMAÑO DE LETRA DEL TITULO **/ Sólo cambia el 11 por otro número para aumentar o disminuir el tamaño de la letra.

background:#fff;/** COLOR DE FONDO DEL RECUADRO INTERIOR **/ Es lo mismo que los anteriores, sólo cambia el #fff por otro código de color.

border:2px solid;/** FORMA DEL RECUADRO Y BORDE INTERIOR **/ Este es para el grosor y tipo de borde que se mostrará. Si cambias el 2 por otro número aumentará o disminuirá el grosor de los bordes. Y si cambias solid por dotted se verá un borde de puntitos o por dashed se verá un borde de rayitas.

home_page = "http://nemuri-kuma.blogspot.com/";/** URL DE TU BLOG **/ Por último y el más fácil. Sólo cambia http://nemuri-kuma.blogspot.com/ por el url de tu blog.

BUENOOOOOOOOOOOOOOO!!! ESTO FUE TODO. Algo largo y tedioso pero comprensible (eso espero ° - °). Cualquier duda con respecto a este tutorial déjenla en comentarios. Muchas gracias por pasar por aquí m(_ _)m

Creditos de tutorial a Annyz de annyz-kawaii.blogspot.com

Este tutorial fue modificado por mi, por favor respeta mi trabajo porque me tomó su debido tiempo crearlo y dar la explicación paso a paso (^w^). Gracias!