Plantilla blogger Responsive para Revistas o Magazine tiene una apariencia y un diseño simple, pero con varias características que son bastante útiles para las actividades de blogs actuales donde se publica continuamente contenido sobre noticias, espectáculos y demás opciones. Esta plantilla esta adecuada para personas que tienen un blog con un nicho mixto o variado por su excelentes características de diseño limpio.
| 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 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 Revistas o Magazine 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 Menú Principal
Abrir Blogger / Tema / Hacer clic en Editar HTML.
Buscar código del menú y luego reemplace todos los código # con enlaces url de su blog. También renombrar cada texto por las que desea mostrar.
<ul>
<li>
<a href='#' itemprop='url'><span itemprop='name'>Nosotros <i aria-hidden='true' class='fa fa-angle-down fa-fw'/></span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Sobre Nosotros</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>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'>Nuevo <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'>Espectaculo <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'>Foto</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Global</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Tecnologia</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Video</span></a></li>
</ul>Modificar Barra lateral de Redes Sociales
Abrir Blogger / Tema / Haga clic en Editar HTML.
Buscar el código siguiente y reemplace el código # con los enlaces de tus redes sociales. En la opción Seguir Sitio cambiar el código 4834252868408751028 con la ID de su blog.
<span class='social-right'>
<li class='sosialkuu'><a class='blg' href='https://www.blogger.com/follow-blog.g?blogID=4834252868408751028' rel='nofollow noopener' target='_blank' title='Siga este sitio'><i class='fa fa-user fa-2x'/></a></li>
<li class='sosialkuu'><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='sosialkuu'><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='sosialkuu'><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='sosialkuu'><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='sosialkuu'><a class='ytb' href='#' rel='nofollow noopener' target='_blank' title='Suscribirse al canal'><i class='fa fa-youtube-play fa-2x'/></a></li>
</span>Modificar Menú de Pie de página
Abrir Blogger / Tema / Haga clic en Editar HTML.
Buscar el código siguiente y reemplace # con los enlaces url de su blog. También modifique la descripción o texto.
<div class='footer-menux'>
<div class='maxwrap bawahcr'>
<div class='footer-menu'>
<h3>Acerca del sitio</h3>
<p class='footer2'>
Este sitio proporciona una variedad de información de buena calidad en términos de contenido y discusión que ha sido recopilada por nuestro equipo editorial.
</p>
</div>
<div class='footer-menu'>
<h3>Disposición</h3>
<ul class='footer2 line'>
<li><a href='#' title='Disclaimer'>Disclaimer</a></li>
<li><a href='#' title='Kode Etik'>Código ético</a></li>
<li><a href='#' title='Pedoman Media'>Media</a></li>
<li><a href='#' title='Privacy Policy'>Privacidad</a></li>
<li><a href='#' title='Terms of Service'>Terminos de Servicio</a></li>
</ul>
</div>
<div class='footer-menu'>
<h3>Contáctenos</h3>
<ul class='footer2 line'>
<li><a href='#' title='Daftar Isi'>Lista de contenidos</a></li>
<li><a href='#' title='Form Kontak'>Formulario contacto</a></li>
<li><a href='#' title='Form Pengaduan'>Formularios </a></li>
<li><a href='#' title='Info Iklan'>Información publicitaria</a></li>
<li><a href='#' title='Redaksi Kami'>Nuestro Editor
</a></li>
</ul>
</div>
</div>
</div>Metaetiqueta SEO
Entrar Blogger / Tema / Haga clic en Editar HTML
Buscar y reemplace cada texto marcado en Mayúsculas con el código de su metaetiqueta a continuación. PD (Si no desea usar la meta etiqueta déjalo por defecto solo rellene los códigos que desea mostrar)
<!-- [ Meta Tag SEO ] -->
<include expiration='7d' path='*.css'/>
<include expiration='7d' path='*.js'/>
<include expiration='3d' path='*.gif'/>
<include expiration='3d' path='*.jpeg'/>
<include expiration='3d' path='*.jpg'/>
<include expiration='3d' path='*.png'/>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='https://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<title>Página no encontrada - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
<meta content='noindex' name='robots'/>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType != "error_page"'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<script type='application/ld+json'>{ "@context": "https://schema.org", "@type": "WebSite", "url": "<data:blog.homepageUrl/>", "potentialAction": { "@type": "SearchAction", "target": "<data:blog.homepageUrl/>?q={search_term}", "query-input": "required name=search_term" } }</script>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + ", " + data:blog.pageTitle + ", " + data:blog.title' name='keywords'/>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='DESCRIPCION DEL BLOG' name='keywords'/></b:if>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"https://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if></b:if>
<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='https://www.blogger.com/profile/CODIGO DE BLOG' rel='publisher'/>
<link href='https://www.blogger.com/profile/CODIGO PERFIL AUTOR BLOGGER' rel='author'/>
<link href='https://www.blogger.com/profile/CODIGO PERFIL AUTOR BLOGGER' rel='me'/>
<meta content='CODIGO-VALIDACION-GOOGLE-WEBMASTER' name='google-site-verification'/>
<meta content='CODIGO-VALIDACION-BING-WEBMASTER' name='msvalidate.01'/>
<meta content='PAIS' name='geo.placename'/>
<meta content='NOMBRE-ADMINISTRADOR' name='Author'/>
<meta content='general' name='rating'/>
<meta content='ID' name='geo.country'/>
<!-- [ Social Media Meta Tag ] -->
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='"Silakan kunjungi " + data:blog.pageTitle + " Untuk membaca postingan menarik."' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
</b:if>
</b:if>
<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='es_ES' property='og:locale'/>
<meta content='en_US' property='og:locale:alternate'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='USUARIO-TWITTER' name='twitter:site'/>
<meta content='USUARIO-TWITTER' name='twitter:creator'/>
<meta content='summary_large_image' name='twitter:card'/>Crear Mapa del Sitio (Sitemap)
Agregar el código a continuación en una pagina estatica de su blog y reemplace la dirección del url https://plantillasbloogergratuitas.blogspot.com/ por la dirección de su blog.
<div class="tabbed-toc" id="tabbed-toc"></div>
<script>
var tabbedTOC={blogUrl:"https://plantillasbloogergratuitas.blogspot.com/",containerId:"tabbed-toc",activeTab:1,showDates:!0,showSummaries:!1,numChars:200,showThumbnails:!0,thumbSize:60,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:7,newText:' – <em style="color:red;">New</em>'};
</script>
<script src="https://cdn.jsdelivr.net/gh/Indzign/InSEO@master/daftarisikeren.js"></script>
<style scoped="" type="text/css">
.tabbed-toc{margin:0 auto;position:relative;background:linear-gradient(-45deg,#EE7752,#E73C7E,#23A6D5,#23D5AB);background-size:400% 400%;animation:Gradient 15s ease infinite}
.tabbed-toc .loading{display:block;padding:2px 12px;color:#fff}
.tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li{margin:0;padding:0;list-style:none}
.tabbed-toc .toc-tabs{width:20%;float:left}
.tabbed-toc .toc-tabs li a{display:block;overflow:hidden;color:#fff;text-decoration:none;padding:12px;font-size:13px;transition:all .3s}
.tabbed-toc .toc-tabs li a:hover{background-color:rgba(0,0,0,0.05)}
.tabbed-toc .toc-tabs li a.active-tab{background:rgba(0,0,0,0.05);position:relative;z-index:5;margin:0 -1px 0 0}
.tabbed-toc .toc-content,.tabbed-toc .toc-line{width:80%;float:right;background-color:#fff;box-sizing:border-box}
.tabbed-toc .toc-line{float:none;display:block;position:absolute;top:0;right:0;bottom:0}
.tabbed-toc .panel{position:relative;z-index:5}
.tabbed-toc .panel li a{color:#1277cb;display:block;position:relative;font-weight:500;font-size:14px;padding:6px 12px;overflow:hidden}
.tabbed-toc .panel li time{display:block;font-weight:normal;font-size:11px;color:#666;float:right}
.tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-size:13px}
.tabbed-toc .panel li .summary img.thumbnail{float:left;display:block;margin:5px 8px 0 0;width:72px;height:72px;background-color:#fafafa}
.tabbed-toc .panel li{background-color:#f9f9f9;margin:0}
.tabbed-toc .panel li:nth-child(even){background-color:#fff}
.tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li.bold a{background-color:rgba(0,0,0,0.03);outline:none}
.tabbed-toc .panel li a em{background:#f39c12;color:#fff!important;font-style:initial;font-size:11px;margin:0 0 0 5px;padding:2px 10px;border-radius:22px}
.tabbed-toc .panel li:before{display:none}
@-webkit-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@-moz-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@media (max-width:768px){.tabbed-toc .toc-tabs,.tabbed-toc .toc-content{overflow:hidden;width:auto;float:none;display:block}.tabbed-toc .toc-tabs li{display:inline;float:left}.tabbed-toc .toc-tabs li a.active-tab{background-color:rgba(64,64,64,0.1)}.tabbed-toc .toc-content{border:none}.tabbed-toc .toc-line,.tabbed-toc .panel li time{display:none}}
</style>Códigos para Usar en Publicaciones
Botón
Botón demostración y descarga.
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="TU-ENLACE-AQUÍ" target="_blank">DEMO</a></li>
<li><a class="download" href=" TU-ENLACE-AQUÍ" target="_blank">DESCARGA</a></li>
</ul>
</div>
<div class="clear"></div>Spoiler
<div id="flippy"><button>Spoiler</button></div>
<div id="flippanel">
--- AÑADIR CONTENIDO AQUÍ ---
</div>Vídeos de Youtube en publicaciones
Agregue el código a continuación en la publicación del blog en la pestaña HTML y reemplace la identidad del vídeo huV27euDuWQ por su Identidad de vídeo de youtube
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/huV27euDuWQ">
</div>
</div>
</div>Vídeos de Youtube en publicaciones con efecto de desplazamiento flotante
Agregue el código a continuación en la publicación del blog en la pestaña HTML y reemplace la identidad de vídeo huV27euDuWQ por su identidad de vídeo de youtube
<div class='floatvideo-wrapper'>
<div class='floatvideo'>
<div class='videoyoutube'>
<div class='video-responsive'>
<div class='video-youtube loader' data-src='//www.youtube.com/embed/huV27euDuWQ'></div>
</div>
</div>
</div>
</div>Agregar código de resaltador en publicaciones
Agregue el código a continuación en la publicación del blog en la pestaña HTML y reemplace este texto --CÓDIGO PARSEADO AQUÍ-- con su código HTML / JavaScript / CSS.
<pre><code>--CÓDIGO PARSEADO AQUÍ--</code></pre>| Detalles | Descripción |
|---|---|
| Nombre de la plantilla | Plantilla blogger Responsive para Revistas |
| Autor Original | Idntheme |
| URL | https://www.idntheme.com/2019/10/10-magz.html |
| Lanzamiento | Noviembre de 2019 |
| Actualizado | Noviembre 2021 |
| 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.