Plantilla para Blogger: GeekLines

Por Víctor Calderón Oyarce el miércoles, mayo 15, 2013

GeekLines es una plantilla para Blogger 100% gratuita, escrita en HTML5 y completamente validada. Útil para sitios webs de tecnología, aplicaciones, etc.

Ver Demo Descargar

Características de la plantilla:

Está construída bajo HTML5 a mano.
Contiene una estructura única en el índice de entradas (Primer post, segundo y tercer posts y todos los demás distintos).
Slider Basado en Easy Slider 1.7, el cual se puede configurar a partir de las feeds.
Viene por defecto con Disqus como sistema de comentarios, pero se puede cambiar por el que guste.
No incluye enlaces de atribución, para que puedas usarla y modificarla con libertad.
No posee código inútil, se ha suprimido todo el código irrelevante.

Guía de configuración de la plantilla:

Para que la plantilla funcione en su totalidad, es necesaria una serie de pasos, los cuales detallo a continuación:

Validar plantilla: Para que se mantenga validada es necesario buscar lo siguiente:

<html lang='es' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Y reemplazarlo por esto:

<html lang='es'>

Este paso es necesario cada vez que se inicie el Editor HTML y se guarden los cambios.

Incluir información en meta-tags: Necesitas buscar las siguientes líneas por separado de configurarlas según tus preferencias:

<meta content='DESCRIPCIÓN DE TU BLOG' property='og:description'/>

<meta content='ETIQUETAS SEPARADAS POR COMA' name='keywords'/>

Configurar el slider: El slider está basado en Easy Slider 1.7, puedes modificar los siguientes parámetros dentro del script:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $("#slider").easySlider({
auto: true,
speed: 750,
pause: 4000,
continuous: true

 });
});
//]]>
</script>

Deberás reemplazar los siguientes valores:

auto: true (Cambiar por false para que el slider pase a manual).
speed: 750 (Velocidad de transición)
pause: 4000 (Tiempo entre imágenes)
continuous: true (Al terminar de pasar todas las entradas, volverá nuevamente a la primera)

Para que el script detecte una determinada etiqueta, modifica la siguiente línea:

<script src='/feeds/posts/default/-/Smartphones?orderby=published&amp;amp;alt=json-in-script&amp;amp;callback=showgalleryposts&amp;amp;max-results=20'/>

Reemplaza Smartphones por la etiqueta que desees mostrar en el índice.

También deberás buscar:

<div id='latest-posts-title'>Últimos Artículos en Smartphones</div>

Y reemplazar la línea de texto por la que consideres mejor.

Configurar el menú superior: Necesitas direccionar cada elemento de este menú a la URL correspondiente, junto con incluir el texto que desees. Para ello busca el siguiente código y en los atributos href deberás escribir las direcciones de cada enlace:

<header id='bar-outer'>
      <nav id='topbar' role='navigation'>
        <a href='/' id='blog-logo'>
          <data:blog.title/>
        </a>
        <a href=''>
          Android
        </a>
        <a href=''>
          Aplicaciones
        </a>
        <a href=''>
          Windows Phone
        </a>
        <a href=''>
          iOS
        </a>
        <a href=''>
          Redes Sociales
        </a>
        <a href=''>
          Login
        </a>
      </nav>
    </header>

Un ejemplo:

<header id='bar-outer'>
      <nav id='topbar' role='navigation'>
        <a href='/' id='blog-logo'>
          <data:blog.title/>
        </a>
        <a href='http://www.miblog.com/search/label/Android'>
          Android
        </a>
        <a href='http://www.miblog.com/search/label/Aplicaciones'>
          Aplicaciones
        </a>
        <a href='http://www.miblog.com/search/label/Windows Phone'>
          Windows Phone
        </a>
        <a href='http://www.miblog.com/search/label/iOS'>
          iOS
        </a>
        <a href='http://www.miblog.com/search/label/Redes Sociales'>
          Redes Sociales
        </a>
        <a href='https://accounts.google.com/ServiceLogin?service=blogger'>
          Login
        </a>
      </nav>
    </header>

Modificar la biografía del autor: Si tu blog posee únicamente un autor, entonces busca lo siguiente:

     <aside id='post-author'>

         <div id='author-about'>

           <img class='left' expr:alt='data:post.author' id='author-image' src='https://lh6.googleusercontent.com/-cQU2h9jqgiw/AAAAAAAAAAI/AAAAAAAAAAA/Gw3x4qIKr3M/s100-c/photo.jpg'/>
           <div id='author-name'>Escrito por <a expr:href='data:post.authorProfileUrl' rel='author' title='Perfil del autor'>
             <data:post.author/></a></div>

           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
       <div class='clearfix'/>

     </aside>

Deberás cambiar la URL de la imagen y el texto por alguno que te describa.

Actualización: Si tu blog posee 2 o más autores, deberás utilizar condicionales:

<b:if cond='data:post.author == &quot;Tu nombre&quot;'><!-- Tu mini-biografía -->
      <aside id='post-author'>

         <div id='author-about'>

           <img class='left' expr:alt='data:post.author' id='author-image' src='https://lh6.googleusercontent.com/-cQU2h9jqgiw/AAAAAAAAAAI/AAAAAAAAAAA/Gw3x4qIKr3M/s100-c/photo.jpg'/>
           <div id='author-name'>Escrito por <a expr:href='data:post.authorProfileUrl' rel='author' title='Perfil del autor'>
             <data:post.author/></a></div>

           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
       <div class='clearfix'/>

     </aside>
</b:if> 

<b:if cond='data:post.author == &quot;Nombre de otro autor&quot;'> <!-- La biografía de otro autor-->
      <aside id='post-author'>

         <div id='author-about'>

           <img class='left' expr:alt='data:post.author' id='author-image' src='https://lh6.googleusercontent.com/-cQU2h9jqgiw/AAAAAAAAAAI/AAAAAAAAAAA/Gw3x4qIKr3M/s100-c/photo.jpg'/>
           <div id='author-name'>Escrito por <a expr:href='data:post.authorProfileUrl' rel='author' title='Perfil del autor'>
             <data:post.author/></a></div>

           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
       <div class='clearfix'/>

     </aside>
</b:if>

Reemplazando los nombres por los correspondientes, y añadiendo lo mismo dependiendo de la cantidad de autores.

Configurar el sistema de comentarios: Por defecto la plantilla tiene instalado Disqus, pero puedes optar por otro sistema como IntenseDebate, LiveFyre o comentarios de Google.

Configurar Disqus: Puedes ir a Disqus y configurar tu sitio web, y el ID que hayas registrado para tu sitio, deberás añadirlo aquí:

var disqus_shortname = &#39;demoblogayudabloggers&#39;; // required: replace example with your forum shortname

Reemplazando demoblogayudabloggers por el tuyo.

Configurando otros sistemas de comentarios: Cada sistema es distinto y su instalación también. Puedes implementar cualquier otro tipo de sistema añadiendo el código tal como se indica a continuación:

Suprime el contenido de <div id='comments' />:

  <div id='comments'>           
    <div id='disqus_thread'/>
    <script type='text/javascript'>
        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
        var disqus_shortname = &#39;demoblogayudabloggers&#39;; // required: replace example with your forum shortname

        /* * * DON&#39;T EDIT BELOW THIS LINE * * */
        (function() {
            var dsq = document.createElement(&#39;script&#39;); dsq.type = &#39;text/javascript&#39;; dsq.async = true;
            dsq.src = &#39;//&#39; + disqus_shortname + &#39;.disqus.com/embed.js&#39;;
            (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(dsq);
        })();
    </script>

                </div>

Dejándolo así:

<div id='comments'>           

</div>

E incluye dentro todo el código que necesites para hacer funcionar el otro sistema.

Un ejemplo para los comentarios de Google+:

<script type='text/javascript'>
//<![CDATA[
 window.___gcfg = {lang: 'es'};
 (function() {
   var crearjsplus = document.createElement('script'); crearjsplus.type = 'text/javascript'; crearjsplus.async = true;
   crearjsplus.src = 'https://apis.google.com/js/plusone.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(crearjsplus, s);
 })();
//]]>
</script><div class="g-comments" expr:data-href="data:post.url" data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD" />

Configurar la sidebar dentro de cada entrada: Es importante que sepas, que la barra lateral derecha que aparece dentro de entradas y páginas estáticas debe ser escrita manualmente.

Para incluir un gadget, deberás hacerlo mediante el siguiente código:

<div class='sidebar-widget'>  
 <div class='sidebar-title'>Título del gadget</div>
     <div class='sidebar-widget-content'>
      Texto o código dentro del gadget.
     </div>
     </div>

El cual deberá ser pegado abajo de esto:

<section class='right' id='post-sidebar'>

Nota: Puedes crear adicionalmente bloques sin espacio interno para así aprovechar el 100% del gadget. Para ello utiliza el siguiente código en lugar del anterior:

<div class='sidebar-widget non-padding'>  
    <div class='sidebar-widget-content'>
       Texto o código dentro del gadget.
    </div>
</div>

Modificar todos los enlaces de redes sociales: Por defecto la plantilla incluye los enlaces de Twitter y Facebook de Ayuda Bloggers, deberás configurarlos manualmente:

Para la caja de suscripciones de la barra lateral:

<div id='subscription'> 
         <aside id='twitter-subs'>
         <a class='twitter-follow-button' data-lang='es' data-show-count='false' href='https://twitter.com/ayudabloggers'>Seguir a @ayudabloggers</a>
         </aside> 
        
         <aside id='facebook-sub'>
           <div class='fb-like' data-href='http://www.facebook.com/cloudx18admin' data-send='false' data-show-faces='false' data-width='245'/>
         </aside>
        
         <aside id='gplus-sub'>
           <div class='g-plus' data-height='131' data-href='https://plus.google.com/117852954383455114075' data-width='265'/>
         </aside>
        </div>

Para los enlaces del pie de la plantilla:

<aside id='about-info'>
        &#169; 2013 <data:blog.title/> Todos los derechos reservados.  <span class='right-text right'><a href='http://www.twitter.com/ayudabloggers'>Twitter</a> | <a href='http://www.facebook.com/cloudx18admin'>Facebook</a> | <a href='https://plus.google.com/u/0/112020346592923778561'>Google+</a></span>
        
        <div class='clearfix'/>
      </aside>

Configurar los enlaces al final de la plantilla: Bastaría con hacer lo mismo que hicimos con el primer menú, pero modificando el siguiente código:

      <footer id='sub-footer'>
        <a href='/'>Inicio</a>
        <a href='/'>Publicidad</a>
        <a href='/'>Política de privacidad</a>
        <a href='/'>Términos de uso</a>
        <a href='/'>Mapa del sitio</a>
        <a href='/'>Patrocinadores</a>
        <a href='/'>Colaborar</a>
        <a href='/'>Acerca de</a>
        <a href='/'>Contacto</a>
      </footer>

Importante: Nunca suprimas el widget con el Identificador HTML65 debido a que funciona como clearfix para los otros widgets, si lo suprimes deberás copiarlo nuevamente desde algún editor de textos, extrayéndolo de la plantilla original sin cambios.

Si necesitas información adicional, no dudes en preguntar.

Ir a la página principal Subir A favoritos