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

1

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;}


2

• 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

3

• 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>


4

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

Documents