]
TooLBoXBLoG

Slider

domingo, 9 de noviembre de 2014

ÍNDICE DE HERRAMIENTAS

Insertando imágenes: Slider y Acordeones, y otras galerías de imágenes
Distintas Formas de presentar las Entradas recientes y Posts relacionados
Multimedia: Introducir música, video, publicaciones, etc.
Cómo hacer menús
Elementos del diseño del blog
DISTINTOS GADGETS

Imagen en la cabecera

Imagen en la cabecera

Una vez que estamos en la opción diseño de nuestro Blog, nos centramos en el Gadget cabecera, la cual en la imagen esta encerrada en un circulo, en caso de no contar con este gadget en nuestro Blog, simplemente nos vamos a añadir un gadget y seleccionamos el gadget cabecera de pagina. Ahora damos clic en editar, nos saldrá una pantalla como la imagen de abajo:




Para comenzar nos vamos a: PLANTILLA>>PERSONALIZAR>> AVANZADO >>AÑADIR CSS

y si se trata de una imagen:
#header img {    width:800px; /* define el ancho de la imagen*/    height:50px; /* define el alto de la imagen*/    border: 2px solid #7ab0ca; /* se añade un borde y un color determinado al borde*/ }

sábado, 8 de noviembre de 2014

Reloj Acrobático Para Tu Blog

Reloj Acrobático Para Tu Blog De Blogger

Me gustaria compartir con ustedes este agradable reloj para tu blogger.Este es una figura de reloj humano Acrobatic Divertido.Con esto mantendras a tus lectores actualizados y anadiras estilo a tu pagina de blog.
Para integrar este widget a tu blog siguie este simples pasos.



1. Entrar a la cuenta de blogger e Ir a Diseño>> Elementos página

2. Haga clic en Agregar un Gadget y seleccione "HTML / Javascript"

3. Pegue uno de los siguientes código 



CON FONDO TEXTO NEGRO



<script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js"></script>

Segundo Widget: CON FONDO TEXTO BLANCO


Codigo A Usar;
<script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.js"></script>


4. Ahora guarda HTML/Javascript. y Listo.

Recopìlado de: http://www.ciudadblogger.info/2013/06/reloj-acrobatico-para-tu-blog-de-blogger.html


viernes, 7 de noviembre de 2014

Slider Acordeon 2x10


Basado en el slider acordeón de dos filas x 5 imágenes, he modificado el código para ampliar las imágenes.
En primer lugar hay que colocar este primer código, pero en realidad no tengo claro para que sirve porque yo lo he hecho sin él y me ha funcionado igual, por eso lo he separado del resto del código. Es decir,  se puede probar primero sin poner este código y si no funciona entonces se pega esto delante de los demás:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>

Este segundo código es el del estilo donde se colocan las direcciones o url de cada imagen. Aquí hay que sustituir lo que está en rojo por la dirección de la imagen. He señalado también en azul el contenedor total de la tabla por si se quiere modificar.
<style type="text/css">
<!--
body {
 background: #e2e2e2 url(https://lh4.googleusercontent.com/5lq26FE8Q08/T14X6urDoHI/AAAAAAAAAYc/HxOCtz028-A/s6/bg.png) repeat;
 margin:0;
}

/* for the tables version */

.acordeon {
 border-collapse:collapse;
 padding:0px;
 margin:0px auto;
 width:750px;
 height:400px;
 box-shadow: 0 0 5px #333;
}
.acordeon td {
 padding:0;
 width:136px;
 height:117px;
 border:2px solid #fff;
 -moz-transition: 0.7s;
 -ms-transition: 0.7s;
 -o-transition: 0.7s;
 -webkit-transition: 0.7s;
 transition: 0.7s;
}
.acordeon td.p1 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsHcy59qx-a8N5kgWy9eOnK1ZK00KInCGc6L88innSRfdtaQftIuMkyTA7a0FjgVxRoa-Ps4LiGx6iogHFtmLiVvFXHSeUKuP5QsAQoC3AC4mokhIyx_yMSotnfReeGwvmDydTMkaU9Lma/s1600/TRABAJO+FINAL+FINAL.jpg) no-repeat center center;}
.acordeon td.p2 {background:url(http://4.bp.blogspot.com/Z5uyfjCXlro/VEzhTVg3jaI/AAAAAAAAASI/UJe5Q-kWicM/s1600/18%2BLLUVIA%2BCON%2BNIEVE.jpg) no-repeat center center;}
.acordeon td.p3 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_14tgya8lrA8er3OoXTp1YhHuuYOpQ1TbV5UgJ_3YNBTsTw1WIMhjkYEACSVHPgR4kn63kqTR_RaSIC3eXdAIL6QXaUSSQ1l3vNsr7ud_EYuycYZ75Pcstil3z-MsYYrLXXeflr4mlVw/s1600/07+EFECTO+POP+ART+EVA2222.jpg) no-repeat center center;}
.acordeon td.p4 {background:url(http://4.bp.blogspot.com/-j-0z6FTzXo/VEziar_2UsI/AAAAAAAAASg/y1VrjEooVxY/s1600/85548112_My3am0y_1401174606.jpg) no-repeat center center;}
.acordeon td.p5 {background:url(http://4.bp.blogspot.com/Z5uyfjCXlro/VEzhTVg3jaI/AAAAAAAAASI/UJe5Q-kWicM/s1600/18%2BLLUVIA%2BCON%2BNIEVE.jpg) no-repeat center center;}
.acordeon td.p6 {background:url(https://lh6.googleusercontent.com/-_dtMmSY3rgA/T2UU0ffbRhI/AAAAAAAAAaw/5K4uGfS9_SU/s500/nice-abstract.jpg) no-repeat center center;}
.acordeon td.p7 {background:url(http://3.bp.blogspot.com/-OfXNMsWQF1k/VEzhRsm0CI/AAAAAAAAASA/g_oqcW8XJf0/s1600/07%2BEFECTO%2BPOP%2BART%2BEVA2222.jpg) no-repeat center center;}
.acordeon td.p8 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieEXL0zLDKrRFKEVgGJZvqz_3GwR2L5u-frKh7ZvSdseGnNt4QKBECfsyoqv_Kv7TvpJYu9NmXNOH4Dr9cym8BLZzkEsgs9RB04tPoPuFjkQyRc2ftCaByveTKzYlkzPdZufIxx_EOBfTR/s1600/24+TRABAJO+FINAL+X.jpg) no-repeat center center;}
.acordeon td.p9 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwhiSrA969Y8-hSoExrckfBdFK-pFEaFxWLNI7MD8vjq0S7ou10VDh4NPnC9SqKrNb08d5RxLyCPiZgRj5reAxfVUt5Iv-vCZyzn4kl4iLnrsq1upSm3dqxT1ib4YLXhnXxYvX_AHSWDU/s1600/85548112_My3am0y_1401174606.jpg) no-repeat center center;}
.acordeon td.p10 {background:url(http://4.bp.blogspot.com/-x-L6EPQdj2o/VDp7EnNdQI/AAAAAAAAAMI/N5nuVCrFNDU/s1600/TRABAJO%2BFINAL%2BFINAL.jpg) no-repeat center center;}
.acordeon td.p11 {background:url(http://4.bp.blogspot.com/-x-L6EPQdj2o/VDp7EnNdQI/AAAAAAAAAMI/N5nuVCrFNDU/s1600/TRABAJO%2BFINAL%2BFINAL.jpg) no-repeat center center;}
.acordeon td.p12 {background:url(http://4.bp.blogspot.com/Z5uyfjCXlro/VEzhTVg3jaI/AAAAAAAAASI/UJe5QkWicM/s1600/18%2BLLUVIA%2BCON%2BNIEVE.jpg) no-repeat center center;}
.acordeon td.p13 {background:url(http://3.bp.blogspot.com/OfXNMsWQF1k/VEzhRsm0CI/AAAAAAAAASA/g_oqcW8XJf0/s1600/07%2BEFECTO%2BPOP%2BART%2BEVA2222.jpg) no-repeat center center;}
.acordeon td.p14 {background:url(http://4.bp.blogspot.com/j0z6FTzXo/VEziar_2UsI/AAAAAAAAASg/y1VrjEooVxY/s1600/85548112_My3am0y_1401174606.jpg) no-repeat center center;}
.acordeon td.p15 {background:url(http://4.bp.blogspot.com/Z5uyfjCXlro/VEzhTVg3jaI/AAAAAAAAASI/UJe5QkWicM/s1600/18%2BLLUVIA%2BCON%2BNIEVE.jpg) no-repeat center center;}
.acordeon td.p16 {background:url(https://lh6.googleusercontent.com/_dtMmSY3rgA/T2UU0ffbRhI/AAAAAAAAAaw/5K4uGfS9_SU/s500/nice-abstract.jpg) no-repeat center center;}
.acordeon td.p17 {background:url(http://3.bp.blogspot.com/-OfXNMsWQF1k/VEzhRsm0CI/AAAAAAAAASA/g_oqcW8XJf0/s1600/07%2BEFECTO%2BPOP%2BART%2BEVA2222.jpg) no-repeat center center;}
.acordeon td.p18 {background:url(http://1.bp.blogspot.com/M5F7qD6AiDE/VC043XNDGzI/AAAAAAAAAHU/btqkgkTt7Y0/s1600/24%2BTRABAJO%2BFINAL%2BX.jpg) no-repeat center center;}
.acordeon td.p19 {background:url(http://4.bp.blogspot.com/j0z6FTzXo/VEziar_2UsI/AAAAAAAAASg/y1VrjEooVxY/s1600/85548112_My3am0y_1401174606.jpg) no-repeat center center;}
.acordeon td.p20 {background:url(http://4.bp.blogspot.com/xL6EPQdj2o/VDp7EnNdQI/AAAAAAAAAMI/N5nuVCrFNDU/s1600/TRABAJO%2BFINAL%2BFINAL.jpg) no-repeat center center;}

.acordeon td {width:50px; height:50px;}
.acordeon tr:hover td {height:320px;}
.acordeon td:hover {width:480px; height:320px;}

h1 {
 font-family:consolas, arial, sans-serif;
 font-size:50px;
 color:#999999;
 text-shadow:#fff 0px 1px 0, #333 0 -1px 0;
 font-weight: bold;
 margin: 20px 0;
 letter-spacing:-1px;
}
-->
</style></head>

Y la tercera  parte del código que corresponde al body.

<body>

 <h1 align="center">

Acordeon de Imagenes CHULAS</h1>

<table class="acordeon">

<tbody>

<tr>

<td class="p1 c1"></td><td class="p2"></td><td class="p3"></td><td class="p4"></td><td class="p5"></td><td class="p6"></td><td class="p7"></td><td class="p8"></td><td class="p9"></td>

<td class="p10"></td></tr><tr><td class="p11 c1"></td><td class="p12"></td><td class="p13"></td><td class="p14"></td><td class="p15"></td><td class="p16"></td><td class="p17"></td><td class="p18"></td><td class="p19"></td><td class="p20"></td></tr>

</tbody>
</table>

</body>

</html>


Por ultimo ya solo queda cambiar el titulo de la tabla (o quitarlo)
  • y cambiar el título del acordeón.
  • y si se quiere suprimir --> borrar esta linea (<h1 align="center">
    Acordeon de Imagenes CHULAS</h1>)

Documento sin título

Acordeon de Imagenes CHULAS

PROTEGER LAS PUBLICACIONES

Deshabilitar el click derecho en tu blog

 


Vamos a ver como se hace para deshabilitar el click derecho de nuestro blog en blogger. Si bien para muchos esta función no es de mucha utilidad, hay gente que nos pide que les enseñemos a realizarla, y se debe fundamentalmente a que al inhabilitar el click derecho evitamos que algun visitante pueda copiarnos el contenido de nuestro blog.


Para llevar a cabo este truco basta con acceder a la Edición HTML de nuestro blog y buscar esta etiqueta:

<body>

Y justo después, pegar este código

<script language="Javascript">
document.oncontextmenu = function(){return false}
</script>

Guardamos los cambios y está listo, ya tenemos deshabilitado el botón derecho en nuestro blog.



Cómo evitar que te copien el texto de tu blog

Como ya sabemos hay mucha gente que se quiere pasar de lista copiando el contenido de un blog para luego pegarlo tal cual y publicarlo. En ocasiones escribir un post significa dedicarle mucho tiempo, ya sea investigando, recopilando fuentes, buscando imágenes, redactando, corrigiendo y dando forma al contenido, y de pronto nuestro esfuerzo aparece en el blog de otros asumiendo que son los autores de dicho contenido y obviamente sin la mención de créditos.

Así que veremos una forma para evitar que nos roben el contenido del blog alguno de estos odiosos personajes. Aclaro, estoy completamente de acuerdo en que la información debe ser libre y debe compartirse, pero de ningún modo estoy de acuerdo en que se robe información y se asuman el trabajo de otros, por lo que si tomas información de algún lado cita a los autores y redáctalo con tus propias palabras.

Entonces vamos a emplear un script que deshabilita la opción de seleccionar el texto de una página web, evitando de esta forma que hagan un 'copy & paste' y te roben tu contenido. Pero que hay que aclarar que no es un método infalible, ninguno lo es.

Sólo tienes que entrar a Plantilla | Edición de HTML y pegar antes de </head> lo siguiente:
<script>
function disabletext(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disabletext
document.onclick=reEnable
}
</script>

Aunque este script funciona con todos los navegadores, en Mozilla Firefox bloquea la caja de búsqueda.


 Protege tus imágenes
Si tienes alguna foto que quieres publicar pero que no quieres compartir por temor al mal uso que se le pueda dar entonces te daré una forma para proteger tus fotos.
Lo que haremos será deshabilitar el botón derecho del mouse para evitar que copien tus imágenes. Pero no te preocupes que esta función sólo deshabilita el botón sobre la foto que tú desees, el resto del blog no sufrirá esta efecto.

Lo que debes hacer es usar este código cuando quieras publicar una foto que quieres proteger:
<img src="URL de la imagen" oncontextmenu="alert('Opción deshabilitada');return false" oncopy="alert('Opción desabilitada');return false"/>

Ahora cambia la URL de la imagen y si lo deseas el texto entre paréntesis que es el que aparecerá cuando intenten copiar.
Con esto tendrás más control sobre las fotos que publiques.


Cómo evitar que te copien imágenes y texto del blog
La otra vez vimos cómo evitar que te copien el texto de tu blog usando un script que deshabilita la opción de seleccionar el texto. Si bien este script funciona perfectamente, presenta un problema, que en Mozilla Firefox bloquea la caja de búsqueda, por lo que si tienes un buscador en tu página entonces los usuarios con Firefox no pueden realizar sus búsquedas. Y es que este script protege todo el contenido del blog.

Vamos a usar otra técnica para evitar este problema ya que protegeremos únicamente el área de las entradas, que es ahí donde se encuentra el contenido que no queremos que nos roben.

¿Cómo funciona? Usaremos un código que hará tres cosas, deshabilita el botón derecho del mouse pero sólo en el contenido de las entradas, en el resto del blog funcionará sin problemas. Esto ayudará a evitar que nos roben una imagen mediante la función "guardar imagen como..." Además este mismo código evitará la selección de texto dentro de las entradas, por lo que si alguien quiere seleccionar para hacer un copy & paste no podrá.
Y como un extra eliminará la opción de "arrastrar imágenes"; como muchos saben esa es otra forma de poder copiar una foto de una página, se arrastra la foto de la página al escritorio de la computadora y listo, habremos copiado la foto. Este código evita esto, ya que deshabilita esa opción, así que las imágenes también estarán protegidas.

Ya lo he dicho antes pero quisiera aclararlo de nuevo. Estoy a favor de que la información gráfica y visual se deba compartir, sin embargo habrá quién no quiera que fotos o textos de su autoría sean robados y circulen por Internet, así que ya dependerá de ustedes qué tanto quieren compartir.

Sigamos. Lo que haremos será entrar a Plantilla | Edición de HTML y marcando la casilla Expandir plantillas de artilugios buscaremos esta línea:
<div class='post-body entry-content'>

Y la cambiamos por esta otra:
<div class='post-body entry-content' oncontextmenu='return false' ondragstart='return false' onmousedown='return false' onselectstart='return false'>

Si no encuentras esa línea entonces busca esta:
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
Y reemplázala por esta:
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody' oncontextmenu='return false' ondragstart='return false' onmousedown='return false' onselectstart='return false'>

Guarda los cambios y listo, no se podrá seleccionar el texto, usar el botón derecho ni arrastrar imágenes dentro de las entradas.
Puedes intentar copiar o arrastrar algo del siguiente ejemplo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ornare eros ut odio malesuada bibendum. http://i35.tinypic.com/m94oed.jpgProin nec magna dolor, vel condimentum ipsum. Proin fringilla placerat leo, in gravida lacus blandit sit amet. Aliquam erat volutpat. Aliquam in risus nibh, et scelerisque magna. Donec neque ligula, viverra ut ultricies sed, tempor in urna. Cras vulputate lectus at urna lobortis ultrices. Fusce in quam quis erat porta vestibulum. Vestibulum a risus urna, sed aliquam nunc. Aenean tempus augue at nibh porttitor a venenatis tellus accumsan. Suspendisse mollis ultricies lectus, ac sagittis turpis blandit pulvinar. Nullam ut odio nulla. Duis vel dolor est. Donec quis facilisis metus.

Este "truquillo" funciona para Internet Explorer, Mozilla Firefox, Safari, Opera y Google Chrome.
Es importante tomar en cuenta que no existe ningún método que sea 100% efectivo pues siempre hay formas de poder copiar contenido, sin embargo con este método dificultará un poco que quien copie pueda hacerlo.








Efecto de Opacidad

Efecto de Opacidad en las imágenes

Hoy vamos aprender a utilizar la propiedad “opacity” de CSS para lograr un elegante efecto de opacidad en imágenes, ya sea en todas las del blog o solo en algunas y que funcione en la mayoría de los navegadores (Mozilla Firefox, Google Chrome, Internet explorer, Opera, Safari).


Ejemplo de transparencia del 50% de opacidad en una imagen y al pasar el cursor vuelve al 100% de su color original.

Para ello vamos a añadir los siguientes estilos, vamos a Plantilla » Edición html y presionando ctrl+f buscaremos la palabra ]]></b:skin> justo arriba de ella pegaremos lo siguiente:

#opacidad img{
filter: alpha(opacity=50);
opacity: 0.5;
}
#opacidad img:hover {
filter: alpha(opacity=100);
opacity: 1;
}

O sino también podemos definir los estilos en la misma página o entrada de la siguiente forma

<style type="text/css">
Aqui el código CSS...
</style>

Luego en la imagen que deseamos aplicar el efecto ponemos el siguiente div con la id opacidad quedando de la siguiente manera el código.
<div id='opacidad'>
<img src='http://3.bp.blogspot.com/-Ubv5ytQgQKg/Usn0tyimlXI/AAAAAAAASQk/0L5LRFSYd6U/s1600/1388988382_facebook.png'/>
</div>

El resultado será el siguiente, pasa el cursor...



Si deseamos aplicar el efecto para todas las imagenes de los post, simplemente vamos a Plantilla » Edición html y presionando ctrl+fbuscaremos la palabra .post img {

y agregamos las etiquetas de opacidad para todos los navegadores 
filter: alpha(opacity=50);
opacity: 0.5;

Y ahora deberemos crear el siguiente estilo

.post img:hover {
filter: alpha(opacity=100);
opacity: 1;
}

Y debemos pegarlo a la terminación del estilo  .post img{...} o lo podemos pegar justo arriba de la palabra ]]></b:skin>

 Aclaración  filter: alpha es la etiqueta  para que la opacidad se visualize en los navegadores de Internet Explorer de la primera versión hasta la número 8 Y opacity: es para que se visualize en todos los demás.


Efecto de opacidad en una imagen al pasar el cursor

Esta vez haremos lo mismo pero sin editar la plantilla, además con dos variantes, una es que una imagen con opacidad tome su color normal al pasar el cursor sobre ella, y otra que una imagen con color normal se muestre opaca al pasar el mouse.
Imagen con opacidad y color normal al pasar el mouse



<img style="opacity: 0.2; filter:alpha(opacity=20);" src="URL de la imagen" onmouseover="this.style.opacity=1;this.filters.alpha.opacity='100';" onmouseout="this.style.opacity=0.2;this.filters.alpha.opacity='20';"/>

Imagen normal y efecto de opacidad al pasar el mouse.



<img src="URL de la imagen" onmouseout="this.style.opacity=1;this.filters.alpha.opacity='100';" onmouseover="this.style.opacity=0.2;this.filters.alpha.opacity='20';"/>

Sólo pega el código dentro de una entrada o un elemento HTML/Javascript y cambia lo que está en rojo por la URL de la imagen.



Efecto de Opacidad

Efecto de Opacidad en las imágenes
Con el CSS se puede  hacer maravillas y hoy les enseñare algo practico que se puede hacer con un pequeña linea de código CSS.

Se trata de un hermoso efecto de opacidad en las imágenes, este efecto se ve en acción cuando se pasa el cursor sobre la imagen.

Así se ve el truco (pasa el cursor sobre la imagen)

Para añadir este truco a tu blog, ve a Plantilla, Editar HTML, y busca lo siguiente:

<b:skin>...</b:skin>

Allí das clic en la flecha que aparece al lado de este código y busca la etiqueta  ]]></b:skin> y arriba de esta añade lo siguiente:

#social img:hover {opacity: 0.6;}

Guardas los cambios.

Ahora cada vez que quieras que una imagen tenga el efecto de opacidad pega en la edición HTML de la entrada lo siguiente:

<div id="social">
<img alt="efecto opacidad"  src="URL DE LA IMAGEN" title="Imagen con efecto Opacidad" /></div>

Donde dice URL DE LA IMAGEN pon la url de la imagen que quieres que lleve el efecto de opacidad y listo.


Cambiar imagen por otra al pasar el cursor

Lo mejor de este truco es que se logra sin scripts, solo haciendo uso de un pequeño codigo.
Para usar este truco solo tienes que pegar en la Edición HTML de una entrada  o pagina, el siguiente codigo:

Reemplaza lo esta en color azul por la URL de la imagen inicial, y lo que esta en color naranja por la URL de la imagen que cambiará al pasar el mouse.

Como vez es un truco muy facil de añadir y con un poco de imaginación le puedes dar multiples usos.