Enlaces con favicon
Bear! Imaginario me hace llegar esta consulta:
Tengo una duda, no se si has visto en otros blogs, pequeños cuadritos que son para colocar favicones, en ves de intercambiar links, intercambian favicones... mas o menos como seria el código para lograr tener una cantidad de cuadritos 16x16????
Es cierto que últimamente he visto esta manera de intercambiar enlaces en bastantes blogs, ocupa mucho menos espacio que los botones de enlace tradicionales y además queda muy lindo estéticamente.
Se trata de colocar el favicón de tus blogs amigos o favoritos en la sidebar enlazando a sus páginas, incluso solicitando el mismo tipo de enlace, es decir, "yo pongo tu favicón si tu pones el mio".
 |  |  |  |  |  |  | |
El código se colocará dentro de un elemento html en la sidebar, y no tendrá mayor complicación que incluir la url a la imagen (favicón) que tendrá un tamaño de 16x16 pixeles y la dirección a la página que enlazará desde el favicón.
En "title" y en "alt" escribimos el título de la página a la que enlaza el favicón, para que al colocar el puntero sobre el, salga un pequeño cartelito con el nombre de la misma, como véis en el ejemplo.
<table border="0" cellpadding="0" cellspacing="2" align="center">
<tbody><tr>
<td><a href="Url de la página" target="_blank" title="Título de la página"><img alt="Título de la página" src="Url de la imagen-favicon" class="favicon" title="Título de la página"/></a></td>
<td><a href="Url de la página" target="_blank" title="Título de la página"><img alt="Título de la página" src="Url de la imagen-favicon" class="favicon" title="Título de la página"/></a></td>
<td><a href="Url de la página" target="_blank" title="Título de la página"><img alt="Título de la página" src="Url de la imagen-favicon" class="favicon" title="Título de la página"/></a></td>
<td><a href="Url de la página" target="_blank" title="Título de la página"><img alt="Título de la página" src="Url de la imagen-favicon" class="favicon" title="Título de la página"/></a></td></tr>
<tr><td><a href="Url de la página" target="_blank" title="Título de la página"><img alt="Título de la página" src="Url de la imagen-favicon" class="favicon" title="Título de la página"/></a></td>
<td><a href="Url de la página" target="_blank" title="Título de la página"><img alt="Título de la página" src="Url de la imagen-favicon" class="favicon" title="Título de la página"/></a></td>
<td><a href="#" target="_blank" title="Tu favicon aqui"><img alt="Tu favicon aqui" src="Url de la imagen-favicon-vacio" class="favicon" title="Tu favicon aqui"/></a></td>
<td><a href="#" target="_blank" title="Tu favicon aqui"><img alt="Tu favicon aqui" src="Url de la imagen-favicon-vacio" class="favicon" title="Tu favicon aqui"/></a></td>
</tr>
</tbody></table>
Si vais a usar el widget para ofrecer intercambio de enlaces a vuestras visitas podéis usar, como en el ejemplo, una imagen que os guste para mostrar los huecos disponibles.
En ese caso, en el "title" y el "alt" pondríamos algo como lo que he escrito en el ejemplo "Tu favicón aquí" o algo parecido...
Si nos fijamos en el código, cada favicon lleva aplicada una clase: class="favicon" usando esta clase colocamos en el css de la plantilla, justo antes de ]]></b:skin> unas líneas de código para añadirle, si así lo queremos, un borde de color a cada favicon y algo de separación de este borde a la imagen:
.favicon{
padding: 2px;
border: 1px solid #7b68ee;
}
a las
Etiquetas:
Favicon
Vitua Radio
Foro SpamLoco
Seguir el Escaparate
39 comentarios:
La verdad que quedan muy bien y es una linda forma de destacar algunos blogs especiales.
Pensaba recién que en al final del feed no quedarían mal tampoco... en las opciones de Blogger podemos poner cualquier código HTML para que aparezca sólo en el feed. En mi caso tengo un enlace a mi home, pero se podría adornar ese espacio con estos pequeños favicones para promocionar más a nuestros amigos bloggers.
:)
Hola!! Rosa, disculpame por salirme un poquito del tema de este post, pero tengo una duda, ¿habrá alguna forma de poner a mis seguidores en mi plantilla clásica sin cambiarme a plantilla de diseño?
Gracias!!
Saludos :)
Excelente!, estube mirando la opcion de poner los favocons en mi blog, pero solo lo habia visto para wordpress, con esta info, tan pronto pueda lo implementare en mi Blog, Gracias Rosa!
Muy bueno Rosa, lo había visto en algunos blogs y me preguntaba como era.
Gracias
Asturies nun ya España
http://www.flickr.com/photos/fai-asturies/2670708743/
Gracias rosa! estaba buscando esto por todas partes!!! muchas gracias! Lo colocare en unos dias, junto a mi nueva plantilla! :)
en la entrada---Plantillas y más platillas sugeriste un estilo que me gusto mucho y lo coloque como plantilla para mi blog...quisiera saber si es que a esa plantilla le puedo cambiar el color, uno que vaya mejor conmigo :P Se puede hacer, agradecería infinitamente tu ayuda...mi blog: neopsico.blogspot.com
Hola Rosa, ya lo he puesto en la barra lateral. Lo he hecho con imágenes algo más grandes para que se vieran mejor. Pero tengo un pequeño problema, ¿Cómo haría para determinar el ancho de la tabla a 225px. y que cuando se fueran introduciendo más enlaces se pusieran justo debajo de los primeros? Tal como he adaptado tu código, me caben cuatro, si pongo un enlace más, sobresale del ancho establecido de la barra lateral. Gracias anticipadas.
Rosa, una muy buena opción, para intercambiar enlaces lo conocí por primera vez en "Un hombre solo en la red", y siempre me había picado la curiosidad, gracias Rosa, quizas lo utilizo en mi blog. Veo que el problema de comentarios ya esta resuelto, asi que volveré ha hacer el cambio. Un besote desde Cataluña.
Ruben, así:
<table border="0" cellpadding="0" cellspacing="2" width="225" align="center">
Aunque a lo mejor te quedaba bien sin usar el width solo cambiando el align a "left"...
NeO lo principal sería el fondo de nubes, ahí no puedes cambiar el color, ya que es una imagen...bueno, si puedes si cambias el color a esa misma imagen claro.
Sobre la imagen va el main (entradas) y las sidebars, que si llevan un color aplicado, aunque también llevan una transparencia en el css para que las nubes (imagen de fondo) se vean detrás...
Dime más o menos que habías pensado.
Hola. Tengo un pequeño problemilla. Al publicar una entrada (post) que lleva un video, aparece el video por duplicao. Solo que realmente es el video y debajo una foto de ese video. Alguna idea de lo que puede pasar. Gracias. Chus.
Chus, eso es muy raro...¿de qué servicio es el vídeo que has publicado?
Por cierto...¿cual era la dire de tu blog?...no he podido ir a ver porque no me acuerdo.
Hola. Encima de la ayuda, "servicio express". Son videos bajados del youtube al disco duro. La dirección //desdexixon.blogspot.com
Gracias. Chus.
Chus, aunque yo nunca he usado ese sistema para mostrar vídeos, en el código veo que al final esto es lo que hace que se vea la imagen-copia:
<a href="rtsp://rtsp-youtube.l.google.com/video.3gp?app=blogger&fmt=13&cid=c747f8da5e98bc4a" type="video/3gpp"><img alt="video" src="http://video.google.com/ThumbnailServer2?app=blogger&contentid=c747f8da5e98bc4a&offsetms=5000&itag=w320&sigh=7FU1bPLoD1tUujDrZaChIqFiaLc" class="BLOG_mobile_video_class" id="BLOG_mobile_video-c747f8da5e98bc4a" width="320" height="266">
Prueba a eliminar eso...
LC, pues no, no lo hay. Es un widget que Blogger controla casi por completo, así que es imposible "copiarlo" por decirlo de alguna manera, está pensado solo para la nueva plantilla ya que se añade además como cualquiera de los otros gadgets.
Rosi el formulario de comentar ha vuelto sano y salvo jajaja (gracias a un angelito de la ayuda blogger)si si si...buen fin de semana, besos, aunque ando vagando por tu casa como las moscas cargosas!!!
ok, entiendo Rosa, bueno me gusta el diseño pero quería ponerle un fondo negro (nubes negras?) a la plantilla, por eso mi consulta...si tienes algun tip me lo dices xfa.
Muchas gracias por la ayuda, tu blog es sensacional.. un abrazo...NeO
NeO , no quise decir que te olvidaras eh, puedes poner el fondo que quieras, de un solo color u otra imagen, que no tiene porque ser de nubes. Solo te explicaba lo que habría que hacer más o menos, para que estuvieses al tanto...
El fondo de la imagen de las nubes, se cambiaría por otra imagen aquí:
body {
background: #f0f5f9 url(http://layoutforall.googlepages.com/bgbr_01.jpg) no-repeat top center fixed;
margin:0;
text-align:center;
line-height: 1.5em;
font:x-small Trebuchet MS, Verdana, Arial, Sans-serif;
color:#333333;
font-size/* */:/**/small;
font-size: /**/small;
}
Sustituyendo esa url que ves en negrita, por la de la nueva imagen, tendría que ser una imagen tipo wallpaper al menos de 1600px × 722px.
El color de las entradas, se cambiaría aquí:
/* Main */
#main-wrap1 {
Debajo de eso hay una línea que pone background:#fff; cambias ese código para el color por el que quieras.
Y el de las sidebar no haría falta ya que no lo llevan, están directamente sobre el fondo del blog.
Graciela, uy las moscas no me gustan nada:-( menos mal que tu si me gustas:-L
Rosa una ultima consulta abusando de tu gran corazon, en el sidebar los titulos de los gadgets salen en color negro e intenatdo cambiarlo durante horas pero no he obtenido mayores resultados... podrias ayudamr quisiera colocarlos de color blango o gris en lugar de negro pero no me sale nada....:( gracias por tu atención logre cambiarle el fondo! un abrazo!
Hola Rosa! Yo no puedo hacer que queden los favicones adaptados al ancho del sidebar. Probé de muchas formas, con tu código le puse left, puse el ancho con el código que le diste a otro comentarista y nada.
Podrías ayudarme?
Saludos
Graciela Ventimiglia , he visto que te está ayudando Jmiur. Espero que lo consigas :-)
Ne0, coloca estas dos líneas en cualquier lugar del css, ya sabes, siempre antes de ]]></b:skin>
#kanan h2{color:#fff;}
#sidebar-wrapkiri h2{color:#fff;}
Se verán de color blanco, para cambiar el color cambias ahí el código.
Gracias Rosa, gracias de todas maneras por contestar, es que no lograba que quedara bien y tuve que poner el gadget al pie de la plantilla donde nadie podía verlo y quedaba mal.
Ahora quedó bien, faltaba el tr en el código para que se comporte como una tabla.
Saludos!!!!
y para cuando la Faviconera de el Escaparate ? ;)
nada nada, que vengo de humores muchos. :)
Un beso desde Uruguay Rosa.
Y gracias por gastar parte de tu tiempo en ayudar.
:D
:)
Rosa, me preguntaba si existe algun codigo que de Enter como
, en el codigo de los favicones, para establecer un orden, ya que veo que si sumo muchos favicones, el que quede de ultimo, se vera cortado.
Un beso desde Uruguay Rosa.
El que sabe, sabe, y el que no ... debe pasar por el Escaparate
Un perro ¿un código que de Enterrr??:O
jaja, disculpame Rosa, no supe como explicarme, y ahora que lo re-leo, es peor :S
Lo que queria era un codigo al estilo ( br ) que le diera un Enter ( bajara al otro renglon ) a los demas favicones, para poder ordenarlos, y cuando introducia el br en el codigo que mostras, no lo reconocia, este codigo lo encontre y era tr, metido entre <>.
otra vez disculpas por plantear de manera entreverada y poco entendible mi duda.
A propposito, te he enviado un email siguiendo con el tema del rotator, que ha quedado centrado, pero aun no rota :S
Un beso
Yo uso un plugin para mi blog ( lo tengo con WordPress ) pero desgraciadamente ya no ofrecen servicio para el :(( así que cuando ví esta entrada tuya sobre los favicons me alegré muchisimo :P
Pero tengo una duda: lo quiero poner en una de las sidebar y poder escoger el tamaño - que tenga forma de cuadricula - ¿ cómo lo hago ?
Gracias anticipadas.
Hispania, tal como ves en la entrada.
Es un código construido con tablas.
Si te fijas el código que corresponde a cada favicon es el que está entre <td> y </td> a los cuatro favicones (en el ejemplo de la entrada) el código termina con </tr> y vuelve a empezar para los otros cuatro con <tr> y así se haría sucesivamente...
Creo que en el post se debe aclarar que ese <tr> inicia un reenglón y </tr> los saltos de línea, a mí me confundió hasta que entendí el código.
Veo que el atributo title= está repetido dos veces lo cual es inecesario, ya que la imagen actua como enlace y con un solo title= es suficiente.
Otra recomendación sería que se sugiera que al atributo alt= se borre o que sea igual a una letra o palabra corta y no a frases largas, porque la sidebar quedaría vería muy congestinada cuando no se carguen por completos las favicons.
Bonzu, así es, el código es una tabla.
Para el que no las conozca se tratará de "estudiar" un poco el código...es lo que se pretende también, no solo dar un copia y pega, usar la lógica para entender un código ya hecho y así es como este "lío" de garabatos se va entendiendo...
Tienes razón con lo del title. Gracias.
En cuanto al alt, es cierto que si la imagen no se muestra podría suceder lo que dices, pero también es cierto que hay personas (invidentes por ejemplo) que usan programas de voz que lo que hacen es "leer" no "ver" y entonces cuanto más explicado mejor...no se, ya sabes como es esto, lo que para una cosa está bien, fastidia otra...
Gracias por tus apreciaciones!
Hola Rosita =D siempre agradecido por el trabajo que haces =D Gracias por todo de antemano.
Podrias ayudarme a poner en mi blog, los favicones exactmanente como los tienes en el escaparate =D te quedo rebueno =D Salu2
Surplus21 ¿Qué favicones? :O No tengo enlaces con favicon aquí...
Upsss =S esos iconos que tienes abajo de tus estadisticas =S lo siento.
Surplus21 Luego que te contesté pensé que si sería eso que yo llamo "mini-menú" :D
Enseguida voy a publicar como colocarlo así y de otra forma bastante interesante je,je.
Muchas graciass Rosita =D siempre traendonos novedades =D exitos =D
http://portaltodo.blogspot.com/2009/10/tu-favicon-en-portaltodo.html
Inserta tu favicon en portaltodo gratis
Publicar un comentario
Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).
Los comentarios están siendo moderados.
Comentar con el formulario antiguo