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

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

Plantillas Blogger – Línea Style Magazine

A continuación mire el demo de la Plantilla Style Magazine

DEMO

Puedes descargarte la plantilla del siguiente icono

DESCARGAR PLANTILLA

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

Plantillas Blogger

Configuración del primer widget

Plantillas Blogger

Abre el widget “HTML/Javascript” he ingresa el siguiente código en su interior

Plantillas Blogger

<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

Plantillas Blogger

Abre el widget “HTML/Javascript” he ingresa el siguiente código en su interior

Plantillas Blogger

<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(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/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

Plantillas Blogger

Abre el widget “HTML/Javascript” he ingresa el siguiente código en su interior

Plantillas Blogger

<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

Plantillas Blogger

Abre el widget “HTML/Javascript” y sigue las siguientes instrucciones que se especifica en el siguiente tutorial

Plantillas Blogger


Configuración del tercer widget basado en etiquetas

Plantillas Blogger

Nos dirigimos a la última posición del widget, abrimos “HTML/Javascript” he insertamos el siguiente código en su interior

Plantillas Blogger

<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

Plantillas Blogger

Para realizar este truco tienes que buscar el widget que tiene como nombre “Comentarios” ábrelo y sigue las instrucciones del siguiente tutorial

Plantillas Blogger


Segundo Paso

Configuración del Menú desplegable

Plantillas Blogger

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

Plantillas Blogger – Línea Style Magazine

3 Un clic en “Editar HTML

Plantillas Blogger – Línea Style Magazine

Ahora se le abrirá el Editor HTML de su plantilla

Plantillas Blogger – Línea Style Magazine

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.

Plantillas Blogger – Línea Style Magazine

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

Plantillas Blogger

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

Plantillas Blogger

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

Plantillas Blogger

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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=foroayudadeblogger&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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 == &quot;&quot;) {this.value = &quot;Ingrese su email&quot;;}' onfocus='if (this.value == &quot;Ingrese su email&quot;) {this.value = &quot;&quot;;}' 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&amp;fg=444444&amp;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

Plantillas Blogger

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
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

5 comentarios:

  1. hola buenos dias muy buena plantilla pero tengo un problema con el Slideshow no me funciona me puedes ayudar gracias

    ResponderEliminar
  2. buenos dias muy buenos tus tutoriares y estoy utilizando esta plantilla pero no sale el Slideshow espero ayuda

    ResponderEliminar
  3. Hola Luis, muchas gracias por el tutorial. Tengo algunas dudas con respecto a la barra de menú
    1 ¿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

    ResponderEliminar
  4. 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.

    mi e-mail es: molongofw@gmail.com

    ResponderEliminar
  5. 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