Agrega un gadgets de noticias en tu blog

Continuando con los gadget de Noticias, hoy os traigo un gadget interesante para instalarlo en vuestros blog, se trata de un cargador de noticias de las web que queráis integrar.
Entrar en  netvibes una web donde en unos solos pasos integramos un cargador de noticias al instante.

Pasos:
Entrar en la web, os registráis y una vez yá registrados os explico los pasos.

1.-Pincháis aquí

2.-Ahora en create widget 

 

 

 

3.- Create multifeed widget

4.- En feed titule,colocáis el título de la web, en feed urlel feed de la web, si queréis poner más de una web, seguir los mismos pasos hacia bajo.

5.- Pincháis en Next step

6,- Rellenáis los siguientes pasos (ver imagen)

7.- Clikáis en Next step y os llevará aquí,y luego en add to my blog

8.- Copiáis el código y lo colocáis en un html/javascript de vuestra sidebar

-Fuente y prueba: Amor Semivillista: Enlace

Read More

Utilizar una imagen como título de los gadgets

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.


Utilizar una imagen como título en cualquier gadget de tu blog

Recuerdo que tiempo atrás, una de las primeras modificaciones que le hice a mi blog fue la de reemplazar los títulos de los gadgets por imágenes. Los lectores quedaron encantados y en la mayoría de sus comentarios me pidieron que les explicase la forma de conseguir lo mismo.

Por ello, en esta entrada quiero presentártelo y conseguir que en unos sencillísimos pasos puedas aplicarlo a los elementos de página que tengas tanto en la barra lateral de tu blog como en el pie de este mismo...



Nuestro primer pasó constará de añadir el gadget a personalizar en tu barra lateral o en cualquier sección del blog. Para ello, accede al apartado Diseño>Elementos de la página>Añadir un gadget. Seguidamente, atribúyele el título 'Mi gadget imagen'.

Guárdalo y sigue estos pasos:

Diseño>Edición de HTML>expandimos artilugios

Pulsando las teclas Ctrl y F para abrir el buscador de tu navegador, encuentra el título que acabas de introducir.

Una vez localizado, notarás que el código es muy similar a este:

<b:widget id='HTML1' locked='false' title='Mi gadget imagen' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

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

En mi caso, seleccioné el gadget html-javascript y por tanto el código es más corto aunque esto no tiene nada que ver con nuestro truco dado que variará según tu elección.

Ahora, reemplaza la línea resaltada en color verde por esto:

<img src="URL DE TU IMAGEN"/>

Sustituye URL DE TU IMAGEN por la dirección de la imagen que actuará como título.

Haz vista previa para comprobar el resultado y guarda la plantilla para terminar.

Read More

Como ocultar el título de los gadgets

Artículo publicado en el blog El Balcón de Jaime,  ver la entrada en su blog original.



Ocultar el nombre o título de los gadgets

Para obtener un diseño único solemos agregar varios gadgets que contienen imágenes, códigos que muestran artilugios, galerías, etc.

En gran parte de estos elementos de página no introducimos un título, o bien porque en algunos casos no es necesario o bien por no querer mostrarlo.

Al no utilizar títulos, la tarea de localizar un gadget específico para editarlo o personalizarlo se nos complica y el único término visible es el nombre del gadget: Imagen, Etiquetas, HTML/Javascript...



En esta entrada veremos como darle nombre a los gadgets para que cuando entremos en el apartado de Diseño>Elementos de la página podamos reconocerlos fácilmente.

¿Pero entonces, el título aparecerá también en mi blog? No. Los títulos de los gadgets modificados sólo podrás verlos tú:



El primer paso consta de entrar en Diseño>Elementos de la página y hacer click en Editar, en el gadget que deseas modificar.

Titúlalo como quieras, de manera que puedas encontrarlo con facilidad dentro del código de tu plantilla (ejemplo: Buscador).

Diseño>Edición de HTML>expandimos artilugios

Busca el gadget editado, su código será parecido a este:

<b:widget id='HTML2' locked='false' title='Buscador' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

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

Ahora simplemente debes eliminar lo que resalto en color rojo. Guarda la plantilla y comprobarás que al acceder a tu blog, el título de cada gadget modificado no aparecerá. Por el contrario, en Elementos de la página, su nombre seguirá visible.

Bastará con seguir el mismo procedimiento cada vez que desees ocultar el título de un elemento.

Read More

Cambiar los iconos en eñ gadget de archivos

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en trucos blogger. ! Ve la entrada en su blog original.

Cambiar los ▼► que hay en el gadget de archivos

Voy a enseñarte cómo cambiar los ▼► que hay en el gadget de archivos, que sirven para expandir / contraer las entradas que publicas cada mes y cada año. Vamos a cambiarlos por cualquier imágen o icono...

&# 9660; por esta línea:

<img src="URL DE TU ICONO O IMAGEN"/>

Ahora, para cambiar el triángulo que es así: ► baja unas líneas más hasta ver esta:

<span class='zippy'>&# 9658; </span>

Como antes, &# 9660; por esta línea:

<img src="URL DE TU ICONO O IMAGEN"/>

Donde dice "URL DE TU ICONO O IMAGEN" pones la dirección (URL) de tu icono o imágen, puedes encontrar buenos iconos en iconlook por ejemplo.

¡Suerte!

Read More

Instala un botón para que enlazen tu blog

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Tu botón de enlace (con botón )

Tal vez hayas incluido algún script para evitar que los lectores seleccionen y copien el contenido en tu blog. Si además has instalado el widget 'botón de enlace con código', los visitantes no podrán enlazarte en su sitio web.

Dado que esto es una desventaja para ti, como autor, es aconsejable recurrir a un gadget 'conectado' a blogger, de manera que tan solo se tenga que pulsar un botón para vincular tu bitácora, sin necesidad de copiar o pegar código alguno.

<a href="http://elbalcondejaime.blogspot.com/" target="blank"><img title="El Balcón de Jaime" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQrdL_8ONjfoMruy9HKXJEylEbgPNZ8T5OIqCpzyNpi2BJ81ey_YCEPjQ7m7xk6A-8fCeonXu7sY1LVLYDvcjpmDKkZUg25jhTIxLy_Kbs2vQsmNaCRi2WXq7XRY5H_6Y3_lyhMkbzRM0/s1600-r/bannerbalcon.png" /></a><br />

Diseño>añadir gadget (elemento de página)>html-javascript

Pega este código en su interior:

<center><img src="URL IMAGEN" /><form action="http://beta.blogger.com/add-widget" method="post"><input value="Recomiendo..." name="widget.title" type="hidden"><textarea style="display: none;" name="widget.content"><a href="URL DE TU BLOG" target="blank"><img title="TITULO DEL BLOG" src="URL IMAGEN" /></a><br /></textarea><input value="http://buzz.blogger.com" name="infoUrl" type="hidden"><input value="http://www.blogger.com/favicon.ico" name="logoUrl" type="hidden"><img style="border:none;cursor:pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuGT2uCWgdMMeWjAvY_xLk1kuGNwxNaBJbVec6V-eR3pGywpq14DSCc_FF-N1HXkGyLuD-MJtZHM3HasP8O_2GwDJ6O6JXoVibH0RD5VLeoVnEkpExdX-b7gt-pPjHqSeQEUUsPSZ6pJCY/s320/blcnbutt.png" value="Enlázame" name="go" type="submit"/></form></center>

Reemplaza URL IMAGEN por la dirección de tu banner o imagen, URL DE TU BLOG por la dirección del blog y TITULO DEL BLOG por el título.

El término Recomiendo... será el título del gadget del banner y puedes editarlo a tu gusto o simplemente eliminarlo.

Para el botón he utilizado una imagen con el texto 'Enlázame' pero puedes modificarlo cambiando la dirección resaltada en color grisáceo.

Si lo que prefieres es utilizar un botón corriente cambia esta línea:

<img style="border:none;cursor:pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuGT2uCWgdMMeWjAvY_xLk1kuGNwxNaBJbVec6V-eR3pGywpq14DSCc_FF-N1HXkGyLuD-MJtZHM3HasP8O_2GwDJ6O6JXoVibH0RD5VLeoVnEkpExdX-b7gt-pPjHqSeQEUUsPSZ6pJCY/s320/blcnbutt.png" value="Enlázame" name="go" type="submit"/>

Por esta otra:

<input value="TEXTO DEL BOTON" name="go" type="submit"/>

Guarda el gadget y ofrecerás a tus lectores un sencillísimo procedimiento para enlazarte.

Read More

Cómo extender y contraer el contenido de los gadgets

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.


Expandir y contraer el contenido de cualquier gadget

Esta es una sencilla forma de mostrar el contenido de los gadgets de forma recogida.

Puede ser de utilidad para los blogs que tengan largas listas de blogs amigos, muchas etiquetas o simplemente para los que deseen tener sus elementos de página recogidos.

Ayer me llegó un comentario de Marisol donde me pregunta como "esconder" su lista de blogs así que vamos a explicarlo...

Diseño>edición HTML>expandimos artilugios

Como comprobaremos, la estructura de cualquier gadget (en este caso usaremos el gadget de html-javascript) es similar o idéntica a esta:

<b:widget id='HTML1' locked='false' title='HTML' type='HTML'>
<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'>
<data:content/>
</div>

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

Ten en cuenta que cada gadget tendrá un nombre diferente en la parte de <b:widget id='HTML1' ya que puede ser <b:widget id='BlogList1' (la lista de blogs) por ejemplo. Por eso es importante que tengas un título en el gadget, para localizarlo antes.

Una vez localizado el elemento al que le aplicaremos el truco añade lo que te muestro en azul, fijándote bien en dónde añadir el script:

<b:widget id='HTML1' locked='false' title='HTML' type='HTML'>
<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>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>Abrir el contenido
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
<data:content/>
</div>
<script type='text/javascript'>>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Ahora puedes cambiar Abrir el contenido por cualquier frase que quieras poner para que, al hacer clic en ella, se habra el contenido del gadget.

También puedes poner una imagen (o una imagen con texto) en lugar de una frase. En ese caso debes poner esta línea en lugar del texto:

<img src="URL DE TU IMAGEN"/>

Sustituye URL DE TU IMAGEN por la dirección de tu icono o tu imagen. En el caso de poner también el texto, lo escribiríamos al final o al principio de la línea de la imagen.

Read More

Como instalar una lista de blogs en movimiento

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Lista de blogs con movimiento personalizable

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.

Hace un tiempo expliqué la forma de personalizar gadget de página y se me ocurrió que darle movimiento no sería una mala idea, por lo que te enseñaré a aplicárselo.

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='Mi lista de blogs' 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:

 Ver / Ocultar el código

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 "bajen" en lugar de que "suban" cambia up por down.

Guarda el gadget para terminar.

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

Read More

Mostrar Gadgets sólo en las portadas del blog

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Mostrar gadgets solo en la portada del blog

El tiempo de carga de una página suele ser por lo general el mayor problema que muestran todos los blogs, pudiendo no solo hacer que los lectores dejen de visitarlos sino también dificultar el acceso al contenido publicado.

Los gadgets que instalamos en la sidebar o barra lateral son, la mayoría de veces, culpables.

Algunos son fundamentales por la información o las ventajas que ofrecen pero otros no hacen más que sobre cargar el sitio web. No queremos eliminarlos y por ello simplemente haremos que se muestren exclusivamente en la página principal o portada, evitando así que el visitante pueda verlos al acceder a una entrada de forma individual.

La explicación está basada en un gadget html-javascript aunque el mismo método puede aplicarse a cualquier otro (el de Seguidores o el de Lista de blogs, por ejemplo).

Diseño>Edición de HTML>expandimos artilugios

Busca el código del gadget y añade lo que resalto en color rojo:

<b:widget id='HTML2' locked='false' title='Visitas del blog' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

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

Tal y como puedes ver, la primera línea aparece justo después de <b:includable id='main'> y su correspondiente cierre justo antes de </b:includable>.

Con este par de aclaraciones no importará que el código sea distinto por tratarse de otro gadget dado que las líneas previamente citadas aparecerán siempre.

Recuerda que para encontrar el código de un gadget en tu plantilla con facilidad, bastará con incluirle antes de acceder al apartado de Diseño>Edición de HTML, un título único.

Posteriormente y haciendo uso del buscador de tu navegador (puede abrirse presionando las teclas Ctrl y F simultáneamente) escribiremos el título.

Aplicando el truco a varios gadgets lograremos que en la portada todos queden visibles, pero al abrir un artículo se ocultarán y quedarán visibles aquellos a los que no les hayas aplicado la modificación.

Guarda la plantilla y habrás terminado.

Read More

Cómo poner un botón "spoiler" en el blog

Bueno ya todos saben que es un spoiler, pero para los que no saben, entonces un spoiler es una herramienta un botón para mostrar o ocultar cualquier contenido para ahorrar espacio para colocarlo en los posts, es fácil colocar, no es nada de modificar nada extravagante en la plantilla, hay dos maneras diferentes para colocarlo:

• En forma de Link:

<div><a href='#' onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.innerHTML = 'Ocultar Contenido';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = 'Mostrar Contenido';}return false" type="button">Mostrar Contenido</a><div style="display: none;">AQUI EL CONTENIDO QUE QUIERAS OCULTAR</div></div>

Asi quedaría:

Mostrar Contenido

• En forma de Botón:

<div><input value="Mostrar" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Ocultar Contenido';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Mostrar Contenido';}" type="button" /><div style="display: none;">AQUI EL CONTENIDO QUE QUIERAS OCULTAR</div></div>

Asi quedaría:

Visto en | TrucosGeek Vía V-Junker

Read More

Gadget para que los visitantes se tomen una foto en tu blog

Esta nueva forma de tomarse una foto en tu blog, para que tus visitantes se den a conocer y divertirse, es lo nuevo de hoy, ya que esta página llamada Trombiblog nos ofrece este servicio y es gratis 

La pagina esta en idioma Francés y Ingles pero es fácil entenderle.

• Primero nos vamos a Trombiblog y tenemos que registrarnos.
• Una vez ya registrados nos mandara a la configuración del gadget, como el color y demás.
• Ya confirmado la configuración nos dará el código.
• Cópialo y nos vamos a Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y pegamos el código.

Lo ven es muy fácil colocarlo ahora es cuestión que tus visitantes se tomen una foto y puedan comentar o calificar las fotos de los demás.

Así quedaría el gadget:

Ver todas las fotos

Tomate una Foto

 

Y si quieren probarlo tomándose una foto como yo, solo dale en donde dice "Tomate una Foto" XD.

-Vía V-Junker

Read More

Ofrece formas diferentes de navegación a tus visitantes

En pagescroller.com tenemos un proyecto que nos permite instalar un código en nuestra web para ofrecer a los visitantes una nueva forma de desplazarnos entre el contenido de una misma página web.

El objetivo es sustituir la barra de desplazamiento vertical con dos botones que podrán ser pulsados para subir y bajar, estando localizados en la sección lateral de la web. También es posible mostrar un menú con enlaces que lleven a zonas específicas de la página, colocándolo tanto en el lateral como en la parte superior.

Dentro del mismo pagescroller.com podemos ver los componentes mencionados en pleno funcionamiento, con un panel de control central que permite configurar su posición.

Desde Whatsnew.com

Read More