Post Recientes Con Fondo Personalizado (cute)

Hooolaa mi fresitas!! como estan? espero muy bieen!
hoy les traigo este tutorial de poner post recientes con fondo personalizado!


Antes de comenzar doy creditos a Anny kawaii world

no se si sigue activo ese blog  ._, pero bueno .

Esto se veria algo asi 

Para ponerlo solo ve a:
Diseño>añadir un gadget>HTML/JavaScript

y pegan este codigo

<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:350px;

}

#spylist ul{

width:220px;

overflow:hidden;

list-style-type: none;

padding: 0px 0px;

margin:0px 0px;

}

#spylist li {

-moz-border-radius: 5px;/**FORMA DEL RECUADRO EXTERIOR **/

border-radius: 5px;/** FORMA DEL RECUADRO EXTERIOR **/

width:208px;

padding: 5px 5px;

margin:0px 0px 5px 0px;

list-style-type:none;

float:none;

height:70px;

overflow: hidden;

background: #FFFFFF url(URL DEL FONDO O IMAGEN) repeat;

}

#spylist li a {

text-decoration:none;

color:#4B545B;/** COLOR DEL TITULO **/

font-size:11px;

height:18px;

overflow:hidden;

margin:0px 0px;

padding:0px 0px 2px 0px;

}

#spylist li img {

-moz-border-radius: 5px;/** FORMA DEL RECUADRO Y BORDE INTERIOR **/

border-radius: 5px;/** FORMA DEL RECUADRO Y BORDE INTERIOR **/

float:left;

margin-right:5px;

background:#EFEFEF;

border:1px dashed;/** 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 = "#000000";

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 = "PONE AQUI TU 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></center>

pueden cambiar los bordes 


aqui les dejo los tipos de bordes

(imagenes tomadas del mismo blog)
Borde 1

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

BOrde 2

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

Borde 3

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

Borde 4

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

Borde 5

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





y pueden ponerle fondo , pegan la url del fondo que quieran en donde dice:

URL DEL FONDO O IMAGEN 



Eso es todo fresitas!!
byee!!