Florwex

menú horizontal y vertical gratis

2008-01-28T17:27:00.000-05:00

En listamatic me he encontrado con muchos menúes horizontales y verticales gratuitos para todos los gustos.

Reducir tamaño de fotos online

2008-01-22T01:07:00.000-05:00

Internet nos provee de muchas herramientas que hacen más fácil nuestra vida. Una de ellas es la posibilidad de reducir (y en algunos casos aumentar) el tamaño de nuestras fotos. Aqui te dejo una lista de las mejores:

http://www.easycropper.com/

http://www.webresizer.com/es/

http://www.pixizer.com/

http://www.shrinkpictures.com/

http://pixenate.com/

http://superpatanegra.com/

Además puedes ver estas otras:

SnipShot (extenciones para Internet Explorer y Firefox)
Mypictr
Picresize 2.0

Y si no has quedado aún satisfefcho, visita el blog fullfotolog en el cual encontrarás una lista enorme.

como borrar los comentarios en blogger

2008-01-21T15:51:00.000-05:00

A veces Adsense te cancela la cuenta porque sus robots detectan "palabras" no permitidas. Y si el comentario con palabras soeces, por ejemplo, ya está publicado, ¿cómo lo borramos?.

No pené que fuera tan fácil hacerlo. En los siguientes hilos encontrarás la respuesta:

Bloggerxero

Helpblogger

Nueva Plantilla Dekada para Blogger

2008-01-18T16:25:00.000-05:00

Si tienen alguna duda al instalar la plantilla, sólo pregunten.

Demo
Download

El Escaparate de Rosa: un superblog

2008-01-08T20:36:00.000-05:00

Tal como lo digo, http://elescaparatederosa.blogspot.com/ se ha convertido en uno de los blogs de ayuda para bloggers más visitados de la red. En él podrás encontrar muchos trucos que te servirán para modificar tus plantillas blogger. Además Rosa te enseña muchísimos "tips and tricks" esenciales para todo blogger.

Blogandweb: parada obligada para bloggers

2008-01-06T22:45:00.000-05:00

blogandweb es un blog que visito frecuentemente porque gracias a su creador, Francisco, he aprendido más de blogs que de otra web (si mal no recuerdo). Por eso lo recomiendo mucho.

Infectedfx, un sitio obligatorio a la hora de diseñar webs

2008-01-06T22:40:00.000-05:00

Infectedfx es un blog con los mejores consejos para el diseño web. No puedes perdértelo. Aprendí muchas cosas con él.

Freecsstemplates.org: excellente sitio de plantillas gratuitas

2008-01-06T22:32:00.000-05:00

freecsstemplates.org es un buen sitio de donde puedes descargar plantillas gratis tanto para el sistema wordpress como para páginas web. De hecho, algunas de ellas he usado para adaptarlas a blogger.

40 SITIOS PARA COMPARTIR FOTOS

2007-12-16T19:33:00.000-05:00

Los servicios de alojamientode de imágenes son extremadamente populares y, miles de fotos cada minuto están cargándose en Flickr. Si bien los primeros que mencionamos obtenienen la mayor parte de la atención, hay varias opciones disponibles. Estos servicios se han convertido en una buena opción para los propietarios de sitios web y los bloggers, ya que se pueden integrarlos en su sitio web para ahorrar espacio de disco y ancho de banda. Aquí hay más de 40 opciones:

Zoto
Phanfare
Kodak Image Gallery
Epson Photo Center
Flukiest
PhotoWorks
Funtigo
Snapfish
BubbleShare
pxSpot
Woophy
Webshots
MyPhotoAlbum
Slide.com
Photo.net
23hq.com
Smilebox
dotPhoto
Scrapbookpictures.com
PBase.com
Picasa
Pickle
RockYou.com
Fotothing
Care2.com
Opera Mini
Album Town
MySharedPhotos
Byte Gallery
MyImageHosting ImageUploads.net
iWebPhoto
Pix8.net
Photo Machine PhotoCollection MyPicGallery
PhotoThru.com
Picture Village
myLivingTree
Saved Memories
MonkeyView

Vía: Vandelaydesign

ICONO GRATIS EN DRYICONS

2007-12-16T19:26:00.000-05:00

DryIcons.com te ofrece gratuitamente estos atractivos íconos.

BORDE DE LA IMAGEN DEL POST

2007-12-12T19:52:00.000-05:00

Podemos personalizar el borde que rodea las imagenes de nuestros post. O podemos eliminarlo si no la deseamos.

Para ello trabajaremos con esta imagen:

Eliminar el borde:

Buscaremos esta parte del código:


.post img {
padding:4px;
border:1px solid $bordercolor;
}

Donde dice "border:1px" borramos el valor 1 y en su lugar escribimos 0:


.post img {
padding:4px;
border:0px solid $bordercolor;
}

Y el resultado es este:

Ahora juguemos con las otras etiquetas y sus atributos:

En padding ponemos 0 (cero) y le damos al borde un valor de 8. Borramos "bordercolor" y le damos un color verde con ayuda de colorcop.


.post img {
padding:0px;
border:8px solid #77AA77;
}

Resultado:

Ahora, en lugar del atributo "solid" le damos "dotted" para generar líneas punteadas. Además cambiamos de color a la línea.

.post img {
padding:0px;
border:8px dotted #E0DCC5;
}

Resultado:

Espero que les sirva.

CAMBIAR LA IMAGEN DEL HEADER DE ESTA PLANTILLA

2007-11-23T19:30:00.000-05:00

Hoy intentaremos cambiar la imagen del header de la plantilla que uso. Si no sabes donde descargarla, te dejo el enlace de Blog And Web para que la encuentres.

El primer paso será buscar esta parte del código de la plantilla.


/*-- (Cabecera) --*/

#header-wrapper {
background: #000 url(http://4.bp.blogspot.com/_Zuzii37VUO4/RrlxrqYSVGI/AAAAAAAACAk/kA7e4MVAwWY/s1600/head-bg.gif) repeat-x;
height: 126px;
position: relative;
color: #D16683;

La parte en rojo es la dirección donde está alojada la imagen, que es esta:

La razón por la que ocupa todo el ancho del header es el código "repeat-x;" que indica que esta imagen debe repetirse horizontalmente.

Para reemplazarla tenemos dos opciones:

La primera: reemplazarla por una imagen similar a ésta, la cual debe tener las mismas medidas: 59 x 126. Para diseñarla recomiendo StripeGenerator.

La segunda: buscar una imagen que tenga las dimensiones del header, es decir, 1003 px de largo por 126 px de altura o ancho.

Para el primer caso usaré esta imagen:

Alojo la imagen en un servidor (imageshack), reemplazo la url de la imagen, y el resultado es este:

Demo

En el segundo caso usaremos la siguiente imagen:

Reemplazo la url de la imagen, borro "repeat-x;" y en su lugar debe decir: "no-repeat;"


/*-- (Cabecera) --*/

#header-wrapper {
background: #000 url(http://4.bp.blogspot.com/_Zuzii37VUO4/RrlxrqYSVGI/AAAAAAAACAk/kA7e4MVAwWY/s1600/head-bg.gif)repeat-x;
height: 126px;
position: relative;
color: #D16683;

Debe quedar así:


/*-- (Cabecera) --*/

#header-wrapper {
background: #000 url(http://4.bp.blogspot.com/_Zuzii37VUO4/RrlxrqYSVGI/AAAAAAAACAk/kA7e4MVAwWY/s1600/head-bg.gif)no-repeat;
height: 126px;
position: relative;
color: #D16683;

Y el resultado final es este:

Demo

PLANTILLA BLOGY EN 3 COLUMNAS

2007-11-23T18:48:00.000-05:00

Pensando en la gran demanda que tienen las plantillas en 3 columnas, hice una pequeña modificacion de la plantilla blogy iPlantilla de BlogAndWeb para añadirle un nueva sidebar.

Demo

Descarga en xml

Descarga en zip

Esta es la plantilla original de blogAndWeb en 2 columnas:

Demo

Descarga en xml

Descargar en zip

No olvides configurar la fecha del la plantilla en la opcion "Formato" de "Configuración", de acuerdo a la siguiente imagen:

PLANTILLA EXPERIENCE PARA BLOGGER

2007-11-20T22:42:00.000-05:00

Espero que esta plantilla sea de tu agrado. La adapté inspirándome en la plantilla experience de Freecsstemplates.

Demo

Descarga en xml

Descarga en zip

Para personalizar el menú debes entrar a la Edición html de la plantilla, expandir plantillas de artilugios y buscar el siguiente código:

<div id='menu'> <ul> <li class='current_page_item'><a href='http://www.blogger.com/'>Homepage</a></li> <li><a href='#'>Products</a></li> <li><a href='#'>Services</a></li> <li><a href='#'>About Us</a></li> <li><a href='#'>Contact Us</a></li> </ul> </div>
Ahora sólo falta escribir las url en lugar de # , además los nombre de tus enlaces.

Suerte!!

BELLOS ICONOS RSS

2007-11-17T21:05:00.000-05:00

En http://www.nyssajbrown.net/ han publicado estos bellos íconos gratis.

Descarga RSS icon sin reflejo

Descarga RSS icon con reflejo

ATRACTIVO MENU HORIZONTAL

2007-11-11T12:44:00.000-05:00

CSS Library ha diseñado este menú que tiene la peculiaridad de ser dinámico.

Para instalarlo pega este código en tu hoja de estilos (después de la etiqueta


<head>

)


<style type="text/css">

/*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */

/*Posted to: Dynamic Drive CSS Library (http://www.dynamicdrive.com/style/) */

.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(media/menur_bg.gif) repeat-x; /*tab background image path*/
height: 46px;
list-style: none;
}

.glossymenu li{
float:left;
}

.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer; 
}

.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(media/menur_hover_left.gif) no-repeat; /*left tab image path*/
background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(media/menur_hover_right.gif) no-repeat right top; /*right tab image path*/
}

</style>

Luego, el siguiente código debes pegarlo en la zona donde quieres que vaya el menú. Prueba con pegarlo después de la etiqueta

</body>

<ul class="glossymenu">

 <li class="current"><a href="http://www.dynamicdrive.com/"><b>Home</b></a></li>

 <li><a href="http://www.dynamicdrive.com/style/"><b>CSS</b></a></li>

 <li><a href="http://www.dynamicdrive.com/forums/"><b>Forums</b></a></li> 

 <li><a href="http://tools.dynamicdrive.com"><b>Webmaster Tools</b></a></li> 

 <li><a href="http://www.javascriptkit.com/"><b>JavaScript</b></a></li> 

 <li><a href="http://www.cssdrive.com"><b>Gallery</b></a></li> 

</ul>

ICONOS FIREFOX

2007-11-11T12:20:00.000-05:00

En un post de Dr. Web Blog encontré este artículo de iconspack que tiene una interesante colección de íconos Firefox.

REDONDEAR LAS ESQUINAS DE UNA IMAGEN

2007-11-11T11:33:00.000-05:00

Para que no te "mates" intentando redondear las esquinas de una imagen, ezroundedcorners ha creado para ti un recurso online que te permite hacerlo automaticamente. Sólo le das a examinar, eliges el fondo que gustas y finalmente "round my corners" o "redondear mi esquina".

GENERADOR DE SMILES

2007-11-11T11:16:00.000-05:00

Los smiles son esas figuritas animadas como las que ves abajo. En ezsmiley puedes encontrar un generador que en pocos pasos te permite crear los tuyos dando rienda suelta a tu imaginación.

PLANTILLA FROZENAGE PARA BLOGGER

2007-11-11T10:28:00.000-05:00

Con algunas pequeñas modificaciones, logré adaptar esta bonita plantilla diseñada por freecsstemplates. Bueno, lo que me gusta de ella es que tiene un atractivo menú horizontal estilo web 2.0, un buscador interno, además de poder configurarse la imagen.

Demo
Descargar en zip
Descargar en xml

Configurar el menú

Entra a Edición html y busca el siguiente código:


<div id='menu'>

<ul>

<li class='first'><a accesskey='1' href='http://frozenage.blogspot.com/' title=''>Home</a></li>

<li><a accesskey='2' href='#' title=''>Articles</a></li>

<li><a accesskey='3' href='#' title=''>Blogs</a></li>

<li><a accesskey='4' href='#' title=''>About Us</a></li>

<li><a accesskey='5' href='http://www.blogger.com/' title=''>Acceder</a></li>

<li><a accesskey='6' href='#' title=''>RSS</a></li>

</ul>

Reemplaza todo lo que está en rojo por tus propios enlaces.

Configurar imagen

En Edición html busca el siguiente código:


<div id='banner'><img alt='' height='147' src='http://img229.imageshack.us/img229/5137/img04bc7.jpg' width='960'/></div>

Reemplaza por tu imagen.

Te recuerdo que esta plantilla está protegida por derechos de autor, no remuevas los créditos.

PLANTILLA PLAIN OFFICE PARA BLOGGER

2007-11-08T22:38:00.000-05:00

Les presento una plantilla muy sencilla creada por freecsstemplates, ideal para aquellos que se centran más en el contenidos de sus blogs.

Demo

Download zip

Download xml

EFECTOS DE TEXTO EN PHOTOSHOP

2007-11-01T15:14:00.000-05:00

La "moda" web 2.0 nos obliga a aprender habilidades para aplicar efectos de texto. Microsiervos ha publicado 80 efectos que puedes darle a tus textos.

The Best 80 Photoshop Text Effects on the Web es una recopilación de tutoriales para crear efectos de texto utilizando Photoshop. En algunos casos se incluyen archivos de las acciones o los originales utilizados en el tutorial.

Más enlaces para efectos de texto:

Desarrolloweb.com
Solophotoshop.com
Cristallab.com
Mastutoriales.com
Webstudio.com.ar
Flashgamedesign
Worth1000.com

FONDO ESTÁTICO EN EL BODY DE BLOGGER

2007-10-20T18:28:00.000-05:00

1. Con imagen de fondo.

DEMO.

Busca la etiqueta:


body {
background: $bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Borra lo que está en rojo y reemplaza por todo esto:


background-image: url(http://img292.imageshack.us/img292/5072/estaticopn4.jpg);
background-repeat: no-repeat;
background-attachment : fixed;
background-position: top center;

La parte azul es la dirección de la imagen. Debes prepararla, de acuerdo a las dimensiones del blog, en un formato liviano (jpg) para facilitar la carga.

2. Con "pattern" de fondo.

DEMO

En este caso deberás reemplazar lo que está en rojo por este código:


background-image: url(http://img475.imageshack.us/img475/1051/54191607sm9.png);
background-repeat: repeat;
background-attachment : fixed;

Lo que está en azul es la dirección del pattern. Reemplázalo por el tuyo.

El fondo con pattern es válido en el body sólo si a la etiqueta #outer-wrapper le damos un fondo, por ejemplo blanco, donde irá todo el contenido. Para ello, busca:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Y déjala así

#outer-wrapper {
background-color: #FFFFFF;
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

La parte en rojo indica que le hemos agregado un fondo blanco al contedor.

DEMO

PERSONALIZAR COLORES EN LA BARRA DE DESPLAZAMIENTO "SCROLLBAR"

2007-10-15T17:04:00.000-05:00

Icónico ha creado una herramienta online que te permitirá personalizar los colores de la barra de desplazamiento de la derecha de tu blog. El manejo es muy sencillo: elijes los colores que te gustan y agregas el código css entre las etiquetas "body".

PLANTILLA INDUSTRIAL PARA BLOGGER

2007-10-11T14:29:00.000-05:00

Plantilla diseñada por freecsstemplates.org adaptada para blogger por RecursosEnMiBlog. La característica principal es las tres columnas en diseño de tonos naranjas.

Para la instalación completa, recuerda cambiar los enlaces (en rojo) por los tuyos.
<div id='menu'> <ul id='main'> <li class='current_page_item'><a href='http://tublog.blogspot.com/'>Inicio</a></li> <li><a href='http://www.blogger.com/'>Acceder</a></li> <li><a href='http://tublog.blogspot.com/'>Música Gratis</a></li> <li><a href='http://tublog.blogspot.com/'>Chicas</a></li> <li><a href='mailto:tucorreo@yahoo.es'>Contáctanos</a></li> </ul> <ul id='feed'> <li><a href='http://tufeed.blogspot.com/feeds/posts/default'>Entradas RSS</a></li> <li><a href='http://tufeed.blogspot.com/comments/posts/default'>Comentarios RSS</a></li> </ul> </div>

Ver la plantilla en blog

Descargar en xml