Son muchos los sitios web en Blogger que se dedican a la publicación de reseñas y artículos sobre aplicaciones de Android que están en la Play Store, y en estos artículos se hace necesario mostrar la información de las apps de forma organizada, pues bien es por ello que en el día de hoy veremos como añadir un cuadro para añadir la información de las aplicaciones de Google Play de uan forma muy estilizada y lo mejor de todo es que es responsive (se adapta a resoluciones de teléfonos móviles).
Cuadro para Información de la APP de Google Play Responsive
El cuadro se ve de la siguiente manera:
Para agregar este truco solo debes ir a Plantilla, Editar HTML y agregas justo antes de ]]></b:skin> lo siguiente:
#APP {
width: 650px;
padding: 5px 0;
margin: auto;
border: 1px solid #bfbfbf;
background: #ffffff;
position: relative;
font-family: 'Roboto', Arial, sans-serif;
background-image: url(https://ssl.gstatic.com/android/market_style/images/web/dark_background_stripes.gif);
margin-bottom: 20px;
color: @fontColor;
-webkit-box-shadow: 0px 4px 5px -2px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 4px 5px -2px rgba(0,0,0,0.5);
box-shadow: 0px 4px 5px -2px rgba(0,0,0,0.5);
}
#APPcolumn1 {
display: table-cell;
width: 74px;
padding: 0 5px;
vertical-align: top;
}
#APPcolumn2 {
display: table-cell;
width: 376px;
padding: 0 5px;
vertical-align: top;
}
#APPcolumn3 {
display: table-cell;
width: 165px;
padding: 0 5px;
padding-right: 10px;
vertical-align: top;
}
#APPimagen {
float: left;
margin-top: 5px;
margin-left: 5px;
height: 74px;
width: 74px;
}
#APPimagen img {
height: 74px;
width: 74px;
}
#APPvaloracion {
float: left;
height: 10px;
width: 67px;
background: url('http://static.elandroidelibre.com/styleV2/images/rating.png') no-repeat center center;
overflow: hidden;
margin-left: 8px;
margin-top: 5px;
}
#APPvaloracion2 {
height: 10px;
width: 67px;
background: url('http://static.elandroidelibre.com/styleV2/images/rating2.png') no-repeat left center;
overflow: hidden;
}
#APP a {
color: @fontColor;
font-family: 'Roboto', Arial, sans-serif;
text-decoration: none;
font-weight: normal;
}
#APPnombre {
float: left;
line-height: 35px;
font-size: 21px;
font-weight: bold;
width: 100%;
overflow: hidden;
}
#APPnombre a {
font-weight: bold;
color: @fontColor !important;
}
#APPautor {
float: left;
line-height: 20px;
font-size: 13px;
width: 100%;
overflow: hidden;
}
#APPandroid {
float: left;
line-height: 20px;
font-size: 13px;
width: 100%;
overflow: hidden;
}
#APPversion {
float: left;
line-height: 20px;
font-size: 13px;
width: 100%;
overflow: hidden;
}
#APPtamano {
float: left;
line-height: 20px;
font-size: 13px;
width: 100%;
text-align: right;
overflow: hidden;
margin-top: 5px;
}
#APPinstalarDesktop { display: block; }
#APPinstalarMobile { display: none; }
media screen and (max-width: 728px) {
#APPinstalarDesktop { display: none; }
#APPinstalarMobile { display: block; }
}
.APPinstalar {
margin-top: 5px;
width: 100%;
float: left;
height: 30px;
-webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.37);
-moz-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.37);
box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.37);
}
.APPinstalarBoton {
width: 100%;
height: 100%;
text-align: center;
line-height: 30px;
color: #ffffff;
font-size: 16px;
text-transform: uppercase;
background-size: 22px 22px;
background-position: left center;
background-repeat: no-repeat;
background-position-x: 4px;
text-indent: 22px;
}
.APPinstalarBoton:hover {
background-color: #9c27b0;
}
.APPinstalarBotonGP {
background-image: url('http://static.elandroidelibre.com/styleV3/googleplay.png') !important;
background-color: #009688;
}
.APPinstalarBotonUTD {
background-image: url('http://static.elandroidelibre.com/styleV3/uptodown.png') !important;
background-color: #338ed7;
}
.APPinstalarBotonAmazon {
background-image: url('http://static.elandroidelibre.com/styleV3/amazon.png') !important;
background-color: #f69b06;
}
media screen and (max-width: 700px) {
#APPcolumn2 {
width: 100%;
}
#APPcolumn3 {
padding: 10px 10%;
width: 80%;
display: block;
float: left;
}
#APP {
width: 97%;
margin-left: 1%;
float: left;
}
#APPnombre {
height: auto;
}
#APPautor {
display: none;
}
#APPandroid {
display: none;
}
#APPversion {
display: none;
}
#APPtamano {
display: none;
}
#APPinstalar {
top: auto;
left: auto;
right: 10px;
bottom: 10px;
}
}
Ahora en la edición HTML de una entrada agrega lo siguiente:
<div id="APP"> <div id="APPcolumn1"> <div id="APPimagen"><img src="https://lh6.ggpht.com/mp86vbELnqLi2FzvhiKdPX31_oiTRLNyeK8x4IIrbF5eD1D5RdnVwjQP0hwMNR_JdA=w300-rw"></div> <div id="APPvaloracion"></div> </div> <div id="APPcolumn2"> <div id="APPnombre"><a href="https://play.google.com/store/apps/details?id=com.whatsapp&hl=es_419" target="_blank"> <div>Whatsapp Messenger</div> </a></div> <div id="APPversion">Versión: 3.4 </div> <div id="APPautor">Autor: WhatsApp Inc.</div> <div id="APPandroid">Requiere Android 2.1 y versiones superiores </div> </div> <div id="APPcolumn3"> <div style="float: left; width: 100%; min-height: 70px;"> <a id="APPinstalarDesktop" href="URL APP PLAY STORE" target="_blank"><div class="APPinstalar"><div class="APPinstalarBoton APPinstalarBotonGP">INSTALAR</div></div></a> <a href="URL APP" target="_blank"><div class="APPinstalar"><div class="APPinstalarBoton APPinstalarBotonUTD">INSTALAR APK</div></div></a> </div> <div id="APPtamano">Tamaño: 11MB </div> </div> </div>
Los valores resaltados en color azul son los que se ven reflejados en el cuadro y los cuales puedes personalizar.
El cuadro como lo he dicho es completamente responsive y se ve bien en teléfonos móviles.
Demo del truco…
Tamaño: 11MB
Si el truco te ha gustado no olvides compartirlo en tus redes sociales.
0 comentarios