tutorial para blogspot

1° banner

Uno de los trucos que más me han pedido últimamente es el de poner Banners 125 x 125 en Blogger. Para el que no sabe, se trata de crear un cuadrado en el que podemos incluir banners de 125 x 125 pixeles (tal como tengo yo en la sidebar) y que se utilizan para hacer intercambios o bien para vender publicidad.

Poner banners 125 x 125 en Blogger no es difícil, y aquí veremos como hacer para tenerlos en nuestro blog.

La estructura básica de este cuadrado es la siguiente:

<div>
<h3>Patrocinadores</h3>

<a href='#' target='_blank' title=''><img border='0' height='125' src='http://i29.tinypic.com/2zgyk37.jpg' width='125'/></a>

<a href='http://videosbeta.net/' target='_blank' title='Los mejores videos de YouTube'><img border='0' height='125' src='http://img268.imageshack.us/img268/4972/barnervb.png' width='125'/></a>

<a href='http://quewallpapers.com' target='_blank' title='Wallpapers HD'><img border='0' height='125' src='http://i25.tinypic.com/2m34c2o.png' width='125'/></a>

<a href='http://www.humorizate.com.ar/' target='_blank' title='Humor Online'><img border='0' height='125' src='http://i450.photobucket.com/albums/qq230/vicarlone/bannernuevo.gif' width='125'/></a>

</div>

Este código otorgado creará el cuadrado para incluir 4 banners 125 x 125. Ahora debemos aprender qué es lo que necesitamos modificar para colocar el banner que nosotros queremos y que direccione al sitio deseado. Para ello vamos a analizar el código.

href=’#’
Indica hacia donde se dirige (a que sitio) cuando hacemos click. Por ello, debemos reemplazar # por la url del sitio de destino.

target=’_blank’
Indica que al hacer click sobre el banner 125 x 125 la url se abra en una nueva ventana del navegador.

title=’ ‘
Muy importante desde el punto de vista del SEO. Allí deberíamos introducir una palabra clave. Por ejemplo en el caso de este blog yo introduciría ‘Ayuda para Blogs’.

height=’125′ y width=’125′
Indican la altura y el ancho que llevará la imagen colocada, indicada en piexeles. Como vemos en este caso dejamos 125 en ambos porque queremos poner banners 125 x 125.

src=’http://i29.tinypic.com/2zgyk37.jpg&#8217;
Indica la url de la imagen que se mostrará, es decir la url del banner.

Habiendo visto el código y analizando cada uno de los elementos que lo componen ya pueden modificar el código a gusto para añadirlo en sus blogs.

Una vez que tenemos el código listo solo resta añadirlo en un elemento HTML de la sidebar de nuestro blog y ya tenemos los banners 125 x 125 en blogger.

Si te ha gustado este post, no dudes en mandar un comentaio para decirmelo

2° mensajes

Se trata de colocar un Mensaje

al Blog, el cual aparecerá solamente en el Home, y al cual daremos un aspecto diferente del resto del blog para que resalte. 

Es una forma de dar bienvenida a los usuarios y de recomendarles algunas cosas que creemos que le interesarán, a la vez de proporcionarles información breve acerca de los temas que trata el blog, o bien pueden usarlo para lo que crean necesario.

Para añadir el Mensaje de Bienvenida al blog debemos ir a la Edición HTML de la plantilla (Diseño –> Edición HTML) y buscamos el siguiente código:

<b:section class=’main’ id=’main’ showaddelement=’no’>
<b:widget id=’Blog1′ locked=’true’ title=’Entradas del blog’
type=’Blog’/>
</b:section>

y justo antes del mismo añadimos esta sección:

<b:if cond=’data:blog.url == data:blog.homepageUrl’>
<b:section class=’main’ id=’main-dos’
showaddelement=’yes’>
<b:widget id=’HTML50′ locked=’false’ title=”
type=’HTML’/>
</b:section>
</b:if>

Guardamos los cambios y ahora nos dirigimos a Diseño, donde veremos que aparece un gadget HTML nuevo (que acabamos de añadir al agregar el código anterior) en la parte principal del blog, tal como muestra esta imagen:

Hacemos click en “Editar” ese gadget y pegamos el código del Mensaje de Bienvenida, el cual puede ser algo así como este:

<div>
<h2>¡Bienvenido!</h2>

<img
src=”http://img155.imageshack.us/img155/3627/34283694.jpg”/&gt;
<p>Bienvenido a mi blog: VidaBlogger – Ayuda para
Blogs</p>
<p>Espero que lo que veas aquí sea de tu
agrado y pases un buen momento con nosotros.</p>
<p>¡Estás en tu casa! Por lo cual
puedes leer y comentar lo que quieras.</p>

<p>Si quieres puedes suscribirte a mi <a
href=”http://feeds2.feedburner.com/blogspot/hnBy”>feed</a&gt;
</p>

<p>Y si necesitas contactar conmigo, puedes enviarme un
<a
href=”mailto:TU-EMAIL@hotmail.com“>email</a></p>

</div>

Con estos pasos ya tenemos un Mensaje de Bienvenida, podemos dejarlo tal como esta o bien darle un poco más de estilo para que quede más bonito. Para ello nos dirigimos a Diseño y buscamos ]]></b:skin> y justo antes de eso pegamos este código:

.mensaje{background:#B7D3D9;padding: 10px;font-size: 14px;}
.mensaje h2{font-size: 22px; margin: 0 auto; color: #fff; font-weight:
bold;text-align: center; }
.mensaje a{font-weight: bold; color:#fff;text-decoration:underline;}

Si queremos cambiarle el color de fondo debemos modificar donde dicebackground:#B7D3D9 por el número del color que quieras (para saber los colores visita este post Generador de Colores) 

El resultado de todo lo que hemos hecho hasta aquí se verá de esta forma:

Como pueden ver, ese es un ejemplo de mensaje de bienvenida. Pueden escribir en él lo que quieran, lo mismo que cambiar la imagen que tiene de adorno (o sacarla si no quieren imágenes). 

Para cambiar la imagen solo editamos la parte que dice:

<img
src=”http://img155.imageshack.us/img155/3627/34283694.jpg”/&gt;

por: <img src=”URL-DE-TU-IMAGEN”/>

Espero que les sea de utilidad!

Si te ha gustado este post, no dudes en suscribirte en este blog

Advertisements

About trucos de club penguin

a mi me gusta jugar computadora y los videojuegos
This entry was posted in tutorial de blogs. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s