M
MixViral
Gamma
Buenas comunidad
hoy les traigo este pequeño truco que nos permitira poner datos sobre alguna APP en nuestro blog, un funcion que nos puede servir en algunos casos.
Por desgracia este no es AUTOMATICO por lo que debemos ingresar los datos de forma manual, este es 100% Responsive.
INSTALACION:
- Ingresar a nuestro Editor de Plantilas HTML y buscamos la etiqueta ]]></b:skin>, justo antes de esta pegamos el siguiente codigo.
Insertar CODE, HTML o PHP:
#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; }
[MENTION=16931]medi[/MENTION]a 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;
}
[MENTION=16931]medi[/MENTION]a 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;
}
}- Una vez agregado vamos a nuestra entrada y la editamos en HTML, para poder agregar el cuadro agregamos el siguiente codigo.
Insertar CODE, HTML o PHP:
<div id="APP">
<div id="APPcolumn1">
<div id="APPimagen"><img src="LOGO"></div>
<div id="APPvaloracion"></div>
</div>
<div id="APPcolumn2">
<div id="APPnombre"><a href="URL-APP" target="_blank"> <div>AIDA64</div> </a></div>
<div id="APPversion">Versión: [B]xxx [/B]</div>
<div id="APPautor">Autor: [B]xxx[/B]</div>
<div id="APPandroid">Requiere Android [B]xxx [/B]y versiones superiores </div>
</div>
<div id="APPcolumn3">
<div style="float: left; width: 100%; min-height: 70px;">
<a id="APPinstalarDesktop" href="URL-APP-PLAYSTORE" target="_blank"><div class="APPinstalar"><div class="APPinstalarBoton APPinstalarBotonGP">INSTALAR</div></div></a>
<a id="APPinstalarMobile" href="market://details?id=com.finalwire.aida64" target="_blank"><div class="APPinstalar"><div class="APPinstalarBoton APPinstalarBotonGP">INSTALAR</div></div></a>
<a href="URL-APP-DESKTOP" target="_blank"><div class="APPinstalar"><div class="APPinstalarBoton APPinstalarBotonUTD">INSTALAR APK</div></div></a>
</div>
<div id="APPtamano">Tamaño: xxxM </div>
</div>
</div>Ahora solo remplazamos las URL por los links correspondientes y las XXX por la informacion correspondiente a la APP
Espero les aya sido util, buscare la forma de hacerlo automatico mas adelante... SALUDOS!
