¿Su cuenta de Blogger esta por ser suspendida?

Es cierto que hace ya unos meses, SpamLoco nos advertía sobre las campañas de algunos inescrupulosos que intentaban robar nuestras contraseñas de Blogger; uno, suele leer estas cosas y decir ¡qué barbaridad! pero no mucho más.

Sin embargo, cuando recibimos en nuestro correo un mensaje cuyo título es Su cuenta de Blogger esta por ser suspendida, aún cuando sepamos que ese no el modo en que Blogger nos comunica algo por muy dramático que sea, uno no puede dejar de sentirse ... bueno, ayyyyyyyyy ¡que hice ahora!!!!!!!!!

Esta es una respuesta a una pregunta de Samuel Rego que quiere hacer algo que tal vez no usemos todos los dias pero que creo que puede servir como idea genérica y ver hasta donde es posible manipular los códigos condicionales de Blogger.

Lo que desea hacer es que un widget específico se muestre en tres entradas y sólo en esas tres entradas de su blog.

La solución es, tal como lo intentó, anidar las condiciones, es decir, poner una dentro de la otra; eso puede lograrse, sólo se requiere paciencia pero, aún cuando se consiga, se encontrará con un problema; deberá repetir TODO el código tres veces o crear tres widgets diferentes lo cual es, como mínimo, engorroso así que la idea es ver si es posible simplificarlo.

El widget traductor que propone Dicas Blogger es una de las formas más simples de agregar esta funcionalidad en cualquier blog. Basta copiar y pegar el código en un elemento HTML de nuestra sidebar y listo.

El código original lo podemos ver acá y claro, está pensado para traducir desde el portugués a diferentes idiomas así que si queremos adaptarlo al español, deberemos cambiar algunas cosas.

El uso de los códigos condicionales es lo que nos permite hacer que nuestro blog tenga cierto dinamismo, haciendo que algunos elementos se muestren en determinado tipo de páginas o modificando su diseño por completo.

La diferencia entre ocultar algo con CSS o JavaScript y usar estos condicionales es sustancial. Si bien, a simple vista parece lo mismo, no lo es en absoluto. Cuando ocultamos con CSS usando propiedades como display:none; sólo hacemos invisible cierta parte pero, el código y su contenido, serán ejecutados igual; como resultado, el tiempo de carga del sitio no variará ya que la cantidad de datos que debe leer el navegador es la misma. Lo comprobamos con facilidad; si miramos el código fuente, eso que ocultamos se verá.

Por el contrario, los condicionales no son ejecutados por el navegador sino por el mismo Blogger, es decir, se ejecutan ANTES que la página sea enviada al navegador; Blogger "escribe" el código fuente y omite esa parte condicionada. Como resultado, si miramos el código fuente, no la veremos; de ese modo, aún cuando nuestra plantilla sea muy grande, la carga del sitio será más rápida por la simple razón de que hay sectores que son ignoradas.

Bounce es un efecto para Prototype + Scriptaculous creado por Andrew Tetlaw y que es útil para ... bueno, no sé si es útil pero es divertido.

Simplemente agregamos el script y luego, en cualquier parte, escribimos el código HTML con este formato:

<div id="nombre" style="" onclick="boing(this)"> ... el contenido ... </div>
<script type="text/javascript"> function boing(elm) { new Effect.Bounce(elm, {height:valor}); } </script>

donde:

el ID debe ser siempre un nombre único
el atributo STYLE puede contener cualquier propiedad o ninguna
el evento onclick es siempre el mismo y hace referencia al ID
el contenido del DIV puede ser cualquier cosa, textos o imágenes
la etiqueta SCRIPT posterior ejecuta la función y allí podemos colocar la altura del "salto", estableciendo el valor correspondiente

El artículo de kamikazemusic.com nos muestra una forma de crear pestañas o tabs sin JavaScript, utilizando sólo propiedades CSS que, con las limitaciones del caso, funcionarán incluso en Internet Explorer.

El código HTML es simplísimo y lo pondremos donde se nos ocurra:

<div id="csstabs">
<!-- la primera pestaña -->
<div id="tab1" class="tabbox">
<h3>TITULO 1</h3>
<div class="tabcontent">
....... aquí pondremos el contenido .......
</div>
</div>
<!-- la segunda pestaña -->
<div id="tab2" class="tabbox">
<h3>TITULO 2</h3>
<div class="tabcontent">
....... aquí pondremos el contenido .......
</div>
</div>
</div>

El esquema lo repetimos con cualquier cantidad de pestañas y en este ejemplo, sólo hay dos.

Ahora, el CSS que tiene una parte que es genérica y otra que es individual, para cada una de las pestañas. Lo ponemos antes de </head>:

<style>

/* debemos dimensionar el área donde se mostrarán */
#csstabs {
height: 370px;
margin:0 auto;
position:relative;
width: 350px;
}
#csstabs div {
padding: 10px;
}
#csstabs h3 { /* los títulos de las pestañas */
color: #ABC;
cursor: pointer;
display: block;
font-size: 20px;
font-weight: normal;
height: 25px;
line-height: 25px;
margin: 0;
padding: 5px;
text-align: center;
width: 160px;
}
.tabcontent {  /* el contenido de las pestañas */
display: block;
height: 320px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 40px;
width: 100%;
}
#csstabs:hover h3, #tabs:focus h3, #tabs:active h3 {
z-index: 0;
}
#csstabs:hover .tabcontent, #tabs:focus .tabcontent, #tabs:active .tabcontent {
opacity: 0;
z-index: 0;
}

/* las definiciones de cada pestaña que pueden ser iguales o diferentes */

#tab1 .tabcontent {
background-color: #234;
z-index: 2;
}
#tab1 h3 {
left: 0;
position: absolute;
top: 0;
z-index: 3;
}
#tab1:hover h3, #tab1:focus h3, #tab1:active h3 {
background-color: #234;
color: #DEF;
z-index: 4;
}
#tab1:hover .tabcontent, #tab1:focus .tabcontent, #tab1:active .tabcontent {
opacity: 1;
z-index: 3;
}

#tab2 .tabcontent {
background-color: #E6EAF3;
opacity: 0;
z-index: 1;
}
#tab2 h3 {
left: 180px;
position: absolute;
top: 0;
}
#tab2:hover h3, #tab2:focus h3, #tab2:active h3 {
background-color: #E6EAF3;
color: #565A63;
z-index: 4;
}
#tab2:hover .tabcontent, #tab2:focus .tabcontent, #tab2:active .tabcontent {
opacity: 1;
z-index: 3;
}

</style>

Pestaña 1

Nullam vitae lacinia risus. In hac habitasse platea dictumst. Curabitur dapibus magna sed lorem mollis sagittis.

Suspendisse imperdiet; erat id iaculis aliquet, erat tellus commodo libero, sed commodo arcu felis at enim. Integer nec neque arcu, ut bibendum tortor. In dolor lorem, molestie vitae viverra sit amet, elementum vel orci! Etiam tincidunt erat vel sem venenatis lobortis.

Mauris elit urna, molestie a bibendum non, iaculis non magna.

Quisque lectus tortor, lobortis vel porta a, tempus eget lorem? Aenean diam tellus, tristique quis consequat et, ornare id dui.

Pestaña 2

¿Algunos íconos? No, cientos de miles. findicons reune cantidades impresionantes de packs para descargar de forma gratuita y además, es un buscador muy eficiente porque permite filtar los resultados de muchas maneras, seleccionando tamaños o colores.

Un accesorio muy útil es el conversor. Desde allí, podemos subir cualquier imagen y convertirla a diferentes formatos y diferentes calidades. Por ejemplo, a formato ICO. El resultado, es un ZIP que descargamos y que contendrá varios archivos con íconos en distintos tamaños (8x8, 16x16, 24x24, 32x32, 40x40, 48x48, 56x56, 64x64, 72x72, 80x80).

Un sitio para guardar en los marcadores.

GRACIAS:El rincón de Anahí