Tutorial Plantilla para blogger Línea Dark


Es momento de presentar una nueva plantilla para blogger, en este tutorial de plantillas para blogger aprenderán a insertar una nueva plantilla para blogger completamente gratis e instalarla en su blog de blogger y así darle un aspecto único de diseño web profesional. Las plantillas para blogger deben estar diseñadas para obtener el mejor desempeño al momento de que un usuario ingrese a su blog y pueda desplazarse por toda la plantilla. Esta nueva plantilla para blogger funciona perfectamente en todos los navegadores web como Firefox, Google Chrome, Internet Explorer etc.

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

Diseño SEO
Carga ligera
Un menú desplegable
Habilitado para publicidad
Widgets basado en etiquetas
Headline de noticias en movimiento
Un slideshow basado en etiquetas
Una galería de imágenes basado en etiquetas
Redes sociales incorporado
Respuesta de mensajes

Además, si necesitan conocer más plantillas para blogger, les dejo algunas de ellas:


Tutorial Plantilla para blogger

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

crear páginas web

crear páginas web

Les gusto verdad!

Vamos a implementar esta nueva plantilla para blogger

Tutorial de plantilla para 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

Configuración del menú desplegable

Tutorial Plantilla para blogger

1 Un clic en Plantilla

Tutorial Plantilla para blogger

2 Da un clic en “Editar HTML

Tutorial Plantilla para blogger

3 Busca este código

Inicio</a>

Una vez que hayas encontrado el código, te mostrara un código como el siguiente

<li><a href='/'>Inicio</a></li>
                                                <li><a href='#'>Noticias&#9660;</a>
                                                    <ul class='children'>
<li><a href='#'>Categoría 1</a></li>
<li><a href='#'>Categoría 2</a></li>
<li><a href='#'>Categoría 3</a></li>
<li><a href='#'>Categoría 4</a></li>
<li><a href='#'>Categoría 5</a></li>
<li><a href='#'>Categoría 6</a></li>
<li><a href='#'>Categoría 7</a></li>

                                                            </ul>
                                                </li> 
                                  <li><a href='#'>Deportes</a></li>
                                                <li><a href='#'>Tecnología &#9660;</a>
                                                 <ul class='children'>
<li><a href='#'>Categoría 1</a></li>
<li><a href='#'>Categoría 2</a></li>
                                                            </ul>
                                                </li>
                                  <li><a href='#'>Farandula&#9660;</a>
                                                 <ul class='children'>
<li><a href='#'>Categoría 1</a></li>
<li><a href='#'>Categoría 2</a></li>
                                                            </ul>
                                                </li>
                                                <li><a href='#'>Videos &#9660;</a>
                                                 <ul class='children'>
<li><a href='#'>Categoría 1</a></li>
<li><a href='#'>Categoría 2</a></li>
<li><a href='#'>Categoría 3</a></li>
<li><a href='#'>Categoría 4</a></li>
                                                            </ul>
                                                </li>
                                 
                                                <li><a href='#'>Economía &#9660;</a>
                                                 <ul class='children'>
<li><a href='#'>Categoría 1</a></li>
<li><a href='#'> Categoría 2</a></li>
<li><a href='#'>Categoría 3</a></li>
<li><a href='#'>Categoría 4</a></li>
                                                            </ul>
                                                </li>
                                    <li><a href='#'>Espectáculos</a></li>
                                                <li><a href='#'>Chismes &#9660;</a>
                                                 <ul class='children'>
                                                            <li><a href='#'>Categoría 1</a></li>
                                                                        <li><a href='#'>Categoría 2</a></li>
                                                                        <li><a href='#'>Categoría 3</a></li>
                                                            </ul>
                                                </li>              
                                     <li><a href='#'>Finanzas &#9660;</a>
                                                 <ul class='children'>
                                                            <li><a href='#'>Categoría 1</a></li>
                                                                        <li><a href='#'>Categoría 2</a></li>
                                                            </ul>
                                                </li>              
                                    <li><a href='#'>Contactos &#9660;</a>
<ul class='children'>
<li><a href='#'>Contactos</a></li> 

Realiza estos cambios:

He marcado de tres diferentes colores en los cuales ustedes deberán de realizar sus diferentes cambios

Las palabras que están marcadas de color rojo son los títulos principales del menú, cámbialas a todas por los nombres que tú quieras

Al igual, las palabras que están marcadas de color verde, tendrás que borrarlas y poner ahí un nombre en particular

Inserta la URL del post que quieras mostrar en el menú desplegable, borrando los símbolos de numeral #.

Eso es todo en la configuración del menú desplegable en el Editor HTML de su plantilla, es momento de dar un clic en “Guardar plantilla

Segundo Paso

En este punto vamos a configurar nuestros widgets basados en etiquetas en el Diseño de nuestro blog

1 Da un clic en “Diseño

Tutorial Plantilla para blogger

Vamos a ir configurando paso por paso y así no se puedan equivocar

Configuración del Headline noticias en movimiento

Tutorial Plantilla para blogger

Abre el widget que está señalado en la imagen a continuación

Tutorial Plantilla para blogger

Inserta las siguientes líneas de código en su interior

<div id="TICKER" style="display:none; border-top:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; overflow:hidden; background-color:#FFFFFF; width:765px" 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>


Realiza estos cambios

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

- Cambia las URLs que están marcadas de color azul por las URLs correspondientes de tus post

- Las palabras que están marcadas de color rojo son los títulos de los post, bórralos y pon ahí los títulos que tú quieras

- Las palabras que están marcadas de color verde son las responsables de la pequeña descripción de tu post, bórralos y pon ahí una pequeña descripción

- Si quieren cambiar el color basta con cambiar este código 7FB51A por el que tú quieras

Tercer paso

Configuración del Slideshow

Tutorial Plantilla para blogger

Busca el widget que dice “Slideshow”, ábrelo, mira la imagen

Tutorial Plantilla para blogger

Una vez que hayas abierto el widget inserta el nombre de una de tus etiquetas que quieras dar a conocer en el Slideshow


Cuarto Paso

Configuración del widget “Servicios”

Tutorial Plantilla para blogger

Abre el widget que tiene como nombre “Servicios”, mira la imagen

Tutorial Plantilla para blogger

Una vez que hayas abierto el widget inserta el nombre de una de tus etiquetas que quieras dar a conocer


Quinto Paso

Configuración del widget “Noticias”

Tutorial Plantilla para blogger

Abre el widget que tiene como nombre “Noticias”, mira la imagen

Tutorial Plantilla para blogger

Una vez que hayas abierto el widget inserta el nombre de una de tus etiquetas que quieras dar a conocer


Sexto Paso

Configuración del widget “Deportes”

Tutorial Plantilla para blogger

Abre el widget que tiene como nombre “Deportes”, mira la imagen

Tutorial Plantilla para blogger

Una vez que hayas abierto el widget inserta el nombre de una de tus etiquetas que quieras dar a conocer


Séptimo Paso

Encontraras Tres widgets que tienen como nombres “Searchbox” “Publicaciones” y “Categorías” no los borres déjalos tal como están sin realizar ningún cambio

Tutorial Plantilla para blogger
Tutorial Plantilla para blogger

Octavo Paso

Configuración del widget “Galería de Imágenes”

Tutorial Plantilla para blogger

Abre el widget que tiene como nombre “Galería de Imágenes”, mira la imagen

Tutorial Plantilla para blogger

Una vez que hayas abierto el widget inserta el nombre de una de tus etiquetas que quieras dar a conocer


Noveno Paso

Configuración de los 6 Tabber

Tutorial Plantilla para blogger

Encontraras 6 widgets que tienen como nombres: “iPhone”, “Noticias”, “Deportes”, “Farándula”, “Inversiones” y “Tecnología”. Abre cada uno de ellos

Tutorial Plantilla para blogger

Una vez que hayas abierto cada widget inserta el nombre de una de tus etiquetas que quieras dar a conocer en cada uno de ellos.


Décimo Paso

Configuración del widget “Noticias Internacionales”

Tutorial Plantilla para blogger

Abre el widget que tiene como nombre “Noticias Internacionales”, mira la imagen

Tutorial Plantilla para blogger

Una vez que hayas abierto el widget inserta el nombre de una de tus etiquetas que quieras dar a conocer


Décimo primer Paso

Configuración del widget “Farándula Internacional”

Tutorial Plantilla para blogger

Abre el widget que tiene como nombre “Farándula Internacional”, mira la imagen

Tutorial Plantilla para blogger

Una vez que hayas abierto el widget inserta el nombre de una de tus etiquetas que quieras dar a conocer


Décimo segundo Paso

Configuración del widget “Juegos”

Tutorial Plantilla para blogger

Abre el widget que tiene como nombre “Juegos”, mira la imagen


Una vez que hayas abierto el widget inserta el nombre de una de tus etiquetas que quieras dar a conocer


Décimo tercer Paso

Configuración del widget “Deportes Internacionales”

Tutorial Plantilla para blogger

Abre el widget que tiene como nombre “Deportes Internacionales”, mira la imagen

Tutorial Plantilla para blogger

Una vez que hayas abierto el widget inserta el nombre de una de tus etiquetas que quieras dar a conocer


Décimo cuarto Paso

Configuración del widget “Tecnología Local”

Tutorial Plantilla para blogger

Abre el widget que tiene como nombre “Tecnología Local”, mira la imagen

Tutorial Plantilla para blogger

Una vez que hayas abierto el widget inserta el nombre de una de tus etiquetas que quieras dar a conocer


Décimo quinto Paso

Existen tres widgets que tienen como nombres “nuevos post no editar”, “categorías”, “comentarios no editar”, no los borren ni tampoco los abran para editarlos, déjenlos tal como están ubicados

Tutorial Plantilla para blogger

Décimo sexto Paso

Configuración del último Menú

Tutorial Plantilla para blogger

Casi al final de la estructura del diseño encontraremos un widget “HTML/Javascript”, ábrelo e inserta las siguientes líneas de código en su interior

<style>
/* -------- start menu By Ayudadeblogger -------- */
.menus,.menus *{margin:0;padding:0;list-style:none;list-style-type:none;line-height:1.0}
.menus ul{position:absolute;top:-999em;width:100%}
.menus ul li{width:100%}
.menus li:hover{visibility:inherit}
.menus li{float:left;position:relative}
.menus a{display:block;position:relative}
.menus li:hover ul,.menus li.sfHover ul{left:0;top:100%;z-index:99}
.menus li:hover li ul,.menus li.sfHover li ul{top:-999em}
.menus li li:hover ul,.menus li li.sfHover ul{left:100%;top:0}
.menus li li:hover li ul,.menus li li.sfHover li ul{top:-999em}
.menus li li li:hover ul,.menus li li li.sfHover ul{left:100%;top:0}
.sf-shadow ul{padding:0 8px 9px 0;-moz-border-radius-bottomleft:17px;-moz-border-radius-topright:17px;-webkit-border-top-right-radius:17px;-webkit-border-bottom-left-radius:17px}
.menus .sf-shadow ul.sf-shadow-off{background:transparent}
.menu-secondary-container {
background: none repeat scroll 0 0 #E30000;
border-color: #FFFFFF;
height: 34px;
position: relative;
z-index: 300;
}
.menu-secondary{}
.menu-secondary ul{min-width:160px}
.menu-secondary li{background:url(http://1.bp.blogspot.com/-Lf_sMjivwMM/Tu3vbg_ZM3I/AAAAAAAABgQ/p9-1zP1Qfw0/s1600/menu-secondary-separator.png) left top no-repeat}
.menu-secondary li:first-child{background:none}
.menu-secondary li a {
color: #FFFFFF;
font: bold 12px Arial,Helvetica,Sans-serif;
margin: 0 0 0 2px;
padding: 11px 15px 8px;
text-decoration: none;
text-transform: uppercase;
}
.menu-secondary li a:hover,.menu-secondary li a:active,.menu-secondary li a:focus,.menu-secondary li:hover &gt; a,.menu-secondary li.current-cat &gt; a,.menu-secondary li.current_page_item &gt; a,.menu-secondary li.current-menu-item &gt; a{    background: none repeat scroll 0 0 #F40404;
color: #000000;
outline: 0 none;
}
.menu-secondary li li{background:none;margin:0}
.menu-secondary li li a{color:#df0000;text-shadow:0 1px 0 #fff;background:#FFF;padding:10px 15px;text-transform:none;margin:0;font-weight:normal}
.menu-secondary li li a:hover,.menu-secondary li li a:active,.menu-secondary li li a:focus,.menu-secondary li li:hover &gt; a,.menu-secondary li li.current-cat &gt; a,.menu-secondary li li.current_page_item &gt; a,.menu-secondary li li.current-menu-item &gt; a{color:#fff;text-shadow:0 1px 0 #000;background:#df0000;outline:0}
.menu-secondary a.sf-with-ul{padding-right:26px;min-width:1px}
.menu-secondary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:9px 13px 0 0}
.menu-secondary li li .sf-sub-indicator{padding:9px 13px 0 0}
#footer-bg {
text-align:center;
Background-color: #333333;
color : #ffffff;
}
</style>
<div class='span-24'>
<div class='menu-secondary-container'>
<ul class='menus menu-secondary'>
<li><a href='/'>Inicio</a></li>
<li><a href='#'>Tendencias</a></li>
<li><a href='#'>Farandula</a></li>
<li><a href='#'>Noticias</a></li>
<li><a href='#'>Películas</a></li>
<li><a href='#'>Deportes</a></li>
<li><a href='#'>Contactos</a></li>
</ul>
</div>
</div>

Realiza estos cambios:

Inserta la URL del post que quieras mostrar en vez del símbolo numeral #

Cambia los nombres que están marcados de color rojo por los nombres de las categorías que quieras mostrar.

Eso es todo, dale un clic en “Guardar

Hemos terminado de configurar la plantilla Dark en nuestro blog de blogger.

Ubica los widgets que tenías antes de instalar esta plantilla abajo del widget que dice “comentarios no editar

Recuerda que los widgets que vayas ingresando en el sidebar tendrás que irlos ocultando de la entrada principal, si no sabes cómo ocultar un widget de la entrada principal de tu blog, sigue las siguientes instrucciones en el siguiente link


Eso es todo

A continuación mire la estructura de "Diseño" de cómo debe estar ubicado los widgets en su blog

Tutorial Plantilla para blogger
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 no se permite su venta

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