Plantillas Blogger – Línea Style Magazine
¿Es fácil crear una página web? La respuesta
es si! Con la ayuda de Blogger.com podremos crear gratuitamente nuestra propia página
web y vender nuestros productos por el internet. No necesitas de conocimiento
alguno de HTML ya que todo el código esta creado y listo para darle un
excelente tema a nuestra página web. Vamos a descargar una Plantilla de Blogger
y luego cargarlo en nuestro blog y así tener un nuevo aspecto de diseño web
profesional. Esta nueva Plantilla Blogger funciona perfectamente en todos los
navegadores web.
Características principales
Dos Slideshows
Tres widgets basado en etiquetas
Archivo del blog modificado
Dos widgets de nuevas publicaciones automáticas
Respuesta de comentarios en las
publicaciones
Artículos relacionados en las entradas
Widget flotante de redes sociales
Un buscador integrado
Anuncios de Adsense habilitado o de otro
tipo de publicidad
Widget galería de imágenes
A continuación mire el demo de la
Plantilla Style Magazine
Puedes descargarte la plantilla del
siguiente icono
Ahora vamos a realizar sus diferentes
cambios
1 Descarga la plantilla
2 Guárdalo en tu ordenador
3 Sigue las siguientes instrucciones de
como instalar una plantilla en su blog de Blogger
4 Al cargar la plantilla en tu blog, estará
todo desordenado, no te preocupes que es parte del proceso, vamos a ir
realizando paso por paso para que te quede igualito a mi blog de demos. Una vez
que hayas subido la plantilla a tu blog, nos dirigimos a trabajar
5 Un clic en “Diseño” notaras que esta
todo desordenado, no borres ningún widget, ya que tienes que buscar cada uno de
ellos para realizar sus diferentes cambios
Primer Paso
Vamos a configurar nuestros primeros 4
widgets, mira la imagen
Configuración del primer widget
Abre el widget “HTML/Javascript” he
ingresa el siguiente código en su interior
<script
type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var
displaymore = false;var displayseparator = false;var showcommentnum =
false;var showpostdate = false;var showpostsummary = true;var numchars =
60;</script>
<script type="text/javascript"
src="/feeds/posts/default/-/Chismes?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for
(var i = 1; i < json.feed.entry.length; i++)
{
for (var j = 1; j <
json.feed.entry[i].link.length; j++) {
if
(json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href +
"'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl
+ '" target="_blank">' + entryTitle + "</a>
</li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://stylemagazine2.blogspot.com/feeds/posts/summary/-/Chismes?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://stylemagazine2.blogspot.com/search/label/Chismes"
style="float:right;font:normal 11px Arial;padding:5px 0;">Buscar
más</a>
|
Realiza estos cambios:
Los tres nombres que están marcados de
color rojo, tienes que borrarlos y poner el nombre de la etiqueta que quieras
dar a conocer en este widget.
Borra las dos URLs que están marcadas de
color azul y remplázalos por la URL de tu blog
Luego un clic en “Guardar”
Configuración del Slideshow pequeño
Abre el widget “HTML/Javascript” he
ingresa el siguiente código en su interior
<style scoped="" type="text/css">
ul.abt-sidebar-slider
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.abt-sidebar-slider{font:normal normal 11px
Verdana,Geneva,sans-serif}
ul.abt-sidebar-slider,ul.abt-sidebar-slider
li{margin:0;padding:0;list-style:none;position:relative}
ul.abt-sidebar-slider{width:100%;height:250px}
ul.abt-sidebar-slider
li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.abt-sidebar-slider li:nth-child(1){display:block}
ul.abt-sidebar-slider img{border:0;width:100%;height:100%}
ul.abt-sidebar-slider li:nth-child(1){width:100%;height:100%;margin:0
0 2px;left:0;top:0}
ul.abt-sidebar-slider
.overlayx,ul.abt-sidebar-slider li{-webkit-transition:all .4s
ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s
ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s
ease-in-out}
ul.abt-sidebar-slider
.overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0zuM6rSxG-QTG3u7mOpNx4uBpt3JK5tbfS0lK6u_jrp7QKKw7j8QcPOSvWmxBwVtwDbBhHvz7frrxHV0b4NUTDgMhwS4_nrkQb2mSgTvxYyxNqxX6AhRGfLjWsx4_c2zUI1UlhRKbRRA/s1600/linebg-fade.png);background-position:50%
50%;background-repeat:repeat-x}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{border:4px
solid #3834BA;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
ul.abt-sidebar-slider li:nth-child(1)
.overlayx{background-position:50% 25%}
ul.abt-sidebar-slider
.overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft.
Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
ul.abt-sidebar-slider
h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0
10px;line-height:1.5em;font-family:Georgia,Times,"Times New
Roman";font-weight:normal}
ul.abt-sidebar-slider li:nth-child(1) h4,ul.abt-sidebar-slider
li:nth-child(4) h4{font-size:150%}
ul.abt-sidebar-slider
.label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}
ul.abt-sidebar-slider li:nth-child(2) .autname,ul.abt-sidebar-slider
li:nth-child(3) .autname{display:none}
.buttons{margin:5px 0 0}
.buttons
a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
.buttons
a::before{content:"";width:0;height:0;border-width:8px
7px;border-style:solid;border-color:transparent #535353 transparent
transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
.buttons a.nextx::before{border-color:transparent transparent
transparent #535353;margin-left:-3px}
</style>
<div id="featuredpostside"></div>
<script src=""
type="text/javascript"></script>
<script
src="http://yourjavascript.com/4005356011/abt-sidebar-slider.js"
type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://stylemagazine2.blogspot.com/",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>
|
Realiza este cambio:
Borra la dirección URL que está marcada
de color azul http://stylemagazine2.blogspot.com/
y remplazo por la dirección URL de tu blog
Luego un clic en “Guardar”
Configuración del segundo widget basado
en etiquetas
Abre el widget “HTML/Javascript” he
ingresa el siguiente código en su interior
<script
type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var
displaymore = false;var displayseparator = false;var showcommentnum =
false;var showpostdate = false;var showpostsummary = true;var numchars =
60;</script>
<script type="text/javascript"
src="/feeds/posts/default/-/Autos?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for
(var i = 1; i < json.feed.entry.length; i++)
{
for (var j = 1; j <
json.feed.entry[i].link.length; j++) {
if
(json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href +
"'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl
+ '" target="_blank">' + entryTitle + "</a>
</li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://stylemagazine2.blogspot.com/feeds/posts/summary/-/Autos?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://stylemagazine2.blogspot.com/search/label/Autos"
style="float:right;font:normal 11px Arial;padding:5px 0;">Buscar
más</a>
|
Realiza estos cambios:
Los tres nombres que están marcados de
color rojo, tienes que borrarlos y poner el nombre de la etiqueta que quieras
dar a conocer en este widget.
Borra las dos URLs que están marcadas de
color azul y remplázalos por la URL de tu blog
Luego un clic en “Guardar”
Configuración del widget Galería de imágenes
Abre el widget “HTML/Javascript” y sigue
las siguientes instrucciones que se especifica en el siguiente tutorial
Configuración del tercer widget basado
en etiquetas
Nos dirigimos a la última posición del
widget, abrimos “HTML/Javascript” he insertamos el siguiente código en su
interior
<script
type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var
displaymore = false;var displayseparator = false;var showcommentnum =
false;var showpostdate = false;var showpostsummary = true;var numchars =
60;</script>
<script type="text/javascript"
src="/feeds/posts/default/-/Autos?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for
(var i = 1; i < json.feed.entry.length; i++)
{
for (var j = 1; j <
json.feed.entry[i].link.length; j++) {
if
(json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href +
"'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl
+ '" target="_blank">' + entryTitle + "</a>
</li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://stylemagazine2.blogspot.com/feeds/posts/summary/-/Autos?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://stylemagazine2.blogspot.com/search/label/Autos"
style="float:right;font:normal 11px Arial;padding:5px 0;">Buscar
más</a>
|
Realiza estos cambios:
Los tres nombres que están marcados de
color rojo, tienes que borrarlos y poner el nombre de la etiqueta que quieras
dar a conocer en este widget.
Borra las dos URLs que están marcadas de
color azul y remplázalos por la URL de tu blog
Luego un clic en “Guardar”
Configuración del widget Comentarios
Para realizar este truco tienes que
buscar el widget que tiene como nombre “Comentarios” ábrelo y sigue las
instrucciones del siguiente tutorial
Segundo Paso
Configuración del Menú desplegable
Para configurar el menú desplegable, necesitamos
ingresar a la Plantilla desde el “Editor HTML” y desde allí realizaremos los
diferentes cambios
1 Ir a Blogger
2 Un clic en “Plantilla”
3 Un clic en “Editar HTML”
Ahora se le abrirá el Editor HTML de su plantilla
En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, 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 le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.
Busca este código
>Inicio</a>
|
Una vez que hayas encontrado el código
te mostrara un código como el siguiente
<li class='home'><a
expr:href='data:blog.homepageUrl'>Inicio</a></li>
<li>
<a
href='#'>Farandula</a>
<ul>
<li><a
href='#'>Sub
Menu 1</a></li>
<li><a
href='#'>Sun
Menu 2</a></li>
<li><a
href='#'>Sub
Menu 3</a></li>
<li><a
href='#'>Sub
Menu 4</a></li>
</ul>
</li>
<li>
<a
href='#'>Espectáculos</a>
<ul>
<li><a
href='#'>Sub
Menu 1</a></li>
<li><a
href='#'>Sub
Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
<li><a
href='#'>Sub
Menu 4</a></li>
</ul>
</li>
<li>
<a
href='#'>Noticias </a>
<ul>
<li><a
href='#'>Sub
Menu 1</a></li>
<li><a
href='#'>Sun
Menu 2</a></li>
<li><a
href='#'>Sub
Menu 3</a></li>
<li><a
href='#'>Sub
Menu 4</a></li>
</ul>
</li>
<li>
<a
href='#'>Chismes
</a>
<ul>
<li><a
href='#'>Sub Menu
1</a></li>
<li><a
href='#'>Sun
Menu 2</a></li>
<li><a
href='#'>Sub
Menu 3</a></li>
<li><a
href='#'>Sub
Menu 4</a></li>
</ul>
</li>
<li>
<a href='#'>Videos </a>
<ul>
<li><a
href='#'>Sub
Menu 1</a></li>
<li><a
href='#'>Sun
Menu 2</a></li>
<li><a
href='#'>Sub
Menu 3</a></li>
<li><a
href='#'>Sub
Menu 4</a></li>
</ul>
</li>
<li>
<a
href='#'>Contactos</a>
<ul>
<li><a
href='http://ayudadeblogger.com/'>Ayudadeblogger</a></li>
<li><a href='#'>Facebook</a></li>
<li><a
href='#'>Twitter</a></li>
<li><a
href='#'>Google+</a></li>
|
Realiza estos cambios:
He marcado de tres diferentes colores en
los lugares que tendrás que realizar sus diferentes cambios:
Cambia los numerales # por las direcciones URLs de los artículos que
quieras dar a conocer
Cambia los títulos que están marcados de
color rojo por el nombre que tú quieras
Cambia los nombres que están marcados de
color verde por el nombre que tú quieras
En la misma posición vamos a configurar
el Slideshow principal de nuestro blog
Busca este código
featured_slider = 'Farandula';
|
Una vez que hayas encontrado el código,
solo tenemos que borrar la palabra que dice “Farandula” por el nombre de la
etiqueta que quieras dar a conocer en el Slideshow
Configuración del Slideshow Carrusel
Tendencias
En la mis ubicación buscaremos este código
trending_slider = 'Autos';
|
Cambiamos el nombre que dice “Autos” por
el nombre de una de las etiquetas que queramos dar a conocer
Configuración de las suscripciones en
las entradas
Busca este código
<div class='subscribe'>
|
Una vez que hayas encontrado el código
te mostrara un código igual al siguiente
<div class='subscribe'>
<p class='intro'>Si les gustos
este artículo <a href='http://feeds.feedburner.com/foroayudadeblogger' target='_blank' title='feedburner'>
<b>haga un clic
aquí</b></a>, o suscríbase para que reciba nuestras nuevas publicaciones.</p>
<p class='feed'><a href=http://stylemagazine2.blogspot.com/feeds/posts/default'>Suscríbete
via RSS Feed</a></p>
<form action='http://feedburner.google.com/fb/a/mailverify'
method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=foroayudadeblogger',
'popupwindow',
'scrollbars=yes,width=550,height=520');return true'
target='popupwindow'>
<input name='uri' type='hidden' value='foroayudadeblogger'/>
<input name='loc' type='hidden' value='es_ES'/>
<input id='botsub' name='email' onblur='if (this.value ==
"") {this.value = "Ingrese su email";}'
onfocus='if (this.value == "Ingrese su email") {this.value
= "";}' type='text' value='Ingrese su email....'/>
<input id='botsubbutton' type='submit'
value='Ingresar'/><br/>
<small>Su información no sera
revelada.</small><br/>
<a href='http://feeds.feedburner.com/foroayudadeblogger'><img
alt='' height='26' src='http://feeds.feedburner.com/~fc/foroayudadeblogger?bg=ceaa6c&fg=444444&anim=1'
style='border:0' width='88'/></a>
|
Realiza estos cambios:
Cambia los 5 nombres que están marcados
de color rojo por el nombre de tu FeedBurner de suscripciones
Además borrar la URL que está marcada de
color azul y remplázalo por la dirección URL de su blog
Eso es todo, es momento de dar un clic
en “Guardar plantilla” y listo hemos terminado de configurar la nueva plantilla
Les voy a dejar una imagen de cómo debe
estar ubicado nuestros widgets en el Diseño de nuestro blog
Fácil verdad!
Además, puedes visitar más plantillas
para Blogger en el siguiente enlace
Recuerda suscribirte y recibirás mis
nuevas actualizaciones directamente en tu correo electrónico
¿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
hola buenos dias muy buena plantilla pero tengo un problema con el Slideshow no me funciona me puedes ayudar gracias
ResponderEliminarbuenos dias muy buenos tus tutoriares y estoy utilizando esta plantilla pero no sale el Slideshow espero ayuda
ResponderEliminarHola Luis, muchas gracias por el tutorial. Tengo algunas dudas con respecto a la barra de menú
ResponderEliminar1 ¿Cómo cambio el color rojo por otro al pasar sobre el item?
2 ¿Cómo cambio el tamaño de la letra?
Gracias por tu ayuda
hola, soy juan. Necesito ayuda, me gustaría situar las entradas de mi blog justo debajo del slides show principal. Pero no se hacerlo. Te agradeceria inmensamente que me des las instrucciones necesarias para conseguirlo. Un cordial saludo, gracias y enhorabuena por tu excepcional trabajo.
ResponderEliminarmi e-mail es: molongofw@gmail.com
Otras plantillas OSCURAS y que se puedan poner un fondo como para no CAMBIAR Tanto en el color que usaba www.webderock.com.ar si tenes algo para adaptar a esto, ya que necesito cambiar la plantilla que no me funcionan los slides
ResponderEliminar