Plantilla Blogger Premium Gratis e Instrucciones

Descargar Plantilla blogger responsiva, moderna y actualizada para su sitio web totalmente gratis, esta plantilla fue editada y modificada por Tutoriales Gratis de Internet para su libre uso en diseño blogger. Plantilla Blogger con diseño receptivo y adecuada para todo tipo de blogs en blogger. Diseño sencillo con una combinación de colores simples, limpio y moderno, optimizado para SEO. Creado utilizando algunas de las tendencias en diseños web más populares en la actualidad cuidando la velocidad de carga.

• Vista previa Version Gratuita
• Descarga Version Gratuita

Responsiva
SEO amigable
Herramienta de validación de pruebas de Google
Columnas 2
Navegación superior
Leer mas automático
Migas de pan
Publicación reciente destacadas
Cuadro de búsqueda 1
Opciones de sistema de comentarios
Menú de pie de página
Barra lateral adhesiva
Imagen de caja de luz
Volver al botón arriba
Compartir redes sociales
Seguir blog por correo electrónico
Y mucho más...

Editar Menú Principal

Abrir Blogger / Tema / Editar HTML

Buscar el siguiente código <nav id='mudahmenu'  aqui tendremos las opciones del menú principal, debemos reemplazar cada nombre y colocar enlaces url que deseamos mostrar en el Menu principal en lugar del símbolo #

<nav id='mudahmenu' itemscope='itemscope' itemtype='https://schema.org/WPHeader'>
<div id='head-mobile'/>
<div class='button' id='menu-button'/>
<ul>
  <li class='homemenu'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='name'>INICIO</span></a></li>
  <li><a href='#' itemprop='url'><span itemprop='name'>Nuevo</span></a></li>
  <li><a href='#' itemprop='url'><span itemprop='name'>Categorias</span></a></li>
  <li><a href='#' itemprop='url'><span itemprop='name'>Videos</span></a></li>
  <li><a href='#' itemprop='url'><span itemprop='name'>Sport</span></a></li>
  <li><a href='#' itemprop='url'><span itemprop='name'>Submenu</span></a>
  <ul>
    <li><a href='#' itemprop='url'><span itemprop='name'>Submenu 1</span></a></li>
    <li><a href='#' itemprop='url'><span itemprop='name'>Submenu 2</span></a></li>
    <li><a href='#' itemprop='url'><span itemprop='name'>Submenu 3</span></a></li>
    <li><a href='#' itemprop='url'><span itemprop='name'>Submenu 4</span></a></li>
    <li><a href='#' itemprop='url'><span itemprop='name'>Submenu 5</span></a></li>
  </ul>
  </li>
  <li><a href='#' itemprop='url'><span itemprop='name'>Submenu</span></a>
  <ul>
    <li><a href='#' itemprop='url'><span itemprop='name'>Submenu 1</span></a></li>
    <li><a href='#' itemprop='url'><span itemprop='name'>Submenu 2</span></a></li>
    <li><a href='#' itemprop='url'><span itemprop='name'>Submenu 3</span></a></li>
    <li><a href='#' itemprop='url'><span itemprop='name'>Submenu 4</span></a></li>
    <li><a href='#' itemprop='url'><span itemprop='name'>Submenu 5</span></a></li>
  </ul>
  </li>
</ul>
</nav>

Editar Menú Pie de Pagina 

Abrir Blogger / Tema / Editar HTML

Buscar el código <div class='footer-menu'> debemos reemplazar los títulos y colocar enlaces url de sus paginas en lugar del símbolo #

<div class='footer-menu'>
<div class='maxwrap bawahcr'>
<ul class='menufoot mobile-hide' itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement' role='navigation'>
<li><a href='#' itemprop='url' title='Acerca de'><span itemprop='name'>About</span></a></li>
<li><a href='#' itemprop='url' title='Contactos'><span itemprop='name'>Contact</span></a></li>
<li><a href='#' itemprop='url' title='Disclaimer'><span itemprop='name'>Disclaimer</span></a></li>
<li><a href='#' itemprop='url' title='Politica de privacidad'><span itemprop='name'>Privacy Policy</span></a></li>
<li><a href='#' itemprop='url' title='Sitemap'><span itemprop='name'>Sitemap</span></a></li>
</ul>
<div class='clear'/>
</div>
</div>

Editar Numeración de Paginas

Abrir Blogger / Tema / Editar HTML

Buscar el código postperpage=8 y reemplazar el número 8 por el numero de las ultimas publicaciones que desea mostrar en su página principal.

<script type='text/javascript'>
/*<![CDATA[*/
var postperpage=8;var numshowpage=2;var upPageWord ='Prev';var downPageWord ='Next';var urlactivepage=location.href;var home_page="/";
/*]]>*/
</script>

Editar Meta Etiquetas

Abrir Blogger / Tema / Editar HTML

Encuentre en la plantilla  Meta Tag SEO a continuación reemplace cada metaetiqueta marcado en mayúsculas por sus propios códigos tags o datos de su blogger.

<!-- [ 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='DESCRIPCION-DEL-BLOG' 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='PALABRAS-CLAVES-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'/>
<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'/>

Editar Redes Sociales (Widget) 

Abrir Blogger / Diseño / Editar

Dentro del código de redes sociales buscar el símbolo # luego reemplace este símbolo con enlaces url de sus redes sociales (Puede retirar las que no desea utilizar suprimiendo partes del código).  

ejemplo:

   <li>
      <a href="#" target="blank" rel="nofollow noopener" class="social-google-plus">
      <span class="fa fa-youtube"></span>
      <span class="follow-inner-text">Youtube</span>
      <span class="follow-redirect-text pull-right">Suscribete</span>
      </a>
   </li>

<ul id="social-counts" class="social-counts modal-1 typo-white">
   <li>
      <a href="#" target="blank" rel="nofollow noopener" class="social-facebook">
      <span class="fa fa-facebook"></span>
      <span class="follow-inner-text">Facebook</span>
      <span class="follow-redirect-text pull-right">Me gusta</span>
      </a>
   </li>
   <li>
      <a href="#" target="blank" rel="nofollow noopener" class="social-twitter">
      <span class="fa fa-twitter"></span>
      <span class="follow-inner-text">Twitter</span>
      <span class="follow-redirect-text pull-right">Seguir</span>
      </a>
   </li>
   <li>
      <a href="#" target="blank" rel="nofollow noopener" class="social-google-plus">
      <span class="fa fa-youtube"></span>
      <span class="follow-inner-text">Youtube</span>
      <span class="follow-redirect-text pull-right">Suscribete</span>
      </a>
   </li>
   <li>
      <a href="#" target="blank" rel="nofollow noopener" class="social-instagram">
      <span class="fa fa-instagram"></span>
      <span class="follow-inner-text">Instagram</span>
      <span class="follow-redirect-text pull-right">Seguir</span>
      </a>
   </li>
   <li>
      <a href="#" target="blank" rel="nofollow noopener" class="social-blogger">
      <span class="fa fa-user"></span>
      <span class="follow-inner-text">Blogger</span>
      <span class="follow-redirect-text pull-right">Unirse</span>
      </a>
   </li>
</ul>

Agregar Botón Demostración y Descarga

Para colocar botón de demostración y descarga en las entradas del blog debemos de usar el código html de abajo en la Edición HTML, debemos colocar los enlaces url de nuestros archivo de  descarga y el enlace de demostración en la opción  TU-LINK-AQUÍ

• Vista previa Version Gratuita
• Descarga Version Gratuita

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="TU-LINK-AQUI" rel="nofollow"  target="_blank">DEMOSTRACION</a></li>
<li><a class="download" href="TU-LINK-AQUI" rel="nofollow"  target="_blank">DESCARGAR</a></li>
</ul>
</div>
<div class="clear"></div>

Agregar Spoilers

Para agregar botón de contenido oculto (spoiler) Copiar el código de abajo en la Edición HTML de la entrada donde queremos usar el spoiler, solo reemplazar y colocar su texto en la opción LETRAS Y CONTENIDO AQUI

Para hacer una Blockquote, simplemente seleccione todo el texto que desea convertir en una Cita y haga clic en el ícono de Cita en la publicación del blog del panel del editor de texto.

<div id="flippy"><button>Spoiler</button></div>
<div id="flippanel">
LETRAS Y CONTENIDO AQUI
</div>

Tablas en las Publicaciones

Implementar tablas en las publicaciones o entradas de blogger, agregar el siguiente código en la sección Edición HTML de las entrada que desea mostrar una tabla, solo reemplace por su texto ordenadamente.
 

<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>

Vídeos de Youtube en Publicaciones

Agregar el código a continuación en la entrada del blog en la sección Edición HTML y reemplace el código de identidad del vídeo de YouTube hEbv9BfdRFk por la ID del vídeo de YouTube que desea mostrar.

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/hEbv9BfdRFk">
</div>
</div>
</div>

Caja de Código en Publicaciones

Agregue el código a continuación en la publicación del blog en la sección Edición HTML y reemplace este texto CÓDIGO PARSEADO AQUÍ con su código HTML / JavaScript / CSS.

<pre><code>CODIGO-PARSEADO-AQUI</code></pre>

Importante debemos parsear el código html en esta caja contenedora de códigos, reemplazar el texto CODIGO-PARSEADO-AQUI parsea sus códigos en el siguiente enlace  AQUÍ