Tutorial Blogger #15
¡Que tal mundo!!El 2do tutorial de hoy, lo encontré sin querer en el blog de ¿Dónde esta mi lápiz? y me parece maravilloso para aquellos blogs que hacemos reseñas o puntuaciones a los libros. Me parece una forma muy chula de mostrar nuestras ultimas reseñas. También puedes ver la primera parte de este tutorial AQUI donde te muestro otra forma de añadir calificación o puntuación en nuestras reseñas.
3 Estilos para "Ultimas Reseñas"
◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈Ejemplo 1
<style>.container {position: relative;left: 0px;right: 0px;margin: 1px;top: 0px;bottom: 5px;float:left;}.div-img {display: block;margin-left: auto;margin-right: auto;}.div-img .img {display: block;margin-left: auto;margin-right: auto;width: 100%;transform: scale(1);-ms-transform: scale(1);-moz-transform: scale(1);-webkit-transform: scale(1);-o-transform: scale(1);-webkit-transition: all 500ms ease-in-out;-moz-transition: all 500ms ease-in-out;-ms-transition: all 500ms ease-in-out;-o-transition: all 500ms ease-in-out;}.div-img .stars {font-size: 13px;color: #000;display: block;text-align: center;width: 100%;transform: translate(0px);-webkit-transition: all 500ms ease-in-out;-moz-transition: all 500ms ease-in-out;-ms-transition: all 500ms ease-in-out;-o-transition: all 500ms ease-in-out;opacity: 0;transition: transfom opacity 1.5s;}.div-img:hover .img {transform: scale(0.8);-ms-transform: scale(0.8);-moz-transform: scale(0.8);-webkit-transform: scale(0.8);-o-transform: scale(0.8);}.div-img:hover .stars {transform: translate(0px, -13px);opacity: 1;font-size: 13px;}</style><div class="container"><div class="div-img" ><a href="Url del Blog" target="_blank"><img class="img" height="130" src="https://2.bp.blogspot.com/-cCmlrQY5mZc/WEXXAzDssHI/AAAAAAAAGbg/9PUM9GrMIt45DmKbD5Oz_ZE1FPGoQVSwQCLcB/s1600/%25C3%259Altimas%2BRese%25C3%25B1as%2B-%2BPlaca%2B6.png" alt="Últimas reseñas"/></a></div></div><div class="container"><div class="div-img" ><a href="URL de la entrada"><img class="img" height="130" src="URL de la Imagen" alt="Portada"/></a><div class="stars"><span style="color: #ff8f00;">❤❤❤</span><span style="color: #bcbdbd;">❤❤</span></div></div></div><div class="container"><div class="div-img" ><a href="URL de la entrada"><img class="img" height="130" src="URL de la Imagen" alt="Nombre de Portada"/></a><div class="stars"><span style="color: #ff8f00;">❤❤❤❤</span><span style="color: #bcbdbd;">❤</span></div></div></div><div class="container"><div class="div-img" ><a href="URL de la entrada"><img class="img" height="130" src="URL de la Imagen" alt="Nombre de Portada"/></a><div class="stars"><span style="color: #ff8f00;">❤❤❤</span><span style="color: #bcbdbd;">❤❤</span></div></div></div><div class="container"><div class="div-img" ><a href="URL de la entrada"><img class="img" height="130" src="URL de la Imagen" alt="Nombre de Portada"/></a><div class="stars"><span style="color: #ff8f00;">❤❤❤❤</span><span style="color: #bcbdbd;">❤</span></div></div></div><div class="container"><div class="div-img" ><a href="URL de la entrada"><img class="img" height="130" src="URL de la Imagen" alt="Nombre de Portada"/></a><div class="stars"><span style="color: #ff8f00;">❤❤❤❤</span><span style="color: #bcbdbd;">❤</span></div></div></div><div class="container"><div class="div-img" ><a href="URL de la entrada"><img class="img" height="130" src="URL de la Imagen" alt="Nombre de Portada"/></a><div class="stars"><span style="color: #ff8f00;">❤❤❤❤</span><span style="color: #bcbdbd;">❤</span></div></div></div><div class="container"><div class="div-img" ><a href="URL de la entrada"><img class="img" height="130" src="URL de la Imagen" alt="Nombre de Portada"/></a><div class="stars"><span style="color: #ff8f00;">❤❤❤❤❤</span></div></div></div>
◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈ Ejemplo 2
<style>.container {position: relative;left: 0px;right: 0px;margin: 1px;top: 0px;bottom: 5px;float:left;}.div-img {display: block;margin-left: auto;margin-right: auto;}.div-img .img {display: block;margin-left: auto;margin-right: auto;width: 100%;transform:scale(1);-webkit-transform:scale(1);}.div-img .stars {font-size: 13px;color: #000;display: block;text-align: center;width: 100%;transform: translate(0px);-webkit-transition: all 500ms ease-in-out;-moz-transition: all 500ms ease-in-out;-ms-transition: all 500ms ease-in-out;-o-transition: all 500ms ease-in-out;opacity: 0;}.div-img:hover .img {opacity: 0.5;}.div-img:hover .stars {transform: translate(0px, -20px);opacity: 1;font-size: 15px;position: absolute;left: 0px;top: 100px;}</style><div class="container"><div class="div-img" ><a href="URL de la entrada" target="_blank"><img class="img" height="130" src="URL de la Imagen" alt="Últimas reseñas"/></a></div></div><div class="container"><div class="div-img" ><a href="URL de la entrada"><img class="img" height="130" src="URL de la Imagen" alt="Nombre de Portada"/></a><div class="stars"><span style="color: #ff8f00;">❤❤❤</span><span style="color: #bcbdbd;">❤❤</span></div></div></div><div class="container"><div class="div-img" ><a href="URL de la entrada"><img class="img" height="130" src="URL de la Imagen" alt="Nombre de Portada"/></a><div class="stars"><span style="color: #ff8f00;">❤❤❤❤</span><span style="color: #bcbdbd;">❤</span></div></div></div><div class="container"><div class="div-img" ><a href="URL de la entrada"><img class="img" height="130" src="URL de la Imagen" alt="Nombre de Portada"/></a><div class="stars"><span style="color: #ff8f00;">❤❤❤</span><span style="color: #bcbdbd;">❤❤</span></div></div></div><div class="container"><div class="div-img" ><a href="URL de la entrada"><img class="img" height="130" src="URL de la Imagen" alt="Nombre de Portada"/></a><div class="stars"><span style="color: #ff8f00;">❤❤❤❤</span><span style="color: #bcbdbd;">❤</span></div></div></div><div class="container"><div class="div-img" ><a href="URL de la entrada"><img class="img" height="130" src="URL de la Imagen" alt="Nombre de Portada"/></a><div class="stars"><span style="color: #ff8f00;">❤❤❤❤</span><span style="color: #bcbdbd;">❤</span></div></div></div><div class="container"><div class="div-img" ><a href="URL de la entrada"><img class="img" height="130" src="URL de la Imagen" alt="Nombre de Portada"/></a><div class="stars"><span style="color: #ff8f00;">❤❤❤❤</span><span style="color: #bcbdbd;">❤</span></div></div></div><div class="container"><div class="div-img" ><a href="URL de la entrada"><img class="img" height="130" src="URL de la Imagen" alt="Nombre de Portada"/></a><div class="stars"><span style="color: #ff8f00;">❤❤❤❤❤</span></div></div></div>
◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈Ejemplo 3
<style>.container {position: relative;left: 0px;right: 0px;margin: 1px;top: 0px;bottom: 5px;float:left;}.div-img { display: block; margin-left: auto; margin-right: auto;}.div-img .img { display: block; margin-left: auto; margin-right: auto; width: 100%;}.div-img .stars {font-size: 0px;color: #000;display: block;text-align: center;width: 100%;transform: translate(0px); -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; opacity: 0;top: -30px;left: -50px;}.div-img:hover .img {transform: translate(0px); -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -webkit-transform:translate(30px,0px); // Safari and Chrome }.div-img:hover .stars {transform: translate(0px, -20px);opacity: 1;font-size: 15px;position: absolute;left: -30px;top: 33px;}</style><div class="container"> <div class="div-img" > <a href="URL de la entrada" target="_blank"><img class="img" height="130" src="https://2.bp.blogspot.com/-cCmlrQY5mZc/WEXXAzDssHI/AAAAAAAAGbg/9PUM9GrMIt45DmKbD5Oz_ZE1FPGoQVSwQCLcB/s1600/%25C3%259Altimas%2BRese%25C3%25B1as%2B-%2BPlaca%2B6.png" alt="Últimas reseñas"/></a></div></div><div class="container"> <div class="div-img" > <a href="URL de la entrada"><img class="img" height="130" src="URL de la Imagen" alt="Nombre de Portada"/></a> <div class="stars"><span style="color: #ff8f00;">❤<br />❤<br />❤</span><span style="color: #bcbdbd;"><br />❤<br />❤</span></div></div></div><div class="container"> <div class="div-img" > <a href="URL de la entrada"><img class="img" height="130" src="URL de la Imagen" alt="Nombre de Portada"/></a> <div class="stars"><span style="color: #ff8f00;">❤<br />❤<br />❤<br />❤</span><span style="color: #bcbdbd;"><br />❤</span></div></div></div><div class="container"> <div class="div-img" > <a href="URL de la entrada"><img class="img" height="130" src="URL de la Imagen" alt="Nombre de Portada"/></a> <div class="stars"><span style="color: #ff8f00;">❤<br />❤<br />❤</span><span style="color: #bcbdbd;"><br />❤<br />❤</span></div></div></div><div class="container"> <div class="div-img" > <a href="URL de la entrada"><img class="img" height="130" src="URL de la Imagen" alt="Nombre de Portada"/></a> <div class="stars"><span style="color: #ff8f00;">❤<br />❤<br />❤<br />❤</span><span style="color: #bcbdbd;"><br />❤</span></div></div></div><div class="container"> <div class="div-img" > <a href="URL de la entrada"><img class="img" height="130" src="URL de la Imagen" alt="Nombre de Portada"/></a> <div class="stars"><span style="color: #ff8f00;">❤<br />❤<br />❤<br />❤</span><span style="color: #bcbdbd;"><br />❤</span></div></div></div><div class="container"> <div class="div-img" > <a href="URL de la entrada"><img class="img" height="130" src="URL de la Imagen" alt="Nombre de Portada"/></a> <div class="stars"><span style="color: #ff8f00;">❤<br />❤<br />❤<br />❤</span><span style="color: #bcbdbd;"><br />❤</span></div></div></div><div class="container"> <div class="div-img" > <a href="URL de la entrada"><img class="img" height="130" src="URL de la Imagen" alt="Nombre de Portada"/></a> <div class="stars"><span style="color: #ff8f00;">❤<br />❤<br />❤<br />❤<br />❤</span></div></div></div>
◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈Instrucciones para Adaptar el Widget
- Tenemos que tener muy presente que todo lo que les señalo en color verde, tendrán que modificarse.
- Los iconos ❤ pueden modificarse por el que ustedes mas deseen Ejem: (★ ❤ ● ■ ♫ ▲ ✿ ◆ ☀ ☁ ☻ ✹ ➽ ◆ ✖). Esto ya será decisión de ustedes.
- Si quieres una imagen de "Ultimas Reseñas" aquí te dejo unos freebies que seguro te encantaran.
Instrucciones de Instalación
1. Vamos a diseño2. Añadir gadget + HTML3. Pegamos el Código del Widget recuerda que antes debes tener el código listo y preparadoY Listo!! que disfrutes.... Si tienes problemas con el código o realmente parece que hablo en chino, recuerda que estoy para ayudarles ante cualquiera duda o dificultad puedes ponerte en contacto conmigo en los comentarios.
◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure