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
Un slideshow
Widgets basado en etiquetas
Redes sociales habilitado
Adsense para publicidad
A continuación mire su denostación en mi
blog de demos
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
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
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
Por ejemplo mire la
imagen a continuación
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.
Por ejemplo mire la
imagen a continuación
Cuarto Paso
Configuración del
widget Breaking News y del menú de colores
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:
<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;'>
<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>
|
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:
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”
Un clic en “Editar
HTML”
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.
Configuración del Menú
desplegable y de las redes sociales
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
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”
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&orderby=published&alt=json-in-script&callback=recentthumbs&'
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
Saludos, y muchasgracias por la plantilla mi correo
ResponderEliminarpara el envio es
rulmatech1@gmail.com
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
ResponderEliminarHola 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!
ResponderEliminarMe parecio una plantilla muy necesaria y muy dinamica... mi correo es senderosdelmayab@gmail.com te agradeceria si me la puedes enviar... gracias
ResponderEliminarEsta hermosa la Plantilla, Esta 100% No cabe duda de que me servira bien para Mi BLog de Noticias, Mi Correo es blogspotsanson@gmail.com
ResponderEliminarDONDE LA DESCARGO
ResponderEliminarHola, 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.
EliminarSaludos
Saludos, y muchasgracias por la plantilla mi correo
ResponderEliminarpara el envio es yoelin91@gmail.com
excelente plantilla Luis.. por favor podrías enviármela al correo dehygrafico37@gmail.com
ResponderEliminarexcelente trabajo Luis ... me facilitarias la plantilla por favor, este es mi coreo dehygrafico37@gmail.com
ResponderEliminarbuenos 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