Guía de instalación y configuración de AsapBlogger
viernes, 29 de abril de 2022
1. Instalación
Extraiga el archivo ZIP de la plantilla AsapBlogger, luego abra el archivo AsapBlogger V.1.0.xml usando un editor de texto como el bloc de notas y copie todo el texto. Abra el editor HTML del tema de su blog y luego pegue el texto que copió anteriormente. No olvide seleccionar escritorio en la configuración móvil.
Metaetiquetas
Barra de color en el navegador del teléfono inteligente
<meta content='#212121' name='theme-color'/>
<meta content='#212121' name='msapplication-navbutton-color'/>
<meta content='#212121' name='apple-mobile-web-app-status-bar-style'/>
Reemplace #212121 con el código de color de su elección. Le recomendamos que haga coincidir el color del encabezado.
OG facebook y twitter
Busque " Su código de imagen ", luego reemplácelo con la URL de su imagen. La resolución mínima es de 1280 x 768 píxeles.
Código de verificación
<meta content='xxxxxxxxxxxxxxxxx_g' name='google-site-verification'/>
<meta content='xxxxxxxxxxxxxxxxx' name='msvalidate.01'/>
<meta content='xxxxxxxxxxxxxxxxx' name='p:domain_verify'/>
<meta content='xxxx_xxxxx-xxxxxxx' name='majestic-site-verification'/>
2. Pantalla
Color principal
:root{
--bg:linear-gradient(30deg,#c39 19%,#66c 100%);
--bg-link:#40407a;
--bg-link-hover:#DE2F1B;
--link-color:#1C7CA6;
--link-hover:#e74c3c;
}
Cambie el linear-gradient(30deg,#c39 19%,#66c 100%) para cambiar los colores de fondo y pie de página.
Ancho de la hoja
Para cambiar el ancho de la barra (contenido del cuerpo) Busque el siguiente código
.full-row {
width: 100%;
margin: 0 auto;
max-width: 980px;
}
Luego reemplace 980px con el ancho que desee.
3. Otros
Lazy load en Imágenes
<img data-original-height="455" data-original-width="640" height="284" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj61vF0DzDBVmhwn-kEh2OVCfL6E7mR8W-zhke4SHFOWiw2J_seFD50svuM7i0LFcwkOWAUfde9YEsbBpQ3KISoLItIE0kH3SloFQZvuM57JGoDbxkBdxzdH3fSslaoH12YPbEUqfYCnw/s400/vegetables-1584999_640-min.jpg" width="400"/>
Cambiar a:
<img class='b-lazy' data-original-height="455" data-original-width="640" height="284" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj61vF0DzDBVmhwn-kEh2OVCfL6E7mR8W-zhke4SHFOWiw2J_seFD50svuM7i0LFcwkOWAUfde9YEsbBpQ3KISoLItIE0kH3SloFQZvuM57JGoDbxkBdxzdH3fSslaoH12YPbEUqfYCnw/s400/vegetables-1584999_640-min.jpg" width="400" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEXz8/SVuXQoAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg=='/>
Este método es un poco complicado porque debe hacerse manualmente, por lo que es opcional, especialmente si solo publica una o dos imágenes. O puede usar el método nativo.
Lazy load en Youtube
Por favor, lea aquí.
Comentario
Esta plantilla utiliza comentarios disqus. Para reemplazarlo con su disqus, busque la palabra santheme y reemplácela con su nombre abreviado .
Para cambiarlo a un comentario de blogger, busque el siguiente código:
<b:include data="post" name="disqus-comments"/>
luego cambia a
<b:include data="post" name="comments"/>
Menú, enlace de sitio y redes sociales
Abra el menú de diseño, haga clic en editar y luego reemplace # con su enlace.
Menú
<ul>
<li><a href='#'>Inicio</a></li>
<li><a href='#'>BIZ</a></li>
<li><a href='#'>Política</a></li>
<li><a href='#'>Entretenimiento</a></li>
<li class='dropdown-item'><span class='dropdown-label'>Peliculas<span class='dropdown-symbol'></span></span>
<ul class='menu-dropdown'>
<li><a href='#'>Korea</a></li>
<li><a href='#'>Jepang</a></li>
<li><a href='#'>China</a></li>
<li><a href='#'>Tailandia</a></li>
</ul>
</li>
</ul>
Enlace del sitio
<ul class='clearfloat'>
<li><a href='#'>Quienes Somos</a></li>
<li><a href='#'>Contacto</a></li>
<li><a href='#'>Sitemap</a></li>
<li><a href='#'>Aviso Legal</a></li>
<li><a href='#'>Políticas de Privacidad</a></li>
<li><a href='#'>Términos y Condiciones</a></li>
</ul>
Medios de comunicación social
<ul class='clearfloat'>
<li><a aria-label='Open Facebook' href='https://www.facebook.com/' rel='nofollow noreferrer' target='_blank'><svg><use xlink:href='#fbicon'/></use></svg></a></li>
<li><a aria-label='Open Twitter' href='https://twitter.com/' rel='nofollow noreferrer' target='_blank'><svg><use xlink:href='#twicon'/></use></svg></a></li>
<li><a aria-label='Open Instagram' href='https://instagram.com/' rel='nofollow noreferrer' target='_blank'><svg><use xlink:href='#isicon'/></use></svg></a></li>
<li><a aria-label='Open Youtube' href='https://www.youtube.com/' rel='nofollow noreferrer' target='_blank'><svg><use xlink:href='#yticon'/></use></svg></a></li>
</ul>
Publicidad
Abra el menú de diseño y luego pegue el código del anuncio en el espacio disponible. O si no quiere molestarse, simplemente active la función de anuncios automáticos proporcionada por Adsense.
