SlideShare une entreprise Scribd logo
1  sur  5
Lo más probable es que si tienes un blog en blogger conozcas muy bien que existe la
posibilidad de añadir gadgets (elementos de página) a la sidebar o barra lateral. Uno de
los gadgets más destacados y, al mismo tiempo, más utilizados es el de "Lista de blogs".

Dicho elemento sirve para mostrar lo que lees con un blogroll (lista de enlaces) de tus
blogs favoritos.

El resultado es bastante prometedor ya que los blogs enlazados se van desplazando
hacia arriba, haciendo posible el que tu blog cargue con mayor rapidez.

Puedes ver un ejemplo en este blog de pruebas.

¿Te gusta el resultado? Sigue los pasos para conseguir la lista de blogs en movimiento...

Comprueba que has añadido el gadget "Lista de blogs":




En caso de no tenerlo, agrégalo a tu barra lateral.
                  Diseño>Edición de HTML>expandimos artilugios




Busca esta línea:
<b:widget id='BlogList1'         locked='false'     title='Blog   de     mis     amigos'
type='BlogList'>

Lo que ves en naranja es el título de mi gadget. El tuyo tendrá el título que le
hayas atribuido.

Un poco más abajo encontrarás esta otra línea:
<b:includable id='main'>

Ahora borra desde esta línea hasta su etiqueta de cierre </b:includable>
(ambas incluidas) como te muestro a continuación:

<b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'>

<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId +
&quot;_container&quot;'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
<div class='blog-icon'>
<b:if cond='data:showIcon == &quot;true&quot;'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
</div>
<div class='blog-content'>
<div class='blog-title'>
<a expr:href='data:item.blogUrl' target='_blank'>
<data:item.blogTitle/></a>
</div>

<div class='item-content'>
<b:if cond='data:showItemThumbnail == &quot;true&quot;'>
<b:if cond='data:item.itemThumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' border='0' expr:height='data:item.itemThumbnail.height'
expr:src='data:item.itemThumbnail.url'
expr:width='data:item.itemThumbnail.width'/>

</a>
</div>
</b:if>
</b:if>
<b:if cond='data:showItemTitle == &quot;true&quot;'>
<span class='item-title'>
<b:if cond='data:item.itemUrl != &quot;&quot;'>
<a expr:href='data:item.itemUrl' target='_blank'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</span>
</b:if>
<b:if cond='data:showItemSnippet == &quot;true&quot;'>
<b:if cond='data:showItemTitle == &quot;true&quot;'>
-
</b:if>
<span class='item-snippet'>
<data:item.itemSnippet/>
</span>
</b:if>
<b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
<div class='item-time'>
<data:item.timePeriodSinceLastUpdate/>
</div>
</b:if>
</div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>

<b:if cond='data:numItemsToShow != 0'>
<b:if cond='data:totalItems &gt; data:numItemsToShow'>
<div class='show-option'>
<span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display:
none;'>
<a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
</span>
<span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-
left: 5px;'>
<a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
</span>
</div>
</b:if>
</b:if>

<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

Una vez eliminado, inserta este otro código en su lugar:

<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId +
&quot;_container&quot;'>
<marquee direction='up' onmouseout='this.start()' onmouseover='this.stop()'
scrollamount='1' scrolldelay='1' style='height: 240px; padding: 4px; border: 2px
solid #cccccc;'><ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
<div class='blog-icon' style='visibility: hidden; display: none;'>
<b:if cond='data:showIcon == &quot;true&quot;'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
</div>
<div class='blog-content'>
<div class='blog-title' style='margin-bottom: 14px; font-size: 14px; text-
decoration: none;'>
<a expr:href='data:item.blogUrl' style='text-decoration: none;' target='_blank'>
<img src='http://icons3.iconfinder.netdna-
cdn.com/data/icons/Sizicons/12x12/arrow_2_right_round.png'/>
<data:item.blogTitle/>...</a>
</div>
<div class='item-content' style='text-decoration: none;'>
<b:if cond='data:showItemThumbnail == &quot;true&quot;'>
<b:if cond='data:item.itemThumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' border='0' expr:height='data:item.itemThumbnail.height'
expr:src='data:item.itemThumbnail.url'
expr:width='data:item.itemThumbnail.width'/>
</a>
</div>
</b:if>
</b:if>
<b:if cond='data:showItemTitle == &quot;true&quot;'>
<span class='item-title'>
<b:if cond='data:item.itemUrl != &quot;&quot;'>
<a expr:href='data:item.itemUrl' style='color: #006633; text-decoration: none;'
target='_blank'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</span>
</b:if>
<b:if cond='data:showItemSnippet == &quot;true&quot;'>
<b:if cond='data:showItemTitle == &quot;true&quot;'>...
</b:if>
<span class='item-snippet'>
<data:item.itemSnippet/>
</span>
</b:if>
<b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
<div class='item-time' style='margin-top: 6px; color: #006633; text-align: right;'>
<img src='http://icons3.iconfinder.netdna-cdn.com/data/icons/circular%20icons/
bullet_black.png' style='padding-right:
4px;'/><data:item.timePeriodSinceLastUpdate/>
</div>
</b:if>
</div>
</div>
<div style='margin-bottom: 14px; border: 3px solid #ccc; clear: both;'/>

</li>
</b:loop>
</ul></marquee>

<b:if cond='data:numItemsToShow != 0'>
<b:if cond='data:totalItems &gt; data:numItemsToShow'>
<div class='show-option'>
<span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display:
none;'>
<a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>

</span>

<span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-
left: 5px;'>
<a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
</span>
</div>
</b:if>
</b:if>

<b:include name='quickedit'/>
</div>
</div>
</b:includable>

En caso de querer editar el movimiento, reemplaza el valor 1 (marcado en rojo)
por 2, 3, 4...

Para cambiar la dirección y hacer que los blogs "suban" en lugar de que "bajen"
cambia down por up
Guarda el gadget para terminar.

¡Ya podrás disfrutar de una bonita lista en movimiento!

Contenu connexe

Tendances (8)

tutorial webquest
tutorial webquesttutorial webquest
tutorial webquest
 
TTORIAL
TTORIALTTORIAL
TTORIAL
 
Mariajo informatica
Mariajo informaticaMariajo informatica
Mariajo informatica
 
JQuery-Tema 1
JQuery-Tema 1JQuery-Tema 1
JQuery-Tema 1
 
Tutorial Para Hacer Pag Web
Tutorial Para Hacer Pag WebTutorial Para Hacer Pag Web
Tutorial Para Hacer Pag Web
 
María José.
María José.María José.
María José.
 
Webmaker a la carrera
Webmaker a la carreraWebmaker a la carrera
Webmaker a la carrera
 
Google sites
Google sitesGoogle sites
Google sites
 

En vedette (6)

E-Rate / District Technology Plan
E-Rate / District Technology PlanE-Rate / District Technology Plan
E-Rate / District Technology Plan
 
E-Rate / SISD Technology Plan
E-Rate / SISD Technology PlanE-Rate / SISD Technology Plan
E-Rate / SISD Technology Plan
 
E-Rate / District Technology Plan
E-Rate / District Technology PlanE-Rate / District Technology Plan
E-Rate / District Technology Plan
 
E-Rate / District Technology Plan
E-Rate / District Technology PlanE-Rate / District Technology Plan
E-Rate / District Technology Plan
 
Twitter for Teachers
Twitter for TeachersTwitter for Teachers
Twitter for Teachers
 
Presentation1
Presentation1Presentation1
Presentation1
 

Similaire à Tutorial ayuda para tu Blog

Tutorial[1].blogger mt
Tutorial[1].blogger mtTutorial[1].blogger mt
Tutorial[1].blogger mt
margarita01
 
Menu horizontal blogger
Menu horizontal bloggerMenu horizontal blogger
Menu horizontal blogger
Edwin Vargas
 

Similaire à Tutorial ayuda para tu Blog (20)

Crea tu plantilla de blogger
Crea tu plantilla de bloggerCrea tu plantilla de blogger
Crea tu plantilla de blogger
 
Power point
Power pointPower point
Power point
 
Power point
Power pointPower point
Power point
 
Como crear un blog
Como crear un blogComo crear un blog
Como crear un blog
 
Como crear un blog
Como crear un blogComo crear un blog
Como crear un blog
 
Blog
BlogBlog
Blog
 
Blog
BlogBlog
Blog
 
Hipervinculos en html
Hipervinculos en htmlHipervinculos en html
Hipervinculos en html
 
Php
PhpPhp
Php
 
Preparamos nuestro blog
Preparamos nuestro blogPreparamos nuestro blog
Preparamos nuestro blog
 
Tutorial[1].blogger mt
Tutorial[1].blogger mtTutorial[1].blogger mt
Tutorial[1].blogger mt
 
En 20 minutos ... jQuery
En 20 minutos ... jQueryEn 20 minutos ... jQuery
En 20 minutos ... jQuery
 
Grails: Framework para el desarrollo de aplicaciones Web No 3
Grails: Framework para el desarrollo de aplicaciones Web No 3Grails: Framework para el desarrollo de aplicaciones Web No 3
Grails: Framework para el desarrollo de aplicaciones Web No 3
 
Iniciando el front end
Iniciando el front endIniciando el front end
Iniciando el front end
 
Html - Tema 2: Enlaces, Imágenes y Listas
Html - Tema 2: Enlaces, Imágenes y ListasHtml - Tema 2: Enlaces, Imágenes y Listas
Html - Tema 2: Enlaces, Imágenes y Listas
 
Menu horizontal blogger
Menu horizontal bloggerMenu horizontal blogger
Menu horizontal blogger
 
Presentacion
PresentacionPresentacion
Presentacion
 
Presentacion
PresentacionPresentacion
Presentacion
 
iDay Feb 2017 - Marcado de datos estructurados. Pónselo fácil a Google
iDay Feb 2017 - Marcado de datos estructurados. Pónselo fácil a GoogleiDay Feb 2017 - Marcado de datos estructurados. Pónselo fácil a Google
iDay Feb 2017 - Marcado de datos estructurados. Pónselo fácil a Google
 
Ajax
AjaxAjax
Ajax
 

Dernier

redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
nicho110
 

Dernier (12)

Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptx
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXI
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 

Tutorial ayuda para tu Blog

  • 1. Lo más probable es que si tienes un blog en blogger conozcas muy bien que existe la posibilidad de añadir gadgets (elementos de página) a la sidebar o barra lateral. Uno de los gadgets más destacados y, al mismo tiempo, más utilizados es el de "Lista de blogs". Dicho elemento sirve para mostrar lo que lees con un blogroll (lista de enlaces) de tus blogs favoritos. El resultado es bastante prometedor ya que los blogs enlazados se van desplazando hacia arriba, haciendo posible el que tu blog cargue con mayor rapidez. Puedes ver un ejemplo en este blog de pruebas. ¿Te gusta el resultado? Sigue los pasos para conseguir la lista de blogs en movimiento... Comprueba que has añadido el gadget "Lista de blogs": En caso de no tenerlo, agrégalo a tu barra lateral. Diseño>Edición de HTML>expandimos artilugios Busca esta línea: <b:widget id='BlogList1' locked='false' title='Blog de mis amigos' type='BlogList'> Lo que ves en naranja es el título de mi gadget. El tuyo tendrá el título que le hayas atribuido. Un poco más abajo encontrarás esta otra línea: <b:includable id='main'> Ahora borra desde esta línea hasta su etiqueta de cierre </b:includable> (ambas incluidas) como te muestro a continuación: <b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'> <b:includable id='main'> <!-- only display title if it's non-empty -->
  • 2. <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'> <ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'> <b:loop values='data:items' var='item'> <li expr:style='data:item.displayStyle'> <div class='blog-icon'> <b:if cond='data:showIcon == &quot;true&quot;'> <input expr:value='data:item.blogIconUrl' type='hidden'/> </b:if> </div> <div class='blog-content'> <div class='blog-title'> <a expr:href='data:item.blogUrl' target='_blank'> <data:item.blogTitle/></a> </div> <div class='item-content'> <b:if cond='data:showItemThumbnail == &quot;true&quot;'> <b:if cond='data:item.itemThumbnail'> <div class='item-thumbnail'> <a expr:href='data:item.blogUrl' target='_blank'> <img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/> </a> </div> </b:if> </b:if> <b:if cond='data:showItemTitle == &quot;true&quot;'> <span class='item-title'> <b:if cond='data:item.itemUrl != &quot;&quot;'> <a expr:href='data:item.itemUrl' target='_blank'> <data:item.itemTitle/></a> <b:else/> <data:item.itemTitle/> </b:if> </span> </b:if> <b:if cond='data:showItemSnippet == &quot;true&quot;'> <b:if cond='data:showItemTitle == &quot;true&quot;'> - </b:if> <span class='item-snippet'> <data:item.itemSnippet/>
  • 3. </span> </b:if> <b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'> <div class='item-time'> <data:item.timePeriodSinceLastUpdate/> </div> </b:if> </div> </div> <div style='clear: both;'/> </li> </b:loop> </ul> <b:if cond='data:numItemsToShow != 0'> <b:if cond='data:totalItems &gt; data:numItemsToShow'> <div class='show-option'> <span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'> <a href='javascript:void(0)' onclick='return false;'><data:showNText/></a> </span> <span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin- left: 5px;'> <a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a> </span> </div> </b:if> </b:if> <b:include name='quickedit'/> </div> </div> </b:includable> </b:widget> Una vez eliminado, inserta este otro código en su lugar: <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'> <marquee direction='up' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='1' scrolldelay='1' style='height: 240px; padding: 4px; border: 2px solid #cccccc;'><ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'> <b:loop values='data:items' var='item'>
  • 4. <li expr:style='data:item.displayStyle'> <div class='blog-icon' style='visibility: hidden; display: none;'> <b:if cond='data:showIcon == &quot;true&quot;'> <input expr:value='data:item.blogIconUrl' type='hidden'/> </b:if> </div> <div class='blog-content'> <div class='blog-title' style='margin-bottom: 14px; font-size: 14px; text- decoration: none;'> <a expr:href='data:item.blogUrl' style='text-decoration: none;' target='_blank'> <img src='http://icons3.iconfinder.netdna- cdn.com/data/icons/Sizicons/12x12/arrow_2_right_round.png'/> <data:item.blogTitle/>...</a> </div> <div class='item-content' style='text-decoration: none;'> <b:if cond='data:showItemThumbnail == &quot;true&quot;'> <b:if cond='data:item.itemThumbnail'> <div class='item-thumbnail'> <a expr:href='data:item.blogUrl' target='_blank'> <img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/> </a> </div> </b:if> </b:if> <b:if cond='data:showItemTitle == &quot;true&quot;'> <span class='item-title'> <b:if cond='data:item.itemUrl != &quot;&quot;'> <a expr:href='data:item.itemUrl' style='color: #006633; text-decoration: none;' target='_blank'> <data:item.itemTitle/></a> <b:else/> <data:item.itemTitle/> </b:if> </span> </b:if> <b:if cond='data:showItemSnippet == &quot;true&quot;'> <b:if cond='data:showItemTitle == &quot;true&quot;'>... </b:if> <span class='item-snippet'> <data:item.itemSnippet/> </span> </b:if> <b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'> <div class='item-time' style='margin-top: 6px; color: #006633; text-align: right;'> <img src='http://icons3.iconfinder.netdna-cdn.com/data/icons/circular%20icons/ bullet_black.png' style='padding-right: 4px;'/><data:item.timePeriodSinceLastUpdate/> </div>
  • 5. </b:if> </div> </div> <div style='margin-bottom: 14px; border: 3px solid #ccc; clear: both;'/> </li> </b:loop> </ul></marquee> <b:if cond='data:numItemsToShow != 0'> <b:if cond='data:totalItems &gt; data:numItemsToShow'> <div class='show-option'> <span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'> <a href='javascript:void(0)' onclick='return false;'><data:showNText/></a> </span> <span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin- left: 5px;'> <a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a> </span> </div> </b:if> </b:if> <b:include name='quickedit'/> </div> </div> </b:includable> En caso de querer editar el movimiento, reemplaza el valor 1 (marcado en rojo) por 2, 3, 4... Para cambiar la dirección y hacer que los blogs "suban" en lugar de que "bajen" cambia down por up Guarda el gadget para terminar. ¡Ya podrás disfrutar de una bonita lista en movimiento!