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:
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, Plantilla
Negocios y Plantilla Azul.
A continuación mire su demostración en
mi blog de demos
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
1 Un clic en
Plantilla
2 Da un clic en “Editar
HTML”
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▼</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 ▼</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▼</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
▼</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
▼</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
▼</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 ▼</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
▼</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”
Vamos a ir
configurando paso por paso y así no se puedan equivocar
Configuración del
Headline noticias en movimiento
Abre el widget que está
señalado en la imagen a continuación
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;'>
<a href="http://www.ayudadeblogger.com/">
<font color=#ffffff> <b>Tutoriales
Ayudadeblogger</b></font>
</a></span> <b>Todos
los tutoriales de blogger</b>
<span style='background-color:#7FB51A;'>
<a href="http://www.ayudadeblogger.com/">
<font color=#ffffff> <b>Tutoriales de
Slideshow</b></font>
</a></span> <b>Todos
los tutoriales de Slideshow</b>
<span style='background-color:#7FB51A;'>
<b><a href="http://www.ayudadeblogger.com/"><font
color=#ffffff>Tutoriales de Plantillas</font></a></b>
</span> <b>Todos
los tutoriales de Plantillas</b>
<span
style='background-color:#7FB51A;'> <a href="http://www.ayudadeblogger.com/"> <font
color=#ffffff> <b>Tutoriales de Slideshow</b></font>
</a></span> <b>Todos los tutoriales
de Slideshow</b>
<span
style='background-color:#7FB51A;'> <a href="http://www.ayudadeblogger.com/"> <font
color=#ffffff> <b>Tutoriales Ayudadeblogger</b></font>
</a></span> <b>Todos los tutoriales de blogger</b>
<span style='background-color:#7FB51A;'>
<b><a href="http://www.ayudadeblogger.com/"><font
color=#ffffff>Tutoriales de Plantillas</font></a></b>
</span> <b>Todos
los tutoriales de Plantillas</b>
<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
Busca el widget que
dice “Slideshow”, ábrelo, mira la imagen
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”
Abre el widget que
tiene como nombre “Servicios”, mira la imagen
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”
Abre el widget que
tiene como nombre “Noticias”, mira la imagen
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”
Abre el widget que
tiene como nombre “Deportes”, mira la imagen
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
Octavo Paso
Configuración del
widget “Galería de Imágenes”
Abre el widget que
tiene como nombre “Galería de Imágenes”, mira la imagen
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
Encontraras 6
widgets que tienen como nombres: “iPhone”, “Noticias”, “Deportes”, “Farándula”,
“Inversiones” y “Tecnología”. Abre cada uno de ellos
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”
Abre el widget que
tiene como nombre “Noticias Internacionales”, 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 primer Paso
Configuración del
widget “Farándula Internacional”
Abre el widget que
tiene como nombre “Farándula Internacional”, 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 segundo Paso
Configuración del
widget “Juegos”
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”
Abre el widget que
tiene como nombre “Deportes Internacionales”, 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 cuarto Paso
Configuración del
widget “Tecnología Local”
Abre el widget que
tiene como nombre “Tecnología Local”, 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 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
Décimo sexto Paso
Configuración del último
Menú
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXFQm-Z9LOKmaCJYwwQfBAbUIv1-1Ugbc39Agn_oAswxCbEgmnO73ADoRn9qQIBcHm2EUBhGV25WPSxM4i5NsKGN8IzCLbhlbkHHN0ZVsVFPWyTsVUolgXlv425lnQRQYzAkY14x8fYk8/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 > a,.menu-secondary li.current-cat
> a,.menu-secondary li.current_page_item > a,.menu-secondary
li.current-menu-item > 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 > a,.menu-secondary li
li.current-cat > a,.menu-secondary li li.current_page_item >
a,.menu-secondary li li.current-menu-item > 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
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.
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
43 comentarios: