Plantilla Blogger Responsive para Animes es una plantilla actualizada para blogger dedicado al mundo de los animes, también puede ser usado como magazine. tiene una pagina principal muy atractiva para los visitantes y de fácil navegación dentro del blog en blogger. Plantilla responsive que se adapta bien a todos los dispositivos y lo traemos de forma gratuita con su documentación actualizado en español.
| Características | Disponibilidad |
|---|---|
| Tipo de plataforma | Blogger |
| Responsive | Si Verificar |
| Resultados Enriquecidos | Si Verificar |
| Compatibilidad móvil | Si Verificar |
| Velocidad de Carga | Si | Verificar |
| Tipo de Plantilla | Magazine |
| Diseño Web | Limpio |
| Columnas | 2 |
| Codificación | HTML | CSS |
| Compatibilidad de SEO | Amigable |
| Estilo de Comentarios | Diseño Blogger |
| Tipo de Menú | Fijo Adhesivo |
| Botón de Redes Sociales | Incrustados |
| Página de Error | 404 personalizada |
| Espacio de Publicidad | Si |
| documentación | Si |
1º Iniciar sesión en el panel de Blogger y dirigirse a Tema / Editar HTML.
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 guardar la copia de seguridad.
3º Luego, ubicar el archivo XML de la Plantilla Blogger Responsive para Animes 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.
Modificar Etiquetas Pagina Principal
Entrar a Diseño editar cada gadget animagboxs 1,2,3 y 5 colocando las etiquetas de sus entradas principales que desean mostrar en la pagina de su blog.
Modificar enlaces del Menú principal
Dirigirse a Blogger / Tema / Editar HTML, buscar el siguiente código y reemplazar todos los símbolos # con la url de sus propios enlaces. También renombre los títulos según su criterio.
<ul>
<li>
<a href='#' itemprop='url'><span itemprop='name'>Sobre Nosotros <i aria-hidden='true' class='fa fa-angle-down fa-fw'/></span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Nosotros</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Formulario Contactos </span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Disclaimer</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sitemap</span></a></li>
</ul>
</li>
<li>
<a href='#' itemprop='url'><span itemprop='name'>Genero <i aria-hidden='true' class='fa fa-angle-down fa-fw'/></span></a>
<ul>
<li>
<a href='#' itemprop='url'><span itemprop='name'>Menu 1 <i aria-hidden='true' class='fa fa-angle-down fa-fw'/></span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu</span></a></li>
</ul>
</li>
<li>
<a href='#' itemprop='url'><span itemprop='name'>Menu 2 <i aria-hidden='true' class='fa fa-angle-down fa-fw'/></span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 3</span></a></li>
</ul>
</li>
<li>
<a href='#' itemprop='url'><span itemprop='name'>Extrenos <i aria-hidden='true' class='fa fa-angle-down fa-fw'/></span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 3</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 4</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 5</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Accion</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Comedia</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Trailer</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Videos</span></a></li>
</ul>Modificar enlaces de las Redes Sociales
<span class='social-kanan'>
<li class='sosialfoot'><a class='blg' href='https://www.blogger.com/follow-blog.g?blogID=5580989112647891774' rel='nofollow noopener' target='_blank' title='Seguir este sitio'><i class='fa fa-user fa-2x'/></a></li>
<li class='sosialfoot'><a class='gpl' href='#' rel='nofollow noopener' target='_blank' title='Síguenos en Pinterest'><i class='fa fa-pinterest fa-2x'/></a></li>
<li class='sosialfoot'><a class='fcb' href='#' rel='nofollow noopener' target='_blank' title='Síguenos en facebook'><i class='fa fa-facebook fa-2x'/></a></li>
<li class='sosialfoot'><a class='twt' href='#' rel='nofollow noopener' target='_blank' title='Síguenos en Twitter'><i class='fa fa-twitter fa-2x'/></a></li>
<li class='sosialfoot'><a class='rss' href='#' rel='nofollow noopener' target='_blank' title='Síguenos en Instagram'><i class='fa fa-instagram fa-2x'/></a></li>
<li class='sosialfoot'><a class='ytb' href='#' rel='nofollow noopener' target='_blank' title='Suscríbete a nuestro canal'><i class='fa fa-youtube-play fa-2x'/></a></li>
</span>SEO MetaTag
Abrir Blogger / Tema / Editar HTML
<meta content='DESCRIPCION-BLOG' name='keywords'/></b:if>
<link href='https://www.blogger.com/profile/ID BLOGGER' rel='publisher'/>
<link href='https://www.blogger.com/profile/ID PERFIL AUTOR' rel='author'/>
<link href='https://www.blogger.com/profile/ID BLOGGER' rel='me'/>
<meta content='CODIGO-VALIDACION-GOOGLE-WEBMASTER' name='google-site-verification'/>
<meta content='KODIGO-VALIDACION-BING-WEBMASTER' name='msvalidate.01'/>
<meta content='PAIS' name='geo.placename'/>
<meta content='NOMBRE-ADMINISTRADOR' name='Author'/>
<meta content='https://www.facebook.com/PERFIL-FACEBOOK' property='article:author'/>
<meta content='https://www.facebook.com/FANPAGE-FACEBOOK' property='article:publisher'/>
<meta content='CODIGO-APLICACION-FACEBOOK' property='fb:app_id'/>
<meta content='CODIGO-ADMINISTRADOR-FACEBOOK' property='fb:admins'/>
<meta content='USUARIO-TWITTER' name='twitter:site'/>
<meta content='USUARIO-TWITTER' name='twitter:creator'/>Formularios de contactos
Complete el siguiente formulario para comunicarse con el administrador. Si no hay obstáculos y otras actividades, el administrador responderá inmediatamente al mensaje que envió.
<form id="kontak-arlina" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email *" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" />
<div style="max-width: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager{display:none}
form{color:#666}
form.payforpal{margin:auto;text-align:center}
#kontak-arlina{margin:auto;max-width:640px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{float:left;background:#1abc9c;margin:auto;vertical-align:middle;cursor:pointer;padding:16px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;border-radius:4px;color:#fff;font-weight:500;transition:all .2s ease}
#ContactForm1_contact-form-submit:hover{background:#16a085;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f47669;border:0;box-shadow:none;color:#fff;padding:5px 0;border-radius:3px}
.contact-form-success-message{background:#4fc3f7;border:0;box-shadow:none;color:#fff;border-radius:3px}
img.contact-form-cross{line-height:40px;margin-left:5px}
.post-body input{width:initial}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>
<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '4834252868408751028';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4834252868408751028','//plantillasbloogergratuitas.blogspot.com/','4834252868408751028');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '4834252868408751028', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>Reemplace todo el código 4834252868408751028 anterior con el código de Identidad de su blog.Reemplace el código //plantillasbloogergratuitas.blogspot.com/ anterior con la URL de su blog.
Sitemap o Mapa del Sitio Web
Agregue el código a continuación dentro de una publicación en una nueva página estática del blog.
<div id="bp_toc" style="max-height: 1800px; overflow-x: auto; overflow: scroll;">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">#comments,#Label1,#FollowByEmail1 {display:none;} #HTML3 {visibility:hidden;} /* CSS Full Sitemap */ #bp_toc{background:#31a2db;color:#666;margin:0 auto;padding:4px;} span.toc-note{padding:20px;margin:0 auto;display:block;text-align:center;color:rgba(255,255,255,.5);font-size:1.6rem;text-transform:uppercase;font-weight:700;line-height:normal} .toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;} .toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;} .toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;} #bp_toc td.toc-header-col1,#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3{border:0;border-bottom:1px solid rgba(0,0,0,0.1);} #bp_toc tr:nth-child(1) a {color:#666;} #bp_toc td.toc-header-col1{background-color:#fff;} #bp_toc td.toc-header-col2{background-color:#fff;} #bp_toc td.toc-header-col3{background-color:#fff;} #bp_toc td.toc-entry-col1,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3{border:0} #bp_toc td.toc-entry-col1{background-color:#fff;font-weight:700} #bp_toc tr:nth-child(odd) td.toc-entry-col1{background-color:#f8f8f8} #bp_toc td.toc-entry-col2{background-color:#fff;} #bp_toc tr:nth-child(odd) td.toc-entry-col2{background-color:#f8f8f8} #bp_toc td.toc-entry-col3{background-color:#fff;} #bp_toc tr:nth-child(odd) td.toc-entry-col3{background-color:#f8f8f8} #bp_toc td a{color:#666;} .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px; text-decoration:none;color:#aaa;font-family:'Roboto';font-weight:700;letter-spacing: 0.5px;} .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {text-decoration:none;} .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%} .toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;} .toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#cdb280;} #bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;} .toc-entry-col1 {counter-increment:rowNumber;} #bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;} </style>YouTube Responsive Video
Usar este código para incrustar un vídeo de YouTube responsive en sus entradas o paginas implementar en el html.
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/Dq5K_6YyjQU&t">
</div>
</div>
</div>Cambie la Identidad del vídeo marcado Dq5K_6YyjQU&t con la Identidad de su vídeo en youtube
Botón Demostración y Descargar
Usar este código para incrustar un el botón de Demostración y Descargar en sus entradas o paginas implementar en el html.
<div style="text-align: center;">
<ul class="ripplelink button">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href="YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
<div class="clear"></div>| Detalles | Descripción |
|---|---|
| Nombre de la plantilla | Animag Responsive Blogger Template |
| Autor Original | Idntheme |
| URL | https://www.idntheme.com/2017/08/animag.html |
| Lanzamiento | Agosto 2017 |
| Actualizado | 25 Junio 2020 |
| Licencia | Gratis | Reconocimiento 4.0 de Creative Commons |
| Editor | Tutoriales Gratis de Internet |
PD. todas las plantillas al ser modo gratuito podrían tener algún tipo de falla o error que viene por defecto publicado desde sus mismos editores, algunas plantilla tienen instrucciones incompletas o en algunos casos no existen la documentación, queda en responsabilidad de cada uno utilizar las plantillas o modificarlas para su buen uso. Si desea mas información o comprar la versión premium de dicha plantilla no olvide visitar la web oficial del autor esta en la descripción. Nuestro trabajo es publicar las plantillas mas actuales distribuidas libremente en internet y colocarle una pequeña documentación o instrucciones de uso, previa prueba para su buen funcionamiento en los sitios web en español.
excelente template gracias por compartir
ResponderBorrarComo puedo cambiar los colores de fondo?
ResponderBorrar