De nuestros auspiciantes recibimos una entretenida infografía sobre la historia de internet, junto a hechos de la cultura popular. Nos pareció muy gráfica, así que la compartimos con ustedes.
LO QUE NECESITAS:
- Teléfono móvil con cámara
- Cuenta de Blogger (www.blogger.com gratis) o una cuenta de Google (www.google.com)
- Algo sobre lo que vale la pena escribir (opcional)
¿Alguna vez has encontrado algo a tu alrededor y pensaste: "Eso sería una gran entrada en el blog", y luego lo olvidaste por no tener una PC cerca?
O tal vez fueron en un viaje sin su ordenador portátil y querían poner al día la gente de la vuelta de casa sin tener que llamar a cada persona individualmente.
Con un nombre como "moblog"-tu, puedes enviar texto e imágenes a tu blog al instante, directamente desde su teléfono celular.
Te mostramos cómo empezar con libre servicio móvil de Blogger
Envía un mensaje - que puede ser una foto, un poco de texto, o ambos - a go@blogger.com. Nosotros nos encargamos del resto. En otras palabras, la auto-disposición un nuevo blog y publicar el mensaje. Es así de simple.
Aquí está cómo iniciar un blog móvil:
1. Envía un SMS a BLOGGR con el contenido REGISTER para crear tu móvil. El texto y / o foto en su mensaje se subirán a ese blog de inmediato. Vamos a un mensaje con la dirección, (para que pueda visitar su nuevo blog en la web) y una muestra (por lo que puede reclamar su blog y tener acceso a ella de su cuenta).
2. OPCIONAL - Si tienes ganas de cambiar algo en tu blog móvil nuevo o si ya tienes una cuenta de Blogger y no los puestos para ir a su blog existente, puede acceder a go.blogger.com e introducir el token que le enviamos a su teléfono. A continuación, tendrás la opción de reclamar su nuevo blog móvil y fusionarla con su blog existente.
Nota para los usuarios cuya dirección de blog no contiene blogspot.com: Una vez que hacer el cambio ya mencionado, los nuevos puestos móviles se publicará en el blog elegido, pero puestos móviles publicados antes de que el interruptor no se moverá de forma automática.
Texto extraido del blog Crónicas Microsemióticas.
Un detalle importante en el posicionamiento de un sitio es la relevancia de los enlaces que apuntan hacia él.
No es lo mismo encontrarse en medio de una lista de links sin relación entre ellos o en sitios de escaso contenido que ubicarse en espacios especializados, con alto page rank (aunque esto puede ser discutible últimamente) y en constante actualización.
Como la mención o ubicación en sitios bien posicionados ya depende de los contactos (o presupuesto) de cada uno, de lo que me voy a ocupar aquí es de se pueda sacar el mayor provecho a estos enlaces, en términos de resultados de búsquedas.
- Exclusión de enlaces.
En primer lugar es necesario asegurarnos de que los enlaces no están excluídos de la “vista” de los robots (arañas o programas rastreadores) de los motores de búsqueda. En un principio, muchos blogs impulsaron estrategias de exclusión para evitar que el spam en los comentarios afectara negativamente su posicionamiento, además de no “regalar” backlinks a sitios no aprobados. Para esto, la mayoría de los buscadores (Google, su creador, a la cabeza) implementaron el atributo “nofollow” (no seguir). El código es el siguiente:
<a href="http://sitioweb.com" rel="nofollow">
Si estás dudando de la ayuda que te está dando un amigo blogger para mejorar tu situación en las búsquedas, esto es lo primero que tenés que tener en cuenta.
- Título del enlace.
Un atributo muy útil que nos deja el HTML es la etiqueta “title”. Si bien no todos los navegadores la soportan (especialmente los más antiguos), es lo primero que “lee” la araña del buscador. Sintaxis:
<a href="http://sitioweb.com"
title="La mejor web de optimización">
Un título correcto relacionará inmediatamente las etiquetas (tags) con el sitio de destino, por lo que su elección debe ser cuidadosa, específica y concreta (preferentemente no superar las dos o tres palabras).
- Etiquetas importantes.
En primer lugar encontramos los encabezados y títulos principales:
<h1>, <h2>, <h3>…
<title> (que aparece una única vez en una página).
Y un escalón más abajo tenemos:
<b>, <i>, <img>, <u>, <meta>
En el caso de <img> (etiqueta de imágenes), tenemos dos elementos a tener en cuenta: alt (texto alternativo, que no solo es obligatorio para los estándares HTML, sino que orienta a los buscadores de imágenes) y title (optativo, cumple la misma función que dentro de un link). La sintaxis es
<img src=”http://sitioweb.com/imagen.jpg”
alt=”Nombre” title=”Título de la imagen”>
Una buena combinación de alt y title facilita y orienta la búsqueda, como se puede suponer.
- Etiquetas negativas.
Y lo más importante a la hora de colocar enlaces: hacerlo fuera de las etiquetas que son tomadas negativamente por los buscadores. Se trata del uso de marcos, algo que ha vuelto (desgraciadamente) a sitios populares (Facebook, Digg) o a acortadores de URL. Las etiquetas a evitar son:
Más información sobre SEO y web 2.0.<frame>, <frameset>
Una opción sencilla es hacerlo a través de Javascript, que permite usar una serie de imágenes temporizadas y botones de selección, tal como se aprecia en la página principal del Portal.
A continuación está el código original, tal como se usa en nuestro sitio. Simplemente hay que reemplazar al final la dirección de cada una de las imágenes (con el formato: http://www.sitio.com/imagen_1.jpg), donde el texto aparece en rojo.
<script type="text/javascript">
//==================================================
function slide(src,link,text,target,attr) {
this.src = src;
this.link = link;
this.text = text;
this.target = target;
this.attr = attr;
if (document.images) {
this.image = new Image();
}
this.loaded = false;
//--------------------------------------------------
this.load = function() {
if (!document.images) { return; }
if (!this.loaded) {
this.image.src = this.src;
this.loaded = true;
}
}
//--------------------------------------------------
this.hotlink = function() {
var mywindow;
if (!this.link) return;
if (this.target) {
if (this.attr) {
mywindow = window.open(this.link, this.target, this.attr);
} else {
mywindow = window.open(this.link, this.target);
}
if (mywindow && mywindow.focus) mywindow.focus();
} else {
location.href = this.link;
}
}
}
//==================================================
// slideshow object
//==================================================
function slideshow( slideshowname ) {
this.name = slideshowname;
this.repeat = true;
this.prefetch = -1;
this.image;
this.textid;
this.textarea;
this.timeout = 7000;
this.slides = new Array();
this.current = 0;
this.timeoutid = 0;
//--------------------------------------------------
this.add_slide = function(slide) {
var i = this.slides.length;
if (this.prefetch == -1) {
slide.load();
}
this.slides[i] = slide;
}
//--------------------------------------------------
this.play = function(timeout) {
this.pause();
if (timeout) {
this.timeout = timeout;
}
if (typeof this.slides[ this.current ].timeout != 'undefined') {
timeout = this.slides[ this.current ].timeout;
} else {
timeout = this.timeout;
}
this.timeoutid = setTimeout( this.name + ".loop()", timeout);
}
//--------------------------------------------------
this.pause = function() {
if (this.timeoutid != 0) {
clearTimeout(this.timeoutid);
this.timeoutid = 0;
}
}
//--------------------------------------------------
this.update = function() {
if (! this.valid_image()) { return; }
if (typeof this.pre_update_hook == 'function') {
this.pre_update_hook();
}
var slide = this.slides[ this.current ];
var dofilter = false;
if (this.image &&
typeof this.image.filters != 'undefined' &&
typeof this.image.filters[0] != 'undefined') {
dofilter = true;
}
slide.load();
if (dofilter) {
if (slide.filter &&
this.image.style &&
this.image.style.filter) {
this.image.style.filter = slide.filter;
}
this.image.filters[0].Apply();
}
// Update the image.
this.image.src = slide.image.src;
if (dofilter) {
this.image.filters[0].Play();
}
this.display_text();
if (typeof this.post_update_hook == 'function') {
this.post_update_hook();
}
if (this.prefetch > 0) {
var next, prev, count;
next = this.current;
prev = this.current;
count = 0;
do {
if (++next >= this.slides.length) next = 0;
if (--prev < 0) prev = this.slides.length - 1;
// Preload the slide image
this.slides[next].load();
this.slides[prev].load();
} while (++count < this.prefetch);
}
}
//--------------------------------------------------
this.goto_slide = function(n) {
if (n == -1) {
n = this.slides.length - 1;
}
if (n < this.slides.length && n >= 0) {
this.current = n;
}
this.update();
}
//--------------------------------------------------
this.goto_random_slide = function(include_current) {
var i;
if (this.slides.length > 1) {
do {
i = Math.floor(Math.random()*this.slides.length);
} while (i == this.current);
// Display the slide
this.goto_slide(i);
}
}
//--------------------------------------------------
this.next = function() {
if (this.current < this.slides.length - 1) {
this.current++;
} else if (this.repeat) {
this.current = 0;
}
this.update();
}
//--------------------------------------------------
this.previous = function() {
if (this.current > 0) {
this.current--;
} else if (this.repeat) {
this.current = this.slides.length - 1;
}
this.update();
}
//--------------------------------------------------
this.shuffle = function() {
var i, i2, slides_copy, slides_randomized;
slides_copy = new Array();
for (i = 0; i < this.slides.length; i++) {
slides_copy[i] = this.slides[i];
}
slides_randomized = new Array();
do {
i = Math.floor(Math.random()*slides_copy.length);
slides_randomized[ slides_randomized.length ] =
slides_copy[i];
for (i2 = i + 1; i2 < slides_copy.length; i2++) {
slides_copy[i2 - 1] = slides_copy[i2];
}
slides_copy.length--;
} while (slides_copy.length);
this.slides = slides_randomized;
}
//--------------------------------------------------
this.get_text = function() {
// This method returns the text of the current slide
return(this.slides[ this.current ].text);
}
//--------------------------------------------------
this.get_all_text = function(before_slide, after_slide) {
all_text = "";
for (i=0; i < this.slides.length; i++) {
slide = this.slides[i];
if (slide.text) {
all_text += before_slide + slide.text + after_slide;
}
}
return(all_text);
}
//--------------------------------------------------
this.display_text = function(text) {
if (!text) {
text = this.slides[ this.current ].text;
}
if (this.textarea && typeof this.textarea.value != 'undefined') {
this.textarea.value = text;
}
if (this.textid) {
r = this.getElementById(this.textid);
if (!r) { return false; }
if (typeof r.innerHTML == 'undefined') { return false; }
// Update the text
r.innerHTML = text;
}
}
//--------------------------------------------------
this.hotlink = function() {
this.slides[ this.current ].hotlink();
}
//--------------------------------------------------
this.save_position = function(cookiename) {
if (!cookiename) {
cookiename = this.name + '_slideshow';
}
document.cookie = cookiename + '=' + this.current;
}
//--------------------------------------------------
this.restore_position = function(cookiename) {
if (!cookiename) {
cookiename = this.name + '_slideshow';
}
var search = cookiename + "=";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search);
// if cookie exists
if (offset != -1) {
offset += search.length;
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1) end = document.cookie.length;
this.current = parseInt(unescape(document.cookie.substring(offset, end)));
}
}
}
$html = "n";
// Loop through all the slides in the slideshow
for (i=0; i < this.slides.length; i++) {
slide = this.slides[i];
$html += '<P>';
if (slide.link) {
$html += '<a href="' + slide.link + '">';
}
$html += '<img src="' + slide.src + '" ALT="FINCA International">';
if (slide.link) {
$html += "</a>";
}
if (slide.text) {
$html += "<BR>n" + slide.text;
}
$html += "</P>" + "nn";
}
// Make the HTML browser-safe
$html = $html.replace(/&/g, "&" );
$html = $html.replace(/</g, "<" ); $html = $html.replace(/>/g, ">" );
return('<pre>' + $html + '</pre>');
}
//==================================================
// Private methods
//==================================================
//--------------------------------------------------
this.loop = function() {
if (this.current < this.slides.length - 1) {
next_slide = this.slides[this.current + 1];
if (next_slide.image.complete == null || next_slide.image.complete) {
this.next();
}
} else { // we're at the last slide
this.next();
}
// Keep playing the slideshow
this.play( );
}
//--------------------------------------------------
this.valid_image = function() {
// Returns 1 if a valid image has been set for the slideshow
if (!this.image)
{
return false;
}
else {
return true;
}
}
//--------------------------------------------------
this.getElementById = function(element_id) {
if (document.getElementById) {
return document.getElementById(element_id);
}
else if (document.all) {
return document.all[element_id];
}
else if (document.layers) {
return document.layers[element_id];
} else {
return undefined;
}
}
this.set_image = function(imageobject) {
if (!document.images)
return;
this.image = imageobject;
}
//--------------------------------------------------
this.set_textarea = function(textareaobject) {
this.textarea = textareaobject;
this.display_text();
}
//--------------------------------------------------
this.set_textid = function(textidstr) {
this.textid = textidstr;
this.display_text();
}
}
</script>
<SCRIPT type="text/javascript">
SLIDES = new slideshow("SLIDES");
s = new slide();
s.src = "IMAGEN_1";
s.text = "";
SLIDES.add_slide(s);
s = new slide();
s.src = "IMAGEN_2";
s.text = "";
SLIDES.add_slide(s);
s = new slide();
s.src = "IMAGEN_3";
s.text = "";
SLIDES.add_slide(s);
s = new slide();
s.src = "IMAGEN_4";
s.text = "";
SLIDES.add_slide(s);
s = new slide();
s.src = "IMAGEN_5";
s.text = "";
SLIDES.add_slide(s);
s = new slide();
s.src = "IMAGEN_6";
s.text = "";
SLIDES.add_slide(s);
</SCRIPT>
<img src="IMAGEN_1" name="SLIDESIMG" usemap="#SlideMap" height="304" width="590" border="0"><map name="SlideMap"> <area shape="rect" coords="247,235,274,249" href="javascript:SLIDES.goto_slide(5)" alt="Slide 6"> <area shape="rect" coords="216,235,243,250" href="javascript:SLIDES.goto_slide(4)" alt="Slide 5"> <area shape="rect" coords="185,235,212,250" href="javascript:SLIDES.goto_slide(3)" alt="Slide 4"> <area shape="rect" coords="153,235,180,250" href="javascript:SLIDES.goto_slide(2)" alt="Slide 3"> <area shape="rect" coords="122,235,149,250" href="javascript:SLIDES.goto_slide(1)" alt="Slide 2"> <area shape="rect" coords="90,235,117,249" href="javascript:SLIDES.goto_slide(0)" alt="Slide 1"> <area shape="rect" coords="3,3,586,218" href="/"></map><script type="text/javascript">if (document.images) { SLIDES.image = document.images.SLIDESIMG; SLIDES.textid = "SLIDESTEXT"; SLIDES.update(); SLIDES.play();}</script>
Ejemplo de archivo flash:
PWGratis permite alojar hasta 1 MB de imágenes para nuestra web. Pero una vez que comenzamos a agregar más elementos para darle ese toque personal vemos que necesitamos un poco más de recursos.
Uno de ellos es el contenido flash. Hay muchos ejemplos de este contenido, desde los vídeos de Youtube o los widgets hasta las intros o los banners. El problema surge cuando creamos nuestros propios elementos flash... ¿cómo hacemos para usarlos en nuestra página?
La respuesta: alojarlos en algún sitio web que acepte ese tipo de archivos. A continuación dejo una pequeña lista de páginas que permiten alojar de manera gratuita los archivos flash:
- Imageshack
- FileDEN
- MegaSWF
- Skydrive (usando tu cuenta de Windows Live)
<div style="text-align: center;">
<object id="movie"
type="application/x-shockwave-flash"
data="DIRECCIÓN-DEL-ARCHIVO.swf"
width="ANCHO-EN-PIXELS"
height="ALTO-EN-PIXELS" >
<param name="movie" value="DIRECCIÓN-DEL-ARCHIVO.swf /">
<param name="wmode" value="transparent" />
</object>
</div>
Para cambiar la orientación podemos modificar en el texto lo que aparece en azul: center para alinear al centro, left a la izquierda y right a la derecha.
Una de las consultas que más tenemos en nuestro portal es cómo hacer ese menú desplegable que hace tan fácil la navegación.
La respuesta no es sencilla, ya que se trata de un reemplazo del menú original. En nuestro caso decidimos eliminar totalmente la barra de navegación, pero para comenzar recomendamos a todos mantener el formato que provee PWGratis y añadir nuestro menú desplegable.
Al final encontrarán el código completo usando como ejemplo los links de nuestra propia página. Lo que vamos a hacer ahora es explicar cómo cambiar esos links para hacerlos items desplegables o normales de cualquier página, incluso las que no están gestionadas con PWGratis.
Una vez que copiado el código que está al final y pegado en la página deseada ("Texto por encima de la página" en el kit de construcción de PWGratis) vamos a prestar atención en estos componentes:
<ul id="page-bar">
<li><a href="/">Inicio</a></li>
<li><a href='#'>Tu Página</a>
<ul class="children">
<li class="cat-item"><a href='http://prometheos.es.tl/Gu%EDa.htm'>Cómo Empezar</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Tu-p%E1gina.htm'>Consejos Útiles</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Plantillas.htm'>Plantillas</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Elige-tu-intro.htm'>Intros</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Banners.htm'>Banners</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Creador-de-banners.htm'>Widgets</a></li>
</ul></li>
<li><a href='#'>Comunidad</a>
<ul class="children">
<li class="cat-item"><a href='http://prometheos.es.tl/Foro/index.htm'>Foro</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Links.htm'>Enlaces Recomendados</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Ranking.htm'>Ránking de Páginas</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Fotolog.htm'>Fotolog</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Visitas.htm'>Libro de Visitas</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Contacto.htm'>Contacto</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Newsletter.htm'>Newsletter</a></li>
</ul></li>
<li><a href='http://mejoratupagina.blogspot.com/'>Blog</a></li>
<li><a href='http://prometheos.es.tl/Participa.htm'>Participa</a></li>
</ul>
*Enlace fijo en la barra principal
*Menú desplegable sin enlace
*Enlace en submenú
A continuación, usando nuestro kit de construcción presionamos Ctrl+F en el navegador para encontrar cada una de las líneas que vamos a editar. Hay que prestar mucha atención y reemplazar sólamente los nombres y los links, porque al cambiar alguno de los códigos se puede perder todo lo editado. Guardar una modificación a la vez es lo más recomendado, siempre verificando el resultado.
Me gustaría ver cómo quedó en cada página para ver si hay que corregir algo, así que espero muchos comentarios en el libro de visitas!
En próximas entregas: cómo cambiar los colores del menú desplegable.
<style type="text/css">
<!--
/* Menú desplegable por prometheos.es.tl*/
* {
margin:0;
padding:0;
}
#navbar {
position:relative;
margin:0 auto;
margin-top:15px;
padding:0px 10px;
text-transform:uppercase;
border-top:2px solid #f25e00;
}
#page-bar {
background-color:333;
width:722px;
}
#page-bar ul {
list-style: none;
}
#page-bar li {
float:left;
list-style:none;
cursor: pointer;
display:block;
border-right:1px solid #333;
}
#page-bar li:hover {
background: #f25e00;
}
#page-bar a, #page-bar a:visited {
margin: 0px;
padding:10px 16px;
font-weight:bold;
color:#FFF;
display:block;
}
#page-bar a:hover {
text-decoration:none;
display:block;
}
#page-bar li {
float: left;
margin: 0px;
padding: 0px;
}
#page-bar li li {
float: left;
margin: 0px;
padding: 0px;
width: 122px;
text-transform:none;
}
#page-bar li li a, #page-bar li li a:link, #page-bar li li a:visited {
background: #2B2B2B;
width: 122px;
float: none;
margin: 0px;
padding: 5px 10px 5px 18px;
border-top: 1px solid #C0C0C0;
}
#page-bar li li a:hover, #page-bar li li a:active {
background: #666666;
padding: 5px 10px 5px 18px;
}
#page-bar li ul {
position: absolute;
width: 10em;
left: -999em;
}
#page-bar li:hover ul {
left: auto;
display: block;
}
#page-bar li:hover ul, #page-bar li.sfhover ul {
left: auto;
}
//-->
</style>
<ul id="page-bar">
<li><a href="/">Inicio</a></li>
<li><a href='#'>Tu Página</a>
<ul class="children">
<li class="cat-item"><a href='http://prometheos.es.tl/Gu%EDa.htm'>Cómo Empezar</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Tu-p%E1gina.htm'>Consejos Útiles</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Plantillas.htm'>Plantillas</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Elige-tu-intro.htm'>Intros</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Banners.htm'>Banners</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Creador-de-banners.htm'>Widgets</a></li>
</ul></li>
<li><a href='#'>Comunidad</a>
<ul class="children">
<li class="cat-item"><a href='http://prometheos.es.tl/Foro/index.htm'>Foro</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Links.htm'>Enlaces Recomendados</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Ranking.htm'>Ránking de Páginas</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Fotolog.htm'>Fotolog</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Visitas.htm'>Libro de Visitas</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Contacto.htm'>Contacto</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Newsletter.htm'>Newsletter</a></li>
</ul></li>
<li><a href='http://mejoratupagina.blogspot.com/'>Blog</a></li>
<li><a href='http://prometheos.es.tl/Participa.htm'>Participa</a></li>
</ul>
A pedido de la página del clan Underworld hemos creado esta plantilla para todos los fans del Halo 3 de la comunidad PWGratis.
Usa el diseño de base Ice Blue, y el código se debe cargar en el sector "Texto por encima de la página" del kit de construcción.
Tip del día: los códigos que modifican el CSS se pueden cargar en cualquier sector de la página, pero cuanto más alejados estén de la parte superior, más van a tardar en cargarse en el navegador. Es por eso que siempre recomendamos cargar los códigos CSS en "Texto por encima de la página", que es lo primero que el navegador "lee".
<div style="position:absolute; left:766px; top:27px;">Diseño: <a href="http://prometheos.es.tl" target="_blank">prometheos.es.tl</a></div><style type="text/css"> <!--
a, td, td.nav a {color: #eee;}
td.edit_header_full{background-image:url('http://img187.imageshack.us/img187/4987/halo3xy3.jpg');}
td.nav_heading{display:none;}
td.nav{background-image:url(http://img.webme.com/pic/h/hp-service/button-normal.gif);}
td.nav:hover{background-image: url(http://img.webme.com/pic/h/hp-service/button-hover.gif);}
td.edit_below_nav{visibility:hidden;}
td.edit_navi_headbg{background-image:url(URL);}
td.edit_content_top{visibility:hidden;}
td.edit_content{background-image:url(URL);background-color:transparent;}
td.edit_content_bottom{visibility:hidden;}
td.edit_content_bottom2{background-image:url(URL);}
body{background: #000000 url('http://img504.imageshack.us/img504/6311/92733114yo1.jpg') no-repeat fixed;}
td.edit_rechts_sbg{visibility:hidden;}
td.edit_rechts_cbg{background-image: url(URL);}
td.edit_rechts_bottom{background-image: url(URL);}
td.edit_rb_footer{visibility:hidden;}
.shouty, .shouty2, .shouty3, .shouty4, .shouty5{background-image: url();background-color: transparent;border: 3px dotted #fff;}
td.sidebar_heading{background-image: url(http://img.webme.com/pic/h/hp-service/button-normal.gif);height: 33px;font-size: 14px;font-weight: bold;text-align: center;}
-->
</style>