Tutorial: Cómo hacer publicidad en responsive con CSS y HTML

Rykrdo · 15 Feb 2020

Css para hacer la publicidad .php en responsive
Tiempo sin hacer tutoriales....

Hace ya unos meses tuve un p**o problema con la publicidad de mi blog, lo que pasaba es que la publicidad no es responsive,
y desde el celular se veía super feo(quizás algunos me entiendan)*

¿Como resolver eso?
- Fácil carnal... css y html, nada más.

CSS:

.ads-responsive-pc, .ads-responsive-cell {
  position: relative;
  z-index: 0;
}
@media only screen and (max-width: 1180px) {
  .ads-responsive-pc {
    display: none!important
  }
}
@media only screen and (min-width: 1180px) {
  .ads-responsive-cell {
      display: none!important
}}

Y paraponer la publicidad como es....

HTML:

<center>
<div class="ads-responsive-jxyz-pc">
<!-- Publicidad 728x102.php -->
</div>
<div class="ads-responsive-jxyz-cell">
<!-- Publicidad 300x62.php -->
</div>
</center>

Edrien · 15 Feb 2020

Se agradece el aporte

, me va a servir de seguro.

Ricardo Smeja · 4 Jul 2020

Rápido y sencillo. Sin mucha complejidad. Gracias amigo.

Souhiro · 2020-08-14T21:44:08-0500

Está bien, pero recuerda que el display: none; oculta el elementos pero el HTML sigue allí. Lo que puede funcionar tambien es poner la condicional de mobile:

Insertar CODE, HTML o PHP:

 <b:if cond="data:blog.isMobile">
    <!-- Elemento que se mostrará en la version móvil-->
    <div>
    ...
    </div>
 <b:else/>
    <!-- Elemento que se mostrará en la versión Web -->
    <nav>
    ...
    </nav>
 </b:if>

Grasnero · 2020-08-14T21:50:17-0500

Souhiro dijo:
Está bien, pero recuerda que el display: none; oculta el elementos pero el HTML sigue allí. Lo que puede funcionar tambien es poner la condicional de mobile:

Insertar CODE, HTML o PHP:

<b:if cond="data:blog.isMobile">  <div> ... </div> <b:else/>  <nav> ... </nav> </b:if>

Tenia nociones de lo de arriba, pero esto de abajo es nuevo conocimiento.. muchas gracias

Ivan_Caal · 20 Sep 2021

En donde lo aplico. o como los agrego no doy como realizarlo

Hipolito · 20 Sep 2021

Gracias por compartir

Mr. Robot · 19 Nov 2021

Gracias por este tuto colega!!