FONDO ESTÁTICO EN EL BODY DE BLOGGER

10.20.2007

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"

10.15.2007

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

10.11.2007

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

PLANTILLA LOTTER PARA BLOGGER

Una nueva plantilla adaptada para blogger desde el diseño original de Worldpress.it que realizó Graziano.



Ver plantilla en blog

Descarga en xml

BORRAR EL BORDE DE LAS IMAGENES EN LA PLANTILLA MÍNIMA DE BLOGGER

10.09.2007

Ahora que muchos estamos aprendiendo a "manosear" el código html y css de nuestras plantillas blogger, voy a enseñarles un truquillo que es posible que muchos lo sepan. Bueno, lo hago para los principiantes especialmente.

Por experiencia propia les digo que la plantilla desde la cual podemos crear nuevas plantillas es la plantilla mínima o blanca. Pues, cuando subes una imagen, verás un borde que rodea a dicha imagen. Dependiendo de tu gusto, verás que dicho borde no siempre es útil al momento de publicar imágenes con efecto reflejo o sombra, por lo cual surge la necesidad de desaparecerlo.


Esta es una imagen en la plantilla mínima normal (con borde).



Y esto es lo que pretendemos lograr:

Para ello simplemete vamos hasta la siguente línea en nuestra plantilla:

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


"border" nos indica que el borde que rodea a la imagen es de 1 pixel de ancho. podriamos poner 2, 3, 4 o más píxeles a manera de prueba para ver su resultado. Pero como queremos desaparecerlo, lo dejamos en "0"

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




Guardamos y listo!!!

MENU HORIZONTAL GRATUITO

Para aquellos amigos que buscan menúes horizontales, 13styles tiene lagunos muy vistosos y gratuitos. Para facilitarte su intalación aparecen alli todos los códigos. Aquí algunos modelos:





Para instalarlos en blogger, debes hacer lo siguiente (Ojo: debes personalizar el color para que se adecúe a tu plantilla) :

Tomaremos el código del primer menú que es este:

Lo pegamos despues de la etiqueta <head>; o sea, así:

<head>
&lt;style type="text/css">
ul#simple-menu{list-style-type:none;width:100%;position:relative;height:27px;
font-family:"Trebuchet MS",Arial,sans-serif;font-size:13px;font-weight:bold;
margin:0;padding:11px 0 0 0;}

ul#simple-menu li{display:block;float:left;
margin:0 0 0 4px;height:27px;}

ul#simple-menu li.left{margin:0;}

ul#simple-menu li a{display:block;float:left;color:#fff;
background:#4A6867;line-height:27px;text-decoration:none;
padding:0 17px 0 18px;height:27px;}

ul#simple-menu li a.right{padding-right:19px;}

ul#simple-menu li a:hover{background:#2E4560;}

ul#simple-menu li a.current{color:#2E4560;background:#fff;}

ul#simple-menu li a.current:hover{color:#2E4560;background:#fff;}
</style>


Luego, expande las plantillas de artilugios y busca las siguientes líneas:

      <div class='descriptionwrapper'>
        <p class='description'><span><data:description/></span></p>
      </div>
    </div>
  </b:if>
</b:includable>
</b:widget>
</b:section>


Pega inmediatamente después el siguiente código:

<ul id="simple-menu">
<li><a href="http://recursosenmiblog.blogspot.com/" title="Home" class="current">Home</a></li>
<li><a href="http://recursosenmiblog.blogspot.com/" title="Resources">Resources</a></li>
<li><a href="http://recursosenmiblog.blogspot.com/" title="Inspiration">Inspiration</a></li>
<li><a href="http://recursosenmiblog.blogspot.com/" title="Community Forums">Community Forums</a></li>
<li><a href="http://recursosenmiblog.blogspot.com/" title="About Us">About Us</a></li>
<li><a href="http://recursosenmiblog.blogspot.com/" title="Contact Us">Contact Us</a></li>
</ul>

Guarda y listo. No olvides cambiar las url (en rojo)por las tuyas.

Finalmente, la forma cómo se vusialice el resultado, dependerá del modelo de la plantilla que usas, motivo por el cual debes darle los ajustes necesarios en el header.

GENERADOR DE EFECTO REFLEJO

A través de Dr. Web Weblog acabo de enterarme que existe un nuevo generador de imágenes con efecto reflejo que se llama reflectionmaker. Su manejo no puede ser más fácil: insertas la url de la imagen o la buscas en tu pc, le das a generar, y listo.


BLOCKQUOTE CON ESTILO

10.07.2007

Cada día miles de nuevos bloggers se suman a este universo y están ávidos por aprender trucos que mejoren el aspecto de su blog. Un blog es un universo pequeño el cual todo blogger debe comprender aunque sea básicamente.

Cuando se trata de hacer atractivos bloques de texto se cree que el uso de las comillas es el único a usarse, aunque es el elemento más difundido. En freakgroup encontré un enlace que me llevó a css-tricks en el cual encuentro una guía interesante a la hora de hacer más bellos los benditos blockquotes. Aquí los ejemplos.





PLANTILLAS BLOGGER DE KENDAHLIN

10.05.2007

Kendahlin ha diseñado una plantilla muy atractiva de dos columnas para blogger. Además esta misma plantilla la puedes descargar en 5 colores distintos.

Las plantillas que aparecen abajo son plantillas para web. Pero puedes descargar en este enlace las plantillas para la plataforma BLOGGER.






Plantilla Azul CrystalX

Download: CrystalX (31 KB)
Demo: CrystalX









Plantilla verde

Download: EmeraldX (43 KB)
Demo: EmeraldX








Plantilla Negra NegativeX

Download: NegativeX (51.5 KB)
Demo: NegativeX








Plantilla Roja RubyX

Download: RubyX (29.2 KB)
Demo: RubyX







Plantilla Gris ObsidianX

Download: ObsidianX (48.1 KB)
Demo: ObsidianX

PLANTILLA DARKWATER PARA BLOGGER

La plantilla darkwater de fondo fijo fue diseñada originalmente por Theme Viewer. En esta oportunidad fue adaptada para blogger. Su característica principal es el fondo azul marino fijo, ademas de poseer tres columnas.

Para instalarla correctamente debes añadirle un widget en la opción "añadir elementos de página-html/javascript" a fin de agregarle el ícono RSS en la sidebar derecha. (aunque esta añadidura podría ser opcional.

El código es este:

<br/><br/>
<center>
<a href="http://tublog.blogspot.com/feeds/posts/default"><img src="http://img528.imageshack.us/img528/8452/subrsszq2.gif "/></a>
</center>


No olvides poner la direccion del feed de tu blog en la parte en rojo.

50 TUTORIALES PARA DISEÑAR LOGOS

10.04.2007

Quieres crear logos para tu blog y no sabes cómo? Pues en elogodesign existen 50 tutoriales que te explican paso a paso cómo hacerlos. No puedes perdértelos. Ya no hay pretexto para no embellecer tu blog.