Coloca un Cartel de avisos que cambia de colores al azar

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Caja de texto o cartel de advertencia con fondo de color al azar

Hay varios trucos que nos ayudan a mostrar artilugios al azar o de forma aleatoria, desde imágenes hasta frases oentradas.

Pero esto es diferente. Se trata de una caja de texto con una particularidad muy especial: tiene un fondo de color verde, uno de color azul, otro de color lila... y los va mostrando de forma aleatoria, cada vez que se actualiza o se navega por el blog.

Se puede insertar tanto en una entrada cualquiera como en un elemento de página html-javascript.


 Ver ejemplo en funcionamiento

Diseño>añadir gadget (elemento de página)>html-javascript

Pega este script:

<script type="text/javascript">
var coloresaleatorios=["#cc66ad", "#66c8cc", "#66CC66", "#ccb566", "#8066cc"]
var alazar_color=Math.floor(Math.random()*coloresaleatorios.length)
if (coloresaleatorios[alazar_color].indexOf(":")!=-1){
coloresorden="background-color: "+coloresaleatorios[alazar_color].split(":")[0]+";"
coloresorden+="color: "+coloresaleatorios[alazar_color].split(":")[1]+";"
}
else
coloresorden="background-color: "+coloresaleatorios[alazar_color]+";"
document.write('<style type="text/css">\n')
document.write('.coloralazarbalcn{'+coloresorden+'}\n')
if (coloresaleatorios[alazar_color].split(":").length==3)
document.write('.coloralazarbalcn a{color:'+coloresaleatorios[alazar_color].split(":")[2]+';}\n')
document.write('<\/style>')</script>

Lo que te muestro en color verde son los códigos de los colores de fondo.

Puedes sustituirlos por tus colores favoritos utilizando la tabla de colores.

Si deseas añadir más colores de fondo, utiliza "#66CC66" tantas veces como desees pero ten en cuenta que debes separarlo por comas.

1) Para poner la caja en un gadget o elemento de página de la barra lateral pega esta línea debajo del script anterior:

<div style="margin: 4px; padding: 6px; border: 2px solid #cccccc;" class="coloralazarbalcn">TEXTO, CODIGO, AVISO O IMAGEN</div>

Reemplaza lo que ves en naranja por el contenido de la caja.

2) Para poner la caja en una entrada, guarda el gadget en el que pegaste el script y utiliza esta línea en el post para mostrarla:

<div style="margin: 4px; padding: 6px; border: 2px solid #cccccc;" class="coloralazarbalcn">TEXTO, CODIGO, AVISO O IMAGEN</div>

Reemplaza lo que ves en naranja por el contenido de la caja.

El cartel tiene un fondo de color gris. Podrás editarlo conociendo cada atributo:

border: 2px solid #cccccc; 2px es el grosor del borde. Incrementa o disminuye el valor para modificarlo.

El estilo es solid (normal) pero puedes utilizar otros modelos como dashed (lineal) o dotted (punteado).

Por último, #cccccc que representa el color del borde. Cámbialo haciendo uso de la tabla de colores.

Eso es todo por ahora, si necesitas cualquier tipo de ayuda avísame.

Read More

Cómo agregar tooltips en texto, sin enlace

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Tooltip en texto (sin enlace)

Los tooltips son ventanitas que explican el contenido al que conduce un enlace. En esta ocasión no usaremos un enlace para aplicar un tooltip, sino una palabra.

Pasa el cursor por esta frase...

¿Te gusta este truco?

Para ponerlo en tu blog usa estas líneas:

<abbr title="TEXTO DEL TOOLTIP">PALABRA O FRASE</abbr>

TEXTO DEL TOOLTIP: Escribe el texto que tendrá el cartelito.

PALABRA O FRASE: Cualquier palabra o frase que desees explicar.

Y claro, siempre se puede jugar con diseños. En este caso podemos destacar una palabra para indicar que estamos explicando su significado con colores o añadiendo un cursor.

Para añadir el cursor de 'pregunta' usa esta línea:

<abbr style="cursor: help;" title="TEXTO DEL TOOLTIP">PALABRA O FRASE</abbr>

Read More

Instala tres formas de ventanas de aviso en tu blog

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Estás leyendo Las tres formas de poner ventanas de aviso, en Links

Las tres formas de poner ventanas de aviso

Esta vez os quiero enseñar varios métodos para crear ventanas de aviso, es decir, unas ventanas que salen cuando haces click en un enlace, unas ventanitas que dicen algo del enlace...

Puedes pegar cualquiera de los códigos que te muestro a continuación, en un elemento html-javascript de la parte de diseño en tu plantilla.

1: Si quieres una ventana con la frase que quieras y un solo botón de "OK"...

<script type="text/javascript">
alert('FRASE QUE SALDRÁ EN LA VENTANA DE AVISO')
</script>
<noscript>Frase que se mostrará si los visitantes no tienen javascript</noscript>

-Donde dice "Frase que se mostrará si los visitantes no tienen javascript" pondremos una frase que muestre a un visitante (si no tiene javascript) que debe activar las funciones javascript.

2: Si quieres una ventana con la frase que quieras y dos botones que digan "OK" o "CANCEL" (cancelar)...

<script type="text/javascript">
confirm('FRASE QUE SE MOSTRARÁ EN LA VENTANA');
if (confirm('TEXTO O FRASE QUE SE MOSTRARÁ SI HACEN CLICK EN OK DE LA VENTANA')) {
window.location = "URL DE TU BLOG";
}
else {
window.location = "ENLACE DE DESTINO";
}
</script>

-Donde dice "FRASE QUE SE MOSTRARÁ EN LA VENTANA" ponemos lo que deseemos que se vea en la ventana.

-Donde dice "TEXTO O FRASE QUE SE MOSTRARÁ SI HACEN CLICK EN OK DE LA VENTANA" pondremos la frase que saldrá cuando el visitante haga click en el botón "OK"

-Donde dice "URL DE TU BLOG" ponemos la dirección de nuestro blog.

-Donde dice "ENLACE DE DESTINO en "OK" pondremos el enlace al que llevará la ventana si hacen click en "OK"
3- Si quieres una ventana con una pregunta, una respuesta, y dos botónes de "OK" o "CANCEL"...

<script type="text/javascript">
var yourName = prompt("PREGUNTA", "La respuesta ");
</script>

-Donde dice "PREGUNTA" escribes lo que quieras que respondan tus visitantes. Donde pone "La respuesta" escribes la respuesta correcta.

Ahora en otro elemento html-javascript pega este otro código:

Bienvenido<script type="text/javascript">document.write(yourName)</script>! a mi blog, me alegra que volver a verte por aquí!<script type="text/javascript">document.write(yourName)</script>

¡Ahora disfruta con tus ventanas!

Read More

Como instalar un cartel o aviso automático al pie de las entradas

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Cartel o aviso automático al pie de todas las entradas

Tal vez se te haya ocurrido el querer poner una imagen, una frase, un aviso o cualquier tipo de información al pie de todas las entradas de tu blog.

Si de da el caso de que así sea, sigue los pasos indicados en esta entrada y podrás obtener tu "caja de avisos".

Diseño>Edición de HTML>expandimos artilugios

Busca esta línea:

<data:post.body/>

Y justo debajo añade lo siguiente:

<div id='balcart'>CONTENIDO</div>

Reemplaza CONTENIDO por cualquier cosa que muestro a continuación:

- Para incluir una imagen utiliza la línea: <img src='URL DE TU IMAGEN'/> y sustituye URL DE TU IMAGEN por la dirección del icono o la imagen ^[+].

- Para incluir texto simplemente sustituye CONTENIDO por la frase a mostrar.

- Para incluir un enlace utiliza esta línea: <a href='URL DE LA PAGINA'/>TITULO</a> y sustituye URL DE LA PAGINA por la dirección de la web o el blog, así como TITULO por el texto que llevará el enlace.

Si por otra parte, quieres agregar texto, imagen y enlace en el cartel, utiliza esto:

&lt;div id='balcart'&gt;TEXTO &lt;a href='URL DE LA PAGINA'/&gt;TITULO&lt;/a&gt; TEXTO <img src='URL DE TU IMAGEN' style='margin:0px 0px 3px 3px; float:right;'/>&lt;/div&gt;

* Sigue las instrucciones anteriores para rellenar la caja de aviso.

Ahora busca la etiqueta ]]></b:skin> y encima añade el bloque de CSS necesario para aplicar el estilo:

#balcart {
background:transparent url(URL DE LA IMAGEN) repeat;
padding: 6px;
margin: 8px;
border: 2px solid #cccccc;
text-align: center;
}

En URL DE LA IMAGEN introduce la dirección de la imagen de fondo (opcional).

Si deseas aplicar un color de fondo en lugar de una imagen, borra transparent url(URL DE LA IMAGEN) repeat y pega el código de tu color favorito ^[+].

También puedes personalizar el grosor del borde (2px) así como su estilo (solid) ^[+] o el color (#cccccc) ^[+].

En caso de querer mostrar el cartel con otro aspecto, avísame y te ayudaré en lo que necesites.

Read More

Como poner un mensaje de bienvenida en todas las entradas del blog

Artículo publicado originalmente en el blog: El balcón de Jaime: Visitar sitio.

Mensaje de bienvenida sobre las entradas de tu blog

En esta entrada aprenderemos a crear una nueva sección sobre las entradas que mostrará un elemento de página o gadget html-javascript con un mensaje de bienvenida sólo visible en la página principal o portada del blog.

Puede verse el resultado en la siguiente imagen:

Diseño>Edición de HTML>expandimos artilugios

Localizamos este código:

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

Ahora, justo antes, añadimos el bloque que creará la nueva sección sobre las entradas:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='Mensajbljposjt' id='Mensajbljposjt' showaddelement='yes'>
<b:widget id='HTML68' locked='false' title='Mensaje de Bienvenida' type='HTML'/>
</b:section>
</b:if>

Buscamos la etiqueta ]]></b:skin> y justo antes incluimos el siguiente css:

/* Mensaje de bienvenida
----------------------------------------------- */
#Mensajbljposjt h3 {
color: #FFFFFF; /* Color del titulo (¡Bienvenid@! */
}
#Mensajbljposjt {
color:#333333; /* Color del texto */
background:#92DA8B; /* Color del fondo */
}

Puede modificarse el color de fondo (#92DA8B) en background:#92DA8B; haciendo uso de la tabla de colores. También se puede editar el color del texto, reemplazando #333333 o #FFFFFF por el código de otro color.

Ahora, antes de </head> agregamos esta línea:

<link href='https://sites.google.com/site/scriptsbalcon/b/Mensajbljjtepos.css' rel='stylesheet' type='text/css'/>

Guardamos la plantilla.

A continuación accedemos al apartado de Diseño > Elementos de la página y pulsamos sobre el enlace 'Editar' del gadget titulado 'Mensaje de Bienvenida'.

Insertamos este código en su interior:

<div id="Mensajbljposjt">
<h3>¡Bienvenid@!</h3>

<img src="URL DE TU IMAGEN"/>

<p>TEXTO PRIMERA LÍNEA</p>
<p>TEXTO SEGUNDA LÍNEA</p>
<p>TEXTO TERCERA LÍNEA</p>

<p>TEXTO CON ENLACE <a href="URL PAGINA">ESTE ES EL ENLACE</a></p>

</div>

Debe reemplazarse URL DE TU IMAGEN por la dirección de la miniatura de imagen a mostrar.

En TEXTO PRIMERA LÍNEA introduciremos el primer párrafo del mensaje de bienvenida y así sucesivamente.

En TEXTO CON ENLACE puede incluirse una frase que contenga un enlace de suscripción en su interior. La dirección del enlace (o feed) se insertará en URL PAGINA mientras que el texto que mostrará el link debe escribirse en donde dice ESTE ES EL ENLACE.

La única función de <p> y su cierre </p> es la de crear saltos de línea dejando un espacio en blanco. Para mostrar el texto sin saltos de línea bastará con eliminarlos.

Guarda el gadget para terminar.

Read More

Aviso flotante de suscripción al blog, por Ciudad Blogger

La otra vez vimos cómo poner un anuncio flotante que baja con la página el cual se usa con frecuencia para poner un aviso en el blog, pero también podemos darle otro uso y sacarle provecho para aumentar las suscripciones al feed.

Es decir, vamos a poner un aviso flotante de suscripción al blog de forma que cuando baje la página también baje la caja de suscripción.

Puedes ver un ejemplo en este blog de pruebas, y de paso puedes suscribirte ahí a este blog 

Para ponerlo en tu blog primero debes tener activada la opción de suscripción por email enFeedburner. Si no lo has hecho entra a tu cuenta de Feedburner, haz click sobre el nombre de tu blog y luego click en la pestaña Publicize.

Ahora haz click en el enlace Suscripciones por Email que se encuentra en el menú lateral izquierdo.
A continuación haz click en el botón Activar y estará habilitada la función de suscripción por correo.

Ahora dentro de Blogger entra en Diseño > Edición de HTML y pega antes de </head> lo siguiente:

<style type='text/css'>
#anuncio {
position:absolute;
padding: 2px;
padding-top: 15px;
width: 280px; /* ancho del anuncio */
visibility: hidden;
z-index: 200;
top: 30px;
left: 30px;
}
#rss-mail {
/* color e imagen de fondo */
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtxoyxWHhvQJ_potwRAEiOMjZz-O-s3b3_JPqhfZQH-k9kSgsBiaFmC4dgkpaOZvg1_KhKSGD4YgNwAAX-FTwziIL0WdG0VlGoH316OQ94pejllVnImlyLbqKUg8gW9rIFAjjQKN780t0/s320/pattern_blk_point.png);
border:2px solid #FF8000; /* borde */
height:70px; /* alto de la caja */
}
#rss-mail span {
color:#FFFFFF; /* color del texto */
font-size:12px;
font-weight:bold;
line-height:30px;
}
#rss-submit {
background:#FF8000; /* color del botón */
border:0px;
}
.rss-box {
height:13px;
margin-top:10px;
color:#6E6E6E;
font-size:12px;
width:135px;
}
</style>

<script type='text/javascript'>
//<![CDATA[
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 15 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("anuncio").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("anuncio").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("anuncio");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
//]]>
</script>

Luego busca la etiqueta </body> y antes de ella pega esto:

<div id='anuncio'>
<div id='rss-mail'>
<a href='Javascript:void' onClick='closebar(); return false'><img align='right' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKGyhzMjbbi5wdYXZIgRXXR6AjvMhyphenhyphenZSbv9SRXgf3pxln2oF0ajRyzrJnF1nI-qQCtRGrIMNRX0UkbYSLOddzxjt5-j8cJBH0rsIRarG2PEZi3E8z_YYSkpgru9S-aX_Z02pQYQ8Rgswo/s320/cerrar.png'/></a>

<span>Recibe las actualizaciones directo a tu correo</span><br/>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFWwhVWd-PdGdMW81O7s2x979RuigTydecL79PrMi5MA7TAz9MZpll1EiPqAuWREquhEgI2OL4o_RjHR44eFZY4hx2xazgquvYIKX8LIJb_fza5q3T4H4veHI6YaZXYq-fdue54ZfciHM/s1600/rss-icono.png' style='padding:5px; float:left;'/>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=miblog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='email' type='text/'/>
<input name='uri' type='hidden' value='miblog'/><input name='loc' type='hidden' value='es_ES'/><input id='rss-submit' type='submit' value='Suscribir'/></form></div></div>

Ahora sólo cambia lo que está en color rojo por el nombre de tu feed, por ejemplo, la URL de tu feed de Feedburner es algo como esto:

http://feeds.feedburner.com/miblog

El nombre de tu feed es lo que está en rojo, tal cual, sin espacios; así es como deberás ponerlo en el código donde se indica.

Lo que está en color azul puedes cambiarlo por otro texto, te recomiendo que no sea un texto muy largo.

En el primer código puedes personalizar la apariencia de la caja de suscripción, puedes guiarte por las anotaciones en color verde para saber a qué corresponde cada cosa.

De esta forma tendrás la posibilidad de conseguir más suscripciones a tu feed de una forma muy llamativa, además que la caja de suscripción puede cerrarse haciendo click en el ícono de cerrar.

Fuente: El mejor sitio del mundo sobre blogs: Ciudad Blogger

Read More