Plantillas para blogger gratis línea Azul


Quieres obtener una excelente plantilla para blogger y así darle a tu blog de blogger un aspecto de diseñador web único, Ayudadeblogger.com te ayuda a implementar una nueva plantilla para blogger completamente gratis. Tutorial, la función y la instalación de esta nueva plantilla para blogger es muy fácil de realizarlo, lo único que tendrán que hacer es seguir todas mis instrucciones y la podrán implementar en su blog de blogger así de fácil. Además, si necesitan más plantillas para blogger, solo sigan los enlaces que les dejo a continuación: Plantilla Zona, Plantilla de Noticias, Plantilla de Teléfonos, Plantilla de Espectáculos, Plantilla de Revista, Plantilla de Yahoo, Plantilla de Deportes, Plantilla Evolución, Plantilla Platón, Plantilla Negas, Plantilla Libertad, PlantillaTiempos Modernos, Plantilla Taggui, Plantilla Cuántica, Plantilla Década, Plantilla Pietro, Plantilla Buenas Noticias, Plantilla Revolución, Plantilla Newslie, Plantilla DigitalText, Plantilla Cocina,  Plantilla Tendencia y Plantilla Negocios.

¿Cuáles son las características de la Plantilla Azul?

Las plantillas para blogger tienen que tener un buen desempeño de las cuales la Plantilla Azul tiene las siguientes características:

Estructura SEO
Fácil desempeño
Carga rápida en los navegadores web
Un menú desplegable integrado redes sociales y un buscador
Un Breaking News
Un menú de colores
Widgets basado en etiquetas
Redes sociales habilitado
Adsense para publicidad

tutorial de plantillas para blogger

A continuación mire su denostación en mi blog de demos

crear páginas web

crear páginas web

Les gusto verdad!

Vamos a implementar esta nueva plantilla en nuestro blog de blogger

1 Ir a blogger

2 Dirígete a “Plantilla

3 Da un clic en la parte superior derecha donde dice “Crear copia de seguridad/restablecer” y se te abrirá una venta en la cual tendrás que dar un clic en “Examinar” y buscar el archivo XML que se te fue enviada. Luego das un clic en “Subir” y automáticamente ya tendrás instalada la plantilla en tu blog de
blogger.

4 Ahora dirígete a “Diseño” y vas a encontrar que tus widgets están totalmente desordenados no te preocupes, no borres nada y sigue primero las instrucciones siguientes y luego podrás ordenar tus widgets:

Primer Paso

Debes estar en “Diseño

Configuración de los 4 widgets TECNOLOGIA – FARANDULA – INVERSIONES – DEPORTES

tutorial de plantillas para blogger

Busca en tu página de “Diseño” los nombres que les di anteriormente, abre cada widget y pon en cada uno de ellos solo el nombre de la etiqueta que quieras mostrar.

Por ejemplo mire la imagen a continuación

tutorial de plantillas para blogger


Segundo Paso

Aun debes estar en “Diseño”, vamos a configurar el widget que dice “Tendencias” ábrelo y pon en su interior el nombre de la etiqueta que quieras mostrar

tutorial de plantillas para blogger

Por ejemplo mire la imagen a continuación

tutorial de plantillas para blogger


Tercer Paso

Todavía en “Diseño” busca los dos widgets que tienen como nombre “Inversiones” “Noticias Deportivas” ábrelos y pon en cada uno de ellos solo el nombre del etiqueta que quieras mostrar.

tutorial de plantillas para blogger

Por ejemplo mire la imagen a continuación

tutorial de plantillas para blogger


Cuarto Paso

Configuración del widget Breaking News y del menú de colores

tutorial de plantillas para blogger

Sigues en “Diseño” justo arriba encontraras dos widgets “HTML/Javascript” vacíos, abre el primer widget e inserta el siguiente código en su interior:


tutorial de plantillas para blogger
<div id="TICKER" style="display:none; border-top:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; overflow:hidden; background-color:#FFFFFF; width:980px" onmouseover="TICKER_PAUSED=true" onmouseout="TICKER_PAUSED=false">

    <span style='background-color:#7FB51A;'> &nbsp; &nbsp;<a href="http://www.ayudadeblogger.com/"> <font color=#ffffff> <b>Tutoriales Ayudadeblogger</b></font>&nbsp; &nbsp; </a></span> &nbsp; <b>Todos los tutoriales de blogger</b>&nbsp;

    <span style='background-color:#7FB51A;'> &nbsp; &nbsp;<a href="http://www.ayudadeblogger.com/"> <font color=#ffffff> <b>Tutoriales de Slideshow</b></font>&nbsp; &nbsp; </a></span> &nbsp; <b>Todos los tutoriales de Slideshow</b>&nbsp;

    <span style='background-color:#7FB51A;'> &nbsp; &nbsp; <b><a href="http://www.ayudadeblogger.com/"><font color=#ffffff>Tutoriales de Plantillas</font></a></b>&nbsp; &nbsp; </span> &nbsp; <b>Todos los tutoriales de Plantillas</b>&nbsp;

<span style='background-color:#7FB51A;'> &nbsp; &nbsp;<a href="http://www.ayudadeblogger.com/"> <font color=#ffffff> <b>Tutoriales de Slideshow</b></font>&nbsp; &nbsp; </a></span> &nbsp; <b>Todos los tutoriales de Slideshow</b>&nbsp;

<span style='background-color:#7FB51A;'> &nbsp; &nbsp;<a href="http://www.ayudadeblogger.com/"> <font color=#ffffff> <b>Tutoriales Ayudadeblogger</b></font>&nbsp; &nbsp; </a></span> &nbsp; <b>Todos los tutoriales de blogger</b>&nbsp;

    <span style='background-color:#7FB51A;'> &nbsp; &nbsp; <b><a href="http://www.ayudadeblogger.com/"><font color=#ffffff>Tutoriales de Plantillas</font></a></b>&nbsp; &nbsp; </span> &nbsp; <b>Todos los tutoriales de Plantillas</b>&nbsp;
    <script type="text/javascript" src="http://yourjavascript.com/49007222130/webticker-lib.js" language="javascript"></script></div>

Ahora para realizar esos cambios sigue el siguiente enlace en el cual se explica claramente como configurar este widget headline.


Nos falta abrir el siguiente widget “HTML/Javascript” ábrelo e inserta las siguientes líneas de código, este widget sirve para mostrar el menú de colores

<style>

    .ayudadeblogger-Social-metro {
        width: 980px;
        float: left;
        margin: 0;
        padding: 1em 0;
    }

    .ayudadeblogger-Social-metro ul {
        margin: 0;
        padding: 0;
    }

    .ayudadeblogger-Social-metro ul li {
        list-style: none;
        list-style-type: none;
        padding: 0;
        text-transform: none;
        margin: 0;
        float: left;
        display: inline-block;
        width: 20%;
    }

    .ayudadeblogger-Social-metro ul li a {
        font-size: 80%;
        color: #fff!important;
        display: block;
    }

    .ayudadeblogger-Social-metro ul li a:hover {
        color: #000!important;
        background-color: #999;
        text-decoration: none;
    }

    idc-scoail ul li a, ul li a:hover {
        -moz-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
    }

    .ayudadeblogger-Social-metro ul li .Menu1 {
        background: url("") no-repeat scroll 10px center #7FB51A;
        background-size: 20px;
        padding: 10px 50px;
    }

    .ayudadeblogger-Social-metro ul li .Menu2 {
        background: url("") no-repeat scroll 10px center #4CACEE;
        background-size: 20px;
        padding: 10px 50px;
    }

    .ayudadeblogger-Social-metro ul li .Menu3 {
        background: url("") no-repeat scroll 10px center #3B5998;
        background-size: 20px;
        padding: 10px 50px;
    }

    .ayudadeblogger-Social-metro ul li .Menu4 {
        background: url("") no-repeat scroll 10px center #D44937;
        background-size: 20px;
        padding: 10px 50px;
    }

    .ayudadeblogger-Social-metro ul li .Menu5 {
        background: url("") no-repeat scroll 10px center #3692C3;
        background-size: 20px;
        padding: 10px 50px;
    }

    /* width of 768px */
    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .ayudadeblogger-Social-metro ul li {
            width: 50%;
        };
    }

    /* width of 480px */
    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .ayudadeblogger-Social-metro ul li {
            width: 50%;
        };
    }

    /* width of 320px */
    @media only screen and (max-width: 480px) {
        .ayudadeblogger-Social-metro ul li {
            width: 100%;
        };
    }

    </style>

    <div class='ayudadeblogger-Social-metro'>
    <ul>
    <li><a class='Menu1' href='http://www.ayudadeblogger.com/'>Noticias</a></li>
    <li><a class='Menu2' href='http://www.ayudadeblogger.com/'>Deportes</a></li>
    <li><a class='Menu3' href='http://www.ayudadeblogger.com/'>Farandula</a></li>
    <li><a class='Menu4' href='http://www.ayudadeblogger.com/'>Negocios</a></li>
    <li><a class='Menu5' href='http://www.ayudadeblogger.com/'>Chat en vivo!</a></li>
    </ul>
    </div>
<br/>
<br/>

Para realizar sus cambios pertinentes sigue el siguiente enlace de configuración del menú de colores


Quinto Paso

Para agregar el widget que dice “Síguenos en” solo tendrás que seguir las siguientes instrucciones que se encuentra en el siguiente post:

tutorial de plantillas para blogger


Ahora organiza los antiguos widgets que tenías, y ubícalos en el sidebar de la derecha y no arriba de los widgets que configuramos. Eso es todo en la configuración del diseño.

Sexto Paso

Da un clic en “Plantilla

tutorial de plantillas para blogger

Un clic en “Editar HTML

tutorial de plantillas para blogger

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

tutorial de plantillas para blogger

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

tutorial de plantillas para blogger

Configuración del Menú desplegable y de las redes sociales

tutorial de plantillas para blogger

Busca este código

<div id='wrapper'>

Una vez que hayas encontrado el código te mostrara las siguientes líneas de código

<div id='wrapper'>
<div class='grupodelecluse'><ul class='dark_menu'>
<li><a class='selected' expr:href='data:blog.homepageUrl' title='Home'>Inicio</a></li>
<li data-role='dropdown'><a href='#'>Noticias</a><ul>
<li><a href='#'>Noticias</a></li>
<li><a href='#'>Nacional</a></li>
<li><a href='#'>Internacional</a></li>
<li><a href='#'>Mundo</a></li>
<li><a href='#'>Sistema</a></li>
</ul></li><li data-role='dropdown'><a href='#'>Entretenimiento</a><ul>
<li><a href='#'>Espectacular</a></li>
<li><a href='#'>Noticias</a></li>
<li><a href='#'>Videos</a></li>
<li><a href='#'>Chistes</a></li>
<li><a href='#'>Chats</a></li>
</ul></li>
<li data-role='dropdown'><a href='#'>Farandula</a><ul>
<li><a href='#'>Internacional</a></li>
<li><a href='#'>Tendencias</a></li>
<li><a href='#'>Ropa</a></li>
<li><a href='#'>Nacional</a></li>
<li><a href='#'>Presentacion</a></li>
</ul></li>
<li data-role='dropdown'><a href='#'>Deportes</a><ul>
<li><a href='#'>Internacional</a></li>
<li><a href='#'>Tendencias</a></li>
<li><a href='#'>Ropa</a></li>
<li><a href='#'>Nacional</a></li>
<li><a href='#'>Presentacion</a></li>
</ul></li>
<li data-role='dropdown'><a href='#'>Finanzas</a><ul>
<li><a href='#'>Internacional</a></li>
<li><a href='#'>Nacional</a></li>
</ul></li>
</ul>
<a href='http://feeds.feedburner.com/SU-FEED-BURNER'><div class='RSS'/></a>
<a href='http://twitter.com/SU-TWITTER'><div class='TWITTER'/></a>
<a href='http://www.facebook.com/SU-FACEBOOK'><div class='FACEBOOK'/></a>

Realiza estos cambios:

He marcado de 3 diferentes colores en los cuales tendrán que realizar sus respectivos cambios

Existen símbolos numerales de color negro, borrarlos he inserta en cada uno de ellos las URLs correspondientes.

Los nombres que están marcados de color rojo son los títulos del menú, cambia cada uno de ellos

Además, los nombres que están marcados de color verde debes borrarlos y poner ahí el nombre de la categoría que quieras dar a conocer
Borra las URLs que están marcadas de color azul por las URLs correspondientes de tus redes sociales.

Séptimo Paso

Configuración del Slideshow

tutorial de plantillas para blogger

Busca este código

<div class='slider'>

Al encontrar el código te mostrara lo siguiente

<a href='http://www.juegosenlineajuegosgratis.com/' target='_blank'>
        <img alt='' src='http://3.bp.blogspot.com/-Te5XJ5Y09z0/UjnecAFKo8I/AAAAAAAAEwA/4D9n_-0YPSM/s1600/tecnologia1.JPG'/></a>
      </div>
    
      <div>
        <a href='http://www.juegosenlineajuegosgratis.com/' target='_blank'>
        <img alt='' src='http://2.bp.blogspot.com/-8vbOE8l7-Kc/UjnegXgBOjI/AAAAAAAAEwI/_HE2osZbUTA/s1600/tecnologia2.JPG'/></a>
      </div>
    
      <div>
        <a href='http://www.juegosenlineajuegosgratis.com/' target='_blank'>
        <img alt='' src='http://4.bp.blogspot.com/-E2PMlmgfAzc/UjnemIRfVhI/AAAAAAAAEwQ/BL7DEiQ3yhM/s1600/tecnologia3.JPG'/></a>
      </div>
    
      <div>
        <a href='http://www.juegosenlineajuegosgratis.com/' target='_blank'>
        <img alt='' src='http://2.bp.blogspot.com/-wqSU7Z9a-Do/Ujner5AqYII/AAAAAAAAEwY/GM5d_vUy6Qs/s1600/tecnologia4.JPG'/></a>
      </div>
     
       <div>
        <a href='http://www.juegosenlineajuegosgratis.com/' target='_blank'>
        <img alt='' src='http://4.bp.blogspot.com/-E2PMlmgfAzc/UjnemIRfVhI/AAAAAAAAEwQ/BL7DEiQ3yhM/s1600/tecnologia3.JPG'/></a>
      </div>

Realiza estos cambios:

He marcado de dos colores diferentes en los lugares que tendrán que realizar sus diferentes cambios

Cambia las URLs que están marcadas de color azul, por la URL que tú quieras dar a conocer en el slideshow.

También tendrás que borrar las direcciones URL que están marcadas de color rojo las cuales son las responsables de mostrar la imagen correspondiente en el Slideshow, la imagen que vayan a insertar deberá tener 600 x 325 pixeles.

Octavo Paso

Configuración del widget “TECNOLOGIA”

tutorial de plantillas para blogger

Busca este código

<div id='featurebottom1'>

Una vez que hayas encontrado el código te mostrara lo siguiente

<div id='featurebottom1'><h2 class='headingfeature'>Tecnologia</h2>
<div class='left-corner-canvas'/>
    <script src='/feeds/posts/summary/-/Tecnologia?max-results=4&amp;orderby=published&amp;alt=json-in-script&amp;callback=recentthumbs&amp;' type='text/javascript'/>
<a class='readmoretopic' href='/search/label/Tecnologia'>Ver más</a>

Realiza estos cambios:

Existen tres nombres marcados de color rojo, tienes que cambiarlos y poner ahí el nombre de la etiqueta que quieras mostrar, recuerda poner el mismo nombre en las tres palabras que están marcadas de color rojo.


Eso es todo, ahora dale un clic en “Guardar plantilla

Por fin has terminado toda la configuración de tu nueva plantilla.

Fácil verdad!

Recuerda suscribirte y así podrás recibir mis nuevas actualizaciones directamente en tu correo electrónico

Términos y condiciones de Uso

Mis términos son claros, esta plantilla la estoy regalando y no se permite su venta ni tampoco retirar los links de la página.

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé.

Saludos.

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

11 comentarios:

  1. Saludos, y muchasgracias por la plantilla mi correo
    para el envio es
    rulmatech1@gmail.com

    ResponderEliminar
  2. Hermosa Plantilla Luis Me Gustaría Poder Contar con ella me encanta esta plantilla ya que Gracia a ti tengo varios blog y e mejorado en Adsense y necesito Plantillas para mejorar mis ingresos Mi Correo es ayinson923@gmail.com te lo agredesco Bendiciones amigo desde colombia

    ResponderEliminar
  3. Hola me gusto mucho esta plantilla, sobretodo porque parece muy sencilla de modificar ^^ me gustaria que me la enviaras a ver si la pruebo~ mi correo es mariannee_j13@hotmail.com y muchas gracias por el post!

    ResponderEliminar
  4. Me parecio una plantilla muy necesaria y muy dinamica... mi correo es senderosdelmayab@gmail.com te agradeceria si me la puedes enviar... gracias

    ResponderEliminar
  5. Esta hermosa la Plantilla, Esta 100% No cabe duda de que me servira bien para Mi BLog de Noticias, Mi Correo es blogspotsanson@gmail.com

    ResponderEliminar
  6. Respuestas
    1. Hola, Si quieres obtener esta plantilla y usarla en tu blog de blogger, necesitas dejar un comentario incluyendo la dirección te tu correo electrónico, solo así te la podre enviar.
      Saludos

      Eliminar
  7. Saludos, y muchasgracias por la plantilla mi correo
    para el envio es yoelin91@gmail.com

    ResponderEliminar
  8. excelente plantilla Luis.. por favor podrías enviármela al correo dehygrafico37@gmail.com

    ResponderEliminar
  9. excelente trabajo Luis ... me facilitarias la plantilla por favor, este es mi coreo dehygrafico37@gmail.com

    ResponderEliminar
  10. buenos días Luis soy Hector de Venezuela he visto tu plantilla .. has heco un trabajo excelente como todos tus trabajos.. quisiera obtener esa plantilla mi correo es dehygrafico37@gmail.com y hectoryde@hotmail.com.. de antemano gracias..

    ResponderEliminar