Tutorial de plantillas para blogger línea Taggui


En este nuevo y fabuloso tutorial de plantillas para blogger van aprender como instalar su nueva plantilla para blogger. Voy hacer lo mas explicativo posible para que no tengan inconvenientes al momento de instalar y configurar esta nueva plantilla para blogger. A este plantilla la he llamado Línea Taggui. Su configuración he instalación son sumamente fácil de realizarlo, solo debes seguir es te tutorial tal y cual lo explico. Anteriormente publique algunas plantillas para blogger gratis, de los cuales les dejo los enlaces en este post, 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 y Plantilla Tiempos Modernos, puedes ver cualquier plantilla que te guste.

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

Las características de la plantilla son muy importantes para los bloggeros, a continuación la plantilla Taggui tiene las siguientes características:

Estructura SEO amistoso para buscadores
Slideshow incorporado y funciona con cualquier etiqueta
Slide Carrusel basado en etiquetas
Incorporación de redes sociales
Imágenes y texto de artículos relaciones en cada artículo, de forma automática
Widgets con imágenes y textos
Menú desplegable
Buscador integrado
Estructura dinámica
Fácil desplazamiento para los usuarios
Lista paras para publicidad de Adsense u otra compañía
Ultimas noticias automático

Tutorial de plantillas para blogger top hosting hostgator

A continuación mire la plantilla Taggui en mi blog de demos

crear páginas web

crear páginas web

Ahora si vamos a trabajar y a crear una pagina web gratis

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:

Da un clic en “Plantilla

También da un clic en “Editar HTML” y se te abrirá el editor de tu blog,

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


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.



Vamos a ir configurando desde la cabecera principal hasta el final de la plantilla.

Configuración de las redes sociales

Tutorial de plantillas para blogger

Busca este código

<a class='twitter-follow-button' href='http://www.twitter.com/ayudadeblogger'/>

Realiza este cambio

Borra el texto que esta marcado de color rojo ayudadeblogger y remplázalo por el nombre de tu Twitter

Configuración de la Fanpage de Facebook

Tutorial de plantillas para blogger

Busca este código

<fb:like-box border_color='' header='false' href='http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017'

Realiza este cambio

Cambia todo el link que esta marcado de color rojo por el link de tu Fanpage de Facebook

Configuracion de las recomendaciones de Google

Tutorial de plantillas para blogger

Busca este código

<div class='g-plusone' data-href='http://www.ayudadeblogger.com/' data-size='medium'/>

Realiza este cambio

Cambia el link que esta marcado de color rojo por el link de tu página web

Configuración de tus seguidores de Twitter

Tutorial de plantillas para blogger

Busca este código

<div class='twitter-follow'><a class='twitter-follow-button' href='http://www.twitter.com/ayudadeblogger'/>
        <script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

Realiza este cambio

Cambia el texto que esta marcado de color rojo por el nombre de tu Twitter

Segundo Paso

Configuracion del Menu desplegable

Tutorial de plantillas para blogger

Busca todo este código

<div class='menu-header-container'><ul class='menu' id='menu-header'><li class='menu-item'><a href='/'>Inicio</a></li>
<li class='menu-item'><a href='/search/label/Feature?&amp;max-results=8'>Temas</a></li>
<li class='menu-item'><a href='/search/label/Feature?&amp;max-results=8'>Menu Desplegable</a>
<ul class='sub-menu'>                                                                   
            <li class='menu-item'><a href='/search/label/Feature?&amp;max-results=8'>Categoria 3.1</a></li>
            <li class='menu-item'><a href='/search/label/Feature?&amp;max-results=8'>Categoria 3.2</a></li>
            <li class='menu-item'><a href='/search/label/Feature?&amp;max-results=8'>Categoria 3.3</a></li>
            <li class='menu-item'><a href='/search/label/Feature?&amp;max-results=8'>Categoria 3.4</a>
            <ul class='sub-menu'>
                        <li class='menu-item'><a href='/search/label/Feature?&amp;max-results=8'>Frandula</a>
                        <ul class='sub-menu'>
                                   <li class='menu-item'><a href='/search/label/Feature?&amp;max-results=8'>Noticias</a></li>
                        </ul>
</li>
                        <li class='menu-item'><a href='/search/label/Feature?&amp;max-results=8'>Categoria 3.6</a>
                        <ul class='sub-menu'>
                                   <li class='menu-item'><a href='/search/label/Feature?&amp;max-results=8'>Categoria 3.8</a></li>
                        </ul>
</li>
            </ul>
</li>
</ul>
</li>
<li class='menu-item'><a href='/search/label/Feature?&amp;max-results=8'>Hosting</a></li>
<li class='menu-item'><a href='/search/label/Feature?&amp;max-results=8'>Inversiones</a></li>
<li class='menu-item'><a href='/search/label/Feature?&amp;max-results=8'>Pasajes Baratos</a>
<ul class='sub-menu'>
            <li class='menu-item'><a href='/search/label/Feature?&amp;max-results=8'>Negocios</a></li>
            <li class='menu-item'><a href='/search/label/Feature?&amp;max-results=8'>Inversiones</a></li>
           
</ul>
</li>
<li class='menu-item'><a href='/search/label/Feature?&amp;max-results=8'>Top Hosting</a>
<ul class='sub-menu'>
            <li class='menu-item '><a href='/search/label/Feature?&amp;max-results=8'>Top Hosting</a></li>
            <li class='menu-item'><a href='/search/label/Feature?&amp;max-results=8'>Viajes</a></li>
           

Realiza estos cambios

Las letras que están marcadas de color azul Feature  debes cambiarlas por el nombre de la etiqueta que quieras mostrar en tu menú, al igual deberás cambiar los nombres que están marcados de color rojo por el nombre que tu quieras poner en tu menú desplegable.
Tercer Paso

Configuración del Widget 1

Tutorial de plantillas para blogger

Busca este código

label1 = "Deportes";
Title1 = "Widget 1";

Realiza estos cambios

Cambia los dos textos que están marcados de color amarillo por el nombre de la etiqueta que quieras mostrar.

Cuarto Paso

Configuración del Widget 2

Tutorial de plantillas para blogger

Busca este código

label2 = "Farandula";
Title2 = "Widget 2";

Realiza estos cambios

Cambia los dos textos que están marcados de color amarillo por el nombre de la etiqueta que quieras mostrar.

Quinto Paso

Configuración del Slideshow y Slide Carrusel

Tutorial de plantillas para blogger
hostgator

Busca este código

label3 = "Temas";
Title3 = "Slideshow";

Realiza este cambio

Cambia el texto que esta marcado de color amarillo por el nombre de la etiqueta que quieras mostrar, en tu slideshow, recuerda que el nombre de la etiqueta que pongas se mostrara en el slideshow y en el slide carrusel, este sirve para los dos.

Sexto Paso

Configuración del Widget 3

Tutorial de plantillas para blogger

Busca este código

label4 = "Tecnologia";
Title4 = "Widget 3";

Realiza estos cambios

Cambia los dos textos que están marcados de color amarillo por el nombre de la etiqueta que quieras mostrar.

Séptimo Paso

Configuración del Widget 4

Tutorial de plantillas para blogger

Busca este código

label5 = "Temas";
Title5 = "Widget 4";

Realiza estos cambios

Cambia los dos textos que están marcados de color amarillo por el nombre de la etiqueta que quieras mostrar.

Octavo Paso

Configuración del Widget 5

Tutorial de plantillas para blogger

Busca este código

label6 = "Farandula";
Title6 = "Widget 5";

Realiza estos cambios

Cambia los dos textos que están marcados de color amarillo por el nombre de la etiqueta que quieras mostrar.

Noveno Paso

Configuración del Widget 6

Tutorial de plantillas para blogger

Busca este código

label7 = "Deportes";
Title7 = "Widget 6";

Realiza estos cambios

Cambia los dos textos que están marcados de color amarillo por el nombre de la etiqueta que quieras mostrar.

Decimo Paso

Configuración del Widget 7

Tutorial de plantillas para blogger

Busca este código

label8 = "Tecnologia";
Title8 = "Widget 7";

Realiza estos cambios

Cambia los dos textos que están marcados de color amarillo por el nombre de la etiqueta que quieras mostrar.

Onceavo Paso

Configuración del Widget 8

Tutorial de plantillas para blogger

Busca este código

label9 = "Temas";
Title9 = "Widget 8";

Realiza estos cambios

Cambia los dos textos que están marcados de color amarillo por el nombre de la etiqueta que quieras mostrar.

Doceavo Paso

Listo has configurado toda tu plantilla, ahora dale un clic en “Guardar plantilla” y mira tus nuevos cambios.

Ahora dale un clic en “Diseño” y organiza los widgets como tú quieras que aparezca en tu blog.

A continuación te dejo una imagen de cómo debería de estar organizado tus widgets en el diseño de tu blog.


Términos y condiciones de Uso

Mis términos son claros, esta plantilla es gratis y no se permite su venta ni tampoco quitar los links del autor.

¿Necesitas ayuda?

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

Saludos.



Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: