CAMBIAR LA IMAGEN DEL HEADER DE ESTA PLANTILLA

11.23.2007

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

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

11.20.2007

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

11.17.2007

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


Descarga RSS icon sin reflejo

Descarga RSS icon con reflejo

ATRACTIVO MENU HORIZONTAL

11.11.2007

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

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

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

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

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

11.08.2007

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

11.01.2007

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