Hoy te voy a mostrar como puedes añadir un asombroso y maravilloso Widget de las Entradas Recientes a tu blog de blogger.Este widget une tus ultimos articulos via JavaScript y los muestra de una manera hermosa. Este widget muestra los recientes articulos con su fotos. Al poner el cursor de tu raton sobre ellas podremos ver un efecto de transicion de CSS tomar lugar, el cuadro rueda y el contenedor de el articulo se muestra.
Este widget es bastante atractivo y llamativo.Este tiene un efecto de ejecucion que hace este widget mas asombroso. Una demostracion de este widget lo puedes ver aqui abajo..
Puedes notar que el ancho que use para este ejemplo del widget sera diferente en tu blog. Este es bastante grande pero como dije es solo para demostrar como funciona.
Para anadir este widget a tu blog solo siguie las siguientes instrucciones.
Añadiendo este Widget en Plantilla de Blogger
Entra a Blogger → Diseño → Añadir un Widget → HTML/JavaScript. Pega el siguiente codigo .
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
#post-gallery {width:100%; margin:0px auto;font:normal 11px Arial,Sans-Serif;color:##000000;padding:8px;}
#post-gallery .rp-item {float:left;display:inline; position:relative; margin:2px; padding:0px 0px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifRa8AzjUEusYQZ49IHJSyhBBm7wbuhDtie8PrFxBWyZQ5QsX9A7xNg2YkWKM1haXY5jW2MzH-RY0kxWbi4HxwwPQ7HMVNQPA_Smw80F5MGyaRbA4bsZnB_B5AceszMXKXvW3aSQOL1sXL/s1600/LOAD+(66).gif') no-repeat 50% 50%; width:79px; height:79px;}
#post-gallery .rp-item img { width:69px; height:69px; border:none !important; margin:0px 0px !important; padding:0px 0px !important; background:transparent !important; display:none;}
#post-gallery .rp-item img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
#post-gallery .rp-item .rp-child { position:relative; top:10%!important; left:10%!important; z-index:1000; width:200px; background-color:white; border-bottom:5px solid #1BA1E2; -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7); -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7); box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7); padding:10px 15px; overflow:hidden; word-wrap:break-word; display:none; opacity: 0.9;}
#post-gallery .rp-item .rp-child h4 { font-size:12px; margin:0px 0px 5px; color:#1BA1E2;}
#post-gallery .rp-item:hover .hidden {display:block;}</style>
<script type="text/javascript">
var rpTitle = "ArticulosRecientes", // Titulo del Widget
numposts = 14, // Numero de Articulos a Mostrar
numchar = 200, // Numero de Characteristicas ha mostrar.
rcFadeSpeed = 600, // Velocidad
pBlank = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif", // If No Image
blogURL = "http://www.ciudadblogger.info/"; // URL de Tu Blog
</script>
<script src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-recent-posts.js" type="text/javascript"></script>
Despues que añadas el codigo de arriba puedes cambiar el Titulo de Widget , Numero de Articulos a Mostrar y Tu Url De tu Blog(ejemplo:http://www.ciudadblogger.info/) Despues de guardar este widget guarda la plantilla.
Todo Listo, Ahora podran tanto tu como los visitantes disfrutar de este widget de articulos recientes con foto en tu blog de blogger.
Hola!!!
ResponderBorrarEstoy maravillado con el widget, pero gustaría poder tener la opción de escoger por ejemplo a partir de una fecha para que apareciesen los artículos o poderlos escoger a mano con el mismo efecto
Muchas gracias de nuevo y espero respuesta