Casper es una plantilla Blogger moderna y adaptable para cualquier sitio web, te permite crear un blog hermoso, profesional y fácil de implementar con todas sus funciones básicas, plantilla visible y adaptable en cualquier dispositivo. Totalmente personalizable con sus opciones de fondos, colores y otras opciones.
Casper Plantilla Blogger Adaptable, diseño de plantilla Blogger modificado y editado desde su diseño base versión gratuita, para su uso en una nueva plantilla Blogger versión premiun limpio Sin scripts cifrados, versión en español por tutoriales gratis de Internet.
- Diseño Responsivo. Se adapta perfectamente a cualquier tamaño de pantalla, desde móvil hasta ordenadores de escritorio.
- Optimizado para Velocidad. Código limpio y optimizado para garantizar tiempos de carga rápidos y una experiencia fluida.
- Personalizable. Fácil de personalizar con opciones de color, fuentes y diseño para adaptarse a tu marca.
- SEO Optimizado. Estructura y etiquetas optimizadas para mejorar tu posicionamiento en motores de búsqueda.
 |
| Versión Gratuita |
| Características | Disponibilidad |
|---|---|
| Tipo de Plantilla | Blogger |
| Responsive | Si Verificar |
| Resultados Enriquecidos | Si Verificar |
| Compatibilidad móvil | Si Verificar |
| Velocidad de Carga | Si Verificar |
| Tipo de Plantilla | Blog Personal |
| Diseño Web | Limpio |
| Columnas | 2 |
| Codificación | HTML | CSS |
| Compatibilidad SEO | Amigable |
| Estilo de Comentarios | Diseño Blogger |
| Tipo de Menú | Adhesivo |
| Botón Redes Sociales | Incrustados |
| Página de Error | 404 personalizada |
| Espacio de Publicidad | Adaptable |
| documentación | Si |
| Pie de pagina | Limpio |
2. Haga una copia de seguridad de su plantilla anterior si decide volver a utilizarla. Para hacer esto, haga clic en el enlace "descargar copia de seguridad" y guarde la copia de seguridad.
3. Luego, ubicar la plantilla Casper Plantilla Blogger Adaptable que acaba de descargar y presione "Restablecer".
4. Desactive la versión móvil de esta plantilla, haga clic en Tema / Configuración para dispositivos móviles / Seleccionar para computadoras.
1º Aviso ultimas publicaciones en blogger
Entrar a Blogger / Tema / Editar HTML buscar el siguiente código de enlace url https://comidasyrecetasdelperu.blogspot.com/ reemplazar por el enlace url de su propio blog. También puede elegir la cantidad de publicaciones que se desea mostrar cambiando el numero en la opción t=10
<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="https://comidasyrecetasdelperu.blogspot.com/",t=10;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#recentbreaking li:first").slideUp(function(){$(this).appendTo($("#recentbreaking ul")).slideDown()})}var n,r,a="",i=e.feed.entry;if(void 0!==i){a="<ul>";for(var l=0;l<i.length;l++){for(var s=0;s<i[l].link.length;s++)if("alternate"==i[l].link[s].rel){n=i[l].link[s].href;break}r=i[l].title.$t,a+='<li><i class="fa fa-check-square"></i><a href="'+n+'" target="_blank">'+r+"</a></li>"}a+="</ul>",$("#recentbreaking").html(a),setInterval(function(){t()},5e3)}else $("#recentbreaking").html("<span>There nothing here?</span>")},error:function(){$("#recentbreaking").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script> 2º Editar Menú Principal
Entrar a Blogger / Diseño abrir gadget lista de vínculos Menú renombrar el titulo, submenú 1 y submenú 2. Reemplazar cada símbolo # por el enlaces url que deseamos mostrar en el menú principal de nuestro blog.
2º1 Menú y submenú predeterminados
Ejemplo de enlace predeterminado:
Submenú de nivel 1 Ejemplo: _Submenú 1 “Antes del título, agregue 1 guion bajo ”
Submenú de nivel 2 Ejemplo: __Submenú 2 “Antes del título, agregue 2 guiones bajos ”
INFORMACIÓN: Los enlaces de Submenú 2 deben estar por debajo de los enlaces de Submenú 1
2º2 Utilizar enlace url simple de etiquetas
Este código de enlace url nos permite mostrar las entradas separadas por etiqueta de forma ordenada, debemos reemplazar el símbolo # por el siguiente enlace url de etiquetas.
Cambiar la palabra ETIQUETAS por las etiquetas que utilizamos en nuestro blog. También podemos cambiar la cantidad de entradas que deseamos mostrar cambiando el numero en la opción results=15.
/search/label/ETIQUETAS?&max-results=153º Configuración para dispositivos móviles
Para la configuración en dispositivos móvil entrar a Tema / Configuración para dispositivos móviles elegir la opción para Computadoras, de esta manera el diseño de la plantilla se visualizara en los dispositivos móvilescon todas sus opciones.
1º Botones predeterminados
Implementar cualquiera de estos códigos de botones en la sección Vista HTML de la edición de entradas en blogger, reemplazar la palabra ENLACE por en enlace url que deseamos enviar. También podemos renombrar los títulos de cada botón.
<a class="button btn" href="ENLACE" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Botón predeterminado</font></font></a><a class="button btn preview" href="ENLACE" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Avance</font></font></a><a class="button btn download" href="ENLACE" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Descargar</font></font></a><a class="button btn link" href="ENLACE" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Visita un enlace</font></font></a><a class="button btn cart" href="ENLACE" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Comprar ahora</font></font></a><a class="button btn share" href="ENLACE" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Compartir</font></font></a><a class="button btn contact" href="ENLACE" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Contáctenos</font></font></a><a class="button btn info" href="ENLACE" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Más información</font></font></a>2º Botones de colores
Implementar cualquiera de estos códigos de botones de colores en la sección Vista HTML de la edición de entradas en blogger, reemplazar la palabra ENLACE por en enlace url que deseamos enviar. También podemos renombrar los títulos de cada botón.
<a class="button btn color" href="ENLACE" style="background: rgb(22, 160, 133);" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Botón de color</font></font></a><a class="button btn preview color" href="ENLACE" style="background: rgb(39, 174, 96);" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Avance</font></font></a><a class="button btn download color" href="ENLACE" style="background: rgb(41, 128, 185);" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Descargar</font></font></a><a class="button btn link color" href="ENLACE" style="background: rgb(142, 68, 173);" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Visita un enlace</font></font></a><a class="button btn cart color" href="ENLACE" style="background: rgb(243, 156, 18);" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Comprar ahora</font></font></a><a class="button btn share color" href="ENLACE" style="background: rgb(231, 76, 60);" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Compartir</font></font></a><a class="button btn contact color" href="ENLACE" style="background: rgb(241, 196, 15);" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Contáctenos</font></font></a><a class="button btn info color" href="ENLACE" style="background: rgb(52, 73, 94);" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Más información</font></font></a>3º Botón de descarga y Compra
Implementar estos códigos de botones descarga y compra en la sección Vista HTML de la edición de entradas en blogger, reemplazar la palabra ENLACE por en enlace url que deseamos enviar. También podemos cambiar la letras 2 MB y $25 por lo que deseamos renombrar en el boton.
<a class="button btn x2 download" href="ENLACE" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Descargar</font></font><span class="btn-info"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">2 MB</font></font></span></a><a class="button btn x2 cart" href="ENLACE" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Comprar ahora</font></font><span class="btn-info"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">$25</font></font></span></a>3º Cuadros de alerta de colores
Para implementar estos códigos de cuadro de alerta debemos colocar el código en la sección Vista HTML de la edición de entradas en blogger, sirve para resaltar algún párrafo en concreto. Reemplazar las letras por nuestro texto.
Casper es una plantilla Blogger moderna y adaptable para cualquier sitio web, te permite crear un blog hermoso, profesional y fácil de implementar con todas sus funciones básicas.
<div class="alert-message alert-success"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Casper es una plantilla Blogger moderna y adaptable para cualquier sitio web, te permite crear un blog hermoso, profesional y fácil de implementar con todas sus funciones básicas</font></font></div><div class="alert-message alert-info"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Casper es una plantilla Blogger moderna y adaptable para cualquier sitio web, te permite crear un blog hermoso, profesional y fácil de implementar con todas sus funciones básicas</font></font></div><div class="alert-message alert-warning"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Casper es una plantilla Blogger moderna y adaptable para cualquier sitio web, te permite crear un blog hermoso, profesional y fácil de implementar con todas sus funciones básicas</font></font></div><div class="alert-message alert-error"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Casper es una plantilla Blogger moderna y adaptable para cualquier sitio web, te permite crear un blog hermoso, profesional y fácil de implementar con todas sus funciones básicas</font></font></div>4º Tabla de contenido
Agregar tabla de contenido en las publicaciones de blogger, colocar el siguiente código htm dentro de Vista HTML de la edición de entradas en blogger, Reemplazar por nuestro texto a mostrar.
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr>
<th>Table 1</th>
<th>Table 2</th>
<th>Table 3</th>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
</tbody>
</table>L5º Formulario de Contacto
<div class="contact-form-widget"><form class="contact-form-form" name="contact-form">
<input ariby="Name" class="contact-form-name cf-s" id="ContactForm1_contact-form-name" name="name" placeholder="Nombre" size="30" type="text" value="">
<input ariby="Email *" class="contact-form-email cf-s" id="ContactForm1_contact-form-email" name="email" placeholder="Correo electrónico *" size="30" type="text" value="">
<textarea ariby="Message *" class="contact-form-email-message cf-s" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Mensaje *" rows="5"></textarea>
<font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><input class="contact-form-button contact-form-button-submit btn" id="ContactForm1_contact-form-submit" type="button" value="Enviar"></font></font>
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</form></div> 6º Caja para código Html
<pre><code>COLOCAR EL CODIGO HTML</code></pre> 7º Videos de Youtube Responsive
Para colocar videos de youtube y otra plataformas de videos de manera responsiva utilizar el siguiente código en la sección Vista HTML de la edición entradas del blog. Cambiar IDENTIDAD-VIDEO por la identidad de nuestro video de youtube (en el caso de utilizar otra plataformas de videos reemplazar el código completo //www.youtube.com/embed/IDENTIDAD-VIDEO por el enlace url de tu video).
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/IDENTIDAD-VIDEO">
</div>
</div>
</div>8º Gadget Redes sociales
Colocar un gadget de redes sociales en la barra lateral de la plantilla ingresando a Blogger / Diseño agregar un nuevo gadget, reemplazar el código URL-REDES-SOCIALES por los enlaces url de nuestras redes sociales.
<ul class="social-icons social color">
<li class="facebook"><a alt="Facebook" class="fa-facebook btn" data-text="true" href="URL-REDES-SOCIALES" rel="nofollow noopener" target="_blank" title="Facebook"><span class="text"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Facebook</font></font></span></a></li>
<li class="twitter"><a alt="Twitter" class="fa-twitter btn" data-text="true" href="URL-REDES-SOCIALES" rel="nofollow noopener" target="_blank" title="Twitter"><span class="text"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Twitter</font></font></span></a></li>
<li class="youtube"><a alt="YouTube" class="fa-youtube btn" data-text="true" href="URL-REDES-SOCIALES" rel="nofollow noopener" target="_blank" title="YouTube"><span class="text"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">YouTube</font></font></span></a></li>
<li class="instagram"><a alt="Instagram" class="fa-instagram btn" data-text="true" href="URL-REDES-SOCIALES" rel="nofollow noopener" target="_blank" title="Instagram"><span class="text"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Instagram</font></font></span></a></li>
</ul>| Detalles | Descripción |
|---|---|
| Nombre de la plantilla | Casper Blogger template |
| Autor Original | probloggertemplates |
| URL | probloggertemplates |
| Lanzamiento | 18 de mayo de 2022 |
| Actualización | 2 Setiembre 2024 |
| Licencia | Gratis | Reconocimiento 4.0 Creative Commons |
| Editor | Tutoriales Gratis de Internet |
PD. Si detecta algún tipo de falla o error en su compra no dude en enviar un mensaje en la sección contactos de esta pagina se le responderá en brevedad suerte en su proyecto blogger de videojuegos. Tutoriales como Crear un blog de juegos.