HTML, Etiquetas y Códigos en Blogger

Jornadas de Formación en T.I.C. I.E.S. Universidad Laboral de Albacete.
Marian
Domínguez
ETIQUETAS Y CÓDIGOS HTML PARA TU BLOG
Aquí hay algunas etiquetas y códigos html que pueden ser útiles para tu blog
(sustituye los textos en rojo por los tuyos):
• Para que una foto contenga un enlace (puede ser a una página web,
o a un archivo alojado en un servidor, por ejemplo una película flash):
<a href="http://dirección_que_quieres_enlazar" target="_blank" ><img

src="http://dirección_de_la_imagen.jpg" /></a>
Puedes ver el resultado aquí, haciendo clic en cualquier lugar de la imagen:
http://nosvemosenelblog.blogspot.com/2006/10/el-blog-de-la-uni.html
• Para que los enlaces se abran en una nueva ventana tienes que
añadir al final de la dirección URL esta etiqueta:
Por ejemplo:
"http://www.universidadlaboral.com"target="_blank"
Comprueba el efecto pinchando en cualquier enlace de la barra lateral de:
http://nosvemosenelblog.blogspot.com
• Para que aparezca una ventana explicativa cuando pases el ratón por
encima de una palabra, tienes que añadir esta etiqueta
<acronym title="texto explicativo">palabra que quieres explicar</acronym>
Para observar el efecto, coloca el ratón encima de cualquiera de las palabras en negrita de
esta entrada y espera un instante sin moverlo:
http://nosvemosenelblog.blogspot.com/2006/10/el-da-siguiente-la-noche-del-jueves.html
• Para ocultar la barra de Blogger:
Localiza el siguiente código en tu plantilla:
<style type="text/css">
Y a continuación pegas la siguiente etiqueta:
#b-navbar {visibility:hidden;}
1
Jornadas de Formación en T.I.C. I.E.S. Universidad Laboral de Albacete. Marian
Domínguez
• Para ocultar la barra de Blogger beta escribe el siguiente código en
la plantilla entre las etiquetas <head> y </head>
<style type="text/css">
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
</style>
• Para añadir un archivo mp3 y que aparezca en tu blog un

reproductor Windows Media Player tienes que añadir esta etiqueta,
sustituyendo la ruta en rojo por la de tu archivo (que previamente has subido
a un servidor de Internet):
<object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6"
id="WindowsMediaPlayer1"
width="224" height="44">
<param name="URL" ref value="http://ruta_de_tu_archivo.mp3">
<param name="rate" value="1">
<param name="balance" value="0">
<param name="currentPosition" value="0">
<param name="defaultFrame" value>
<param name="playCount" value="1">
<param name="autoStart" value="0">
<param name="currentMarker" value="0">
<param name="invokeURLs" value="-1">
<param name="baseURL" value>
<param name="volume" value="50">
<param name="mute" value="0">
<param name="uiMode" value="full">
<param name="stretchToFit" value="0">
<param name="windowlessVideo" value="0">
<param name="enabled" value="-1">
<param name="enableContextMenu" value="-1">
<param name="fullScreen" value="0">
<param name="SAMIStyle" value>
<param name="SAMILang" value>
<param name="SAMIFilename" value>
<param name="captioningID" value>
<param name="enableErrorDialogs" value="0">
</object>
Puedes ver un ejemplo en:
http://bloguni.blogspot.com/2006/11/por-fin-la-lluvia.html
2
Domínguez
• Para añadir un enlace a tu correo electrónico pega en el lugar que
quieras este código, cambiando lo que está en rojo:
<a href="mailto:tu_dirección_de_correo_electrónico">Contacto</a><br />
Puedes ver un ejemplo aquí:
http://bloguni.blogspot.com/2006/10/ya-estamos-aqu.html
• Y si prefieres que en el enlace al correo electrónico en lugar de texto

(contacto en el ejemplo anterior), aparezca una imagen (por ejemplo, un
sobre) pega en el lugar que quieras que aparezca la imagen este código,
sustituyendo, como siempre, lo que está en rojo:
<a href="mailto:tu_correo_electrónico" ><img src="http://dirección_de_tu_imagen"

/></a>
Puedes ver el resultado en la barra lateral de:
http://bloguni.blogspot.com/
• Para traducir y modificar el perfil que aparece en el blog:
localiza en la plantilla la etiqueta <$Blog MemberProfile$> que aparece entre  y 
Elimina dicha etiqueta y sustitúyela por esta otra, retocando todo lo que
quieras que aparezca y poniéndolo a tu gusto. Sustituye todo lo que está en
rojo por tus datos y enlaces, y lo que está en verde por los textos tal y como
a ti te gusten:
<div id="profile-container"><h2 class="sidebar-

title">Sobre mí</h2><dl class="profile-datablock"> <dt class="profile-img"><a
href="LA DIRECCIÓN DE TU PERFIL"> <img width="80" alt="Mi foto" height="60"
src="LA DIRECCIÓN DE TU FOTO.jpg"></a></dt> <dd class="profile-data">
<strong>Nombre</strong>TU NOMBRE </dd><dd class="profile-data">
<strong>Localización:</strong>TU UBICACIÓN </dd> </dl><p class="profile-
textblock"> TU DESCRIPCIÓN </p> <p class="profile-link"><a href="LA DIRECCIÓN
URL DE TU PROFILE">Ver mi perfil completo</a> </p></div>
Si no quieres que aparezca alguno de los datos, no tienes más que borrar el
código correspondiente. Por ejemplo: si no quieres que aparezca la foto,
borra
<img width="80" alt="Mi foto" height="60" src="LA DIRECCIÓN DE TU

FOTO.jpg"></a></dt>
3
Domínguez
Ten en cuenta que las etiquetas de apertura siempre van entre los signos <>
y las de cierre entre </>.
Por ejemplo: En el perfil de mi blog, sólo aparece una breve declaración de

intenciones y un enlace a mi perfil de Blogger. La etiqueta que he utilizado es
ésta, teniendo en cuenta que el texto en rojo es el que aparece en la pantalla
y el azul sólo aparece si paramos el ratón encima de la palabra mí:
<div id="profile-container"><h2 class="sidebar-title">Un lugar de encuentro para

intercambiar y compartir ideas, para comentar y aprender fuera de las aulas</h2>
<p class="profile-link"><a ref="http://www.blogger.com/profile/25038200"
target="_blank">Si quieres saber algo de <acronym title="Marian
Domínguez"><strong><b>mí</b></strong>...</acronym></a> </p>
</div>
Observa el resultado en:
http://nosvemosenelblog.blogspot.com
Para averiguar la dirección URL de tu perfil, sólo tienes que hacer clic en tu
perfil (about me) y copiar la dirección que aparece en la barra del navegador.
Será algo parecido a esto: http://www.blogger.com/profile/32923380
Fuentes consultadas:
http://elblogdelosblogs.blogspot.com/
http://nevertobenext.blogspot.com/
http://ayudaparatodos.blogspot.com/

HTML, Etiquetas y Códigos en Blogger

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML, Etiquetas y Códigos en Blogger

Transféré par

Droits d'auteur :

Formats disponibles

Jornadas de Formación en T.I.C. I.E.S. Universidad Laboral de Albacete.

<a href="http://dirección_que_quieres_enlazar" target="_blank" ><img

Puedes ver el resultado aquí, haciendo clic en cualquier lugar de la imagen:

Comprueba el efecto pinchando en cualquier enlace de la barra lateral de:

<acronym title="texto explicativo">palabra que quieres explicar</acronym>

• Para ocultar la barra de Blogger:

Localiza el siguiente código en tu plantilla:

Y a continuación pegas la siguiente etiqueta:

• Para añadir un archivo mp3 y que aparezca en tu blog un

Puedes ver un ejemplo en:

<a href="mailto:tu_dirección_de_correo_electrónico">Contacto</a><br />

Puedes ver un ejemplo aquí:

• Y si prefieres que en el enlace al correo electrónico en lugar de texto

<a href="mailto:tu_correo_electrónico" ><img src="http://dirección_de_tu_imagen"

Puedes ver el resultado en la barra lateral de:

• Para traducir y modificar el perfil que aparece en el blog:

localiza en la plantilla la etiqueta <$Blog MemberProfile$> que aparece entre <!--

<div id="profile-container"><h2 class="sidebar-

<img width="80" alt="Mi foto" height="60" src="LA DIRECCIÓN DE TU

Por ejemplo: En el perfil de mi blog, sólo aparece una breve declaración de

<div id="profile-container"><h2 class="sidebar-title">Un lugar de encuentro para

Observa el resultado en:

Vous aimerez peut-être aussi