Utilizando este código podrás evitar que los visitantes de tu blog te copien una imágen que consideres importante

, que hayas creado tú y te moleste su uso sin tu permiso, etc. Simplemente tienes que pegar éste código allí donde quieras poner la imagen :
<img src=" URL de la imagen " oncontextmenu=" alert('Aviso al intentar copiar');return false" oncopy="alert(' Aviso al intentar copiar');return false"/>

1. Debes sustituir la URL de la imagen, por la correspondiente dirección. 2. Debes sustituir Aviso al intentar copiar, 2 veces, por el texto que saldrá cuando alguien intenté copiar la imagen. 3. (No necesario) En éste código se utiliza un poquito de Javascript. Puedes personalizar (además del mensaje que saldrá en la ventana de aviso) el icono que aparecerá; puedes cambiar alert, por confirm, por ejemplo.

Con este truco, y teniendo dos imágenes del mismo tamaño, puedes conseguir que al pasar el cursor por encima de ella, se muestre la segunda. Puedes ver un ejemplo colocando el cursor encima de la imagen del elemento "Configuración" de la sidebar de este blog, o bien en la siguiente imagen:

1. Colocaremos en el lugar de la entrada o en un Elemento HTML donde queremos conseguir este efecto el siguiente código: <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL DEL ENLACE"><img style="display: block;" src="URL DE LA PRIMERA IMAGEN" onmouseover="this.src='URL DE LA SEGUNDA IMAGEN'" onmouseout="this.src='URL DE LA PRIMERA IMAGEN'" /></a> 2. Cambiamos simplemente 2 veces la URL DE LA PRIMERA IMAGEN y una vez URL DE LA SEGUNDA IMAGEN. Además, si queremos que al pinchar en la imagen, esta te dirija a algun sitio, cambiamos URL DEL ENLACE por la dirección deseada. Si queremos que la imagen no dirija a ningun sitio, simplemente eliminamos esta parte: href="URL DEL ENLACE"

1. Pon un cursor halloweño en tu blog (También sirve para cualquier otro cursor): Probablemente ya habrás visto el cursor del fantasmita que sale en este blog. Pues ponerlo es muy fácil, basta con añadir un poco de CSS en la Edición de Html de tu plantilla. 1º: Buscamos un cursor que nos guste por internet. En la página www.totallyfreecursors.com/search.cfm?q=halloween puedes encontrar muchos

cursores de Halloween, aqui tienes varios ejemplos y la URL que ahora después utilizaremos:

http://downloads.totallyfreecursors.com/cursor_files/ghost.cur

http://downloads.totallyfreecursors.com/cursor_files/tombstone1.ani http://downloads.totallyfreecursors.com/cursor_files/witch2.ani 2º: Con nuestro cursor elegido, vamos a Diseño> Edicion de HTML de la plantilla:

(Puede que os salga despues de algo asi: /*-- (Generales) --*/ ) Ahora buscamos (Ctrl+F): body { Y debajo pegamos... cursor: url("AQUI-LA-URL-DEL-CURSOR-QUE-NOS-GUSTE"); Y ahora ya puedes GUARDAR LA PLANTILLA.

Me pregunta BEYOND cómo poner imágenes de fondo en el título de ciertos gadgets. El truco a continuación se aplica a cualquier gadget del blog y bien puede usarse para poner una imagen decorativa de fondo en el título, o bien para sustituir el título del gadget por una imagen.

Lo primero que hay que hacer es identificar el id del gadget al que se le quiere poner la imagen, para ello entra a Diseño > Edición de HTML y SIN marcar la casilla de expandir artilugios busca el gadget al que vas a modificar, lo puedes identificar por el título, por ejemplo Etiquetas, o Lista de blogs. <b:widget id='Label1' locked='false' title='Etiquetas' type='Label'/>

En este ejemplo el id del gadget es Label1 y corresponde a las etiquetas del blog. Ya teniendo el id del widget, pega antes de ]]></b:skin> lo siguiente:

(URL de la image ) le top;
§

Y as s cesivame te para todos los gadgets a los que quieras ponerle la imagen de fondo, s lo debes cambiar la URL de la imagen y en color cambiar el color del te to del título. 
 § ¦ 

Si lo prefieres también puedes cambiar todo el título por una imagen, s lo que en su lugar pegamos antes de ]]></b:s in> esto: #Label1 h2 { bac ground: url(URL de la imagen) no-repeat top; heigth: 30px; }
¢  

De igual forma hay que cambiar la URL de la imagen, y en heigth poner el alto de la imagen. Ahora ve a Di e > leme t e la pági a, da clic en itar en el gadget al que le cambiaste el fondo y borra el título del gadget, en su lugar escribe esto: &nbsp;
! " !    

De esta forma el título del gadget no se encimará con la imagen de fondo.

Con estos sencillos trucos podrás tener una plantilla cada vez más personalizada, ya s lo es cuestión de que agregues las imágenes que se adapten al diseño de tu plantilla
#

CO

O PARA FO

O DE PANTALLA 

 

¤ ¦ © ¨§¦¥¤

#Labe 1 2 { bac color: #000; }
¡ ¢ £

 

_

<style type="text/css">body {background-image: url("http://img39.imageshack.us/img39/6973/fondogotico2columnas.jpg"); backgroundposition: center; background-repeat: no-repeat; background-attachment: fixed; }</style><div id="tag" style="position:absolute; left:0px; top:30px; z-index:50; width:150px; height:45px;"><a href="http://decoratublog.blogspot.com/" target="_blank"><img border="0" src="http://img385.imageshack.us/img385/9625/decoratubloggq6.jpg" /></a></div>

F T S C N LINK

Una vez obtenida la url de nuestra imagen, la colocamos en este sencillo código, donde dice URL_DE_IMAGEN y en el mismo código, colocamos la página que queremos linkar, es decir, la dirección web que se abrirá al pinchar sobre la imagen, en URL_DE_WEB:

<a href="URL_DE_WEB"><img src="URL_DE_IMAGEN"></a> <a href="http://www.elblogdelosblogs.blogspot.com"><img src="http://ladireccionwebdelafoto.jpg" /></a> Para que el enlace al pinchar en la imagen se abra en página nueva, añadiremos el target="_blank" al final del enlace: <a href="URL_DE_WEB" target="_blank"><img src="URL_DE_IMAGEN"></a>

TITUL EN M VIMIENT <script language="JavaScript1.2"> var message="Bienvenidos a goles y mujeres" //Aquí va el título del blogvar message=message+" "i="0"var temptitle=""var speed="150" //Este es el tiempo en milisegundos entre cada letrafunction titler(){if (!document.all&&!document.getElementById)returndocument.title=temptitle+message. charAt(i)temptitle=temptitle+message.charAt(i)i++if(i==message.length){i="0"temptitl e=""}setTimeout("titler()",speed)}window.onload=titler</script>
CURSOR MAUSE PARA EL BLOG

<style>HT L,B DY{cursor: url(http://cursors4.totallyfreecursors.com/thumbnails/soccerball.gif), url("http://cursors4.totallyfreecursors.com/thumbnails/soccerball.gif"), auto;}</style>
% % $ $

El pedacito que colocarás es este (recorté las URL).Todo lo que está entre <style></style>inclusive:

<style>HT L,B DY{cursor: url("http://cursors4.totallyfreecursors.com/thumbnails/soccerball.gif"), url("http://cursors4.totallyfreecursors.com/thumbnails/soccerball.gif"), auto;}</style>

Fleches arriba abajo

Colocar las flechitas o indicar con un cartelito la posibilidad de navegar mas rápido por la página del blog es una buena decisión, sobre todo si tu post es extenso.

Este truco tiene dos partes. Primera: se trata de colocar un script antes de </h d>. Vas a Diseño > HT L > y busca </head>. Recuerda que puedes usar Ctrl. + F para acelerar la búsqueda. Justito antes de </head> pegas este código.
'& (

<!-- Prototype y Scriptaculous--> <script src= http://www.google.com/jsapi'/> <script> google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;); google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;); </script> <!-- Prototype y Scriptaculous-->
)

Guarda el cambio.

Segunda parte: ahora vamos a las flechitas y la posición en tu blog. Debes buscar </body> . Vuelve a usar Ctr. + F. Justito antes pega este código:

<a href='#outer-wrapper' onclic ='new Effect.ScrollTo(&quot;outer-wrapper&quot;,{offset:-140}); return false'><img border='0' src='URL de l imagen' style='position:fixed; top:0; right:0;' title='Arriba'/></a>
1

<a href='#footer-wrapper' onclic ='new Effect.ScrollTo(&quot;footer -wrapper&quot;,{offset:-140}); return false'><img border='0' src='URL de la imagen' style='position:fixed; bottom:0; right:0;' title='Abajo'/></a>

Reemplaza donde dice URL de la imagen por la imagen que quieras usar. Puede ser una flecha, un cartelito, lo que desees. Si quieres uno completo te lo dejo armado a continuación, así lo insertas y listo.

<a href='#outer-wrapper' onclic ='new Effect.ScrollTo(&quot;outer -wrapper&quot;,{offset:-140}); return false'><img border='0' src='http://2.bp.blogspot.com/_qgZA1ny_dAs/ 0QFsV1WD7 /AAAAAAAADhs/ZBKrnpzqBrk/s200/arrow8a.png ' style='position:fixed; top:0; right:0;' title='Arriba'/></a>
3 2

<a href='#footer-wrapper' onclic ='new Effect.ScrollTo(&quot;footer -wrapper&quot;,{offset:-140}); return false'><img border='0' src='http://4.bp.blogspot.com/_qgZA1ny_dAs/ 0QKJ3oGf7 /AAAAAAAADis/m4YOx1C9N2g/s320/arrow8b.png ' style='position:fixed; bottom:0; right:0;' title='Abajo'/></a>
3 2

Guarda los cambios. Verás a la derecha de tu blog las imágenes, para subir y bajar por el blog con efecto deslizante. Les dejo una página con miles de íconos. Este es el enlace a las flechas (arrows). http://icons.mysitemyway.com/free-icons-clipart-tagged/arrow/748/. Espero les sea útil.Saludos y una excelente semana! Si quieren me votan en este botoncito verde. Gracias!

Una pregunta muy recurrente es cómo crear un menú horizontal en Bl gger. Si bien hay vari s tipos de menú que podemos emplear este me parece muy sencillo de instalar y muy vistoso pues da un efecto de resaltado al pasar el mouse sobre el menú.

0

0

0 0

Primero entra a Di > Edi ió d H ML y pega antes de ]]></b kin> lo siguiente: /* Menú hori ontal ----------------------------------------------- */ #menu ul { margin: ; list-style:none; #menu li {display:inline;margin: ;padding: ; #menu a { float:left;background:url http://lh5.ggpht.com/_qgZA1ny_dAs/SlimLLGQf4I/AAAAA AAAB-g/ I9AdhUdng/lefttabbed.png) no-repeat left top;margin: 1.5px 0 1.5px;padding:0 0 0 4px;text-decoration:none; #menu a span {float:left;display:block; background: url http://img148.imageshack.us/img148/8764/tabbedlarge.png) no -repeat right top;padding:5px 12px 4px 12px;color:#fff; #menu a span {font: bold 12px Arial Helvetica, sans-serif; color:#000; float:none; #menu a:hover span {color:#fff; #menu a:hover {background-position:0% -27px; #menu a:hover span {background -position:100% -27px; .clear {clear:left /* Fin del menú */
@ 5 9 8 765 4

Ahora busca esta etiqueta: <div id='content-wrapper'> Y pega debajo de ella esto: <!-- Menú hori ontal --> <div id='menu'> <ul> <li><a href='URL del enlace'><span>Título 1</span></a></li> <li><a href='URL del enlace'><span>Título 2</span></a></li> <li><a href='URL del enlace'><span>Título 3</span></a></li> <li><a href='URL del enlace'><span>Título 4</span></a></li> </ul> </div> Sólo debes cambiar los datos que est n en rojo por los tuyos. Puedes agregar las pestañas que quieras, sólo añádelas antes de </ul>.

/* Menú hori ontal ----------------------------------------------- */

#menu ul { margin:0; list-style:none; #menu li {display:inline;margin:0;padding:0; #menu a { float:left;background:url http://lh3.ggpht.com/_dsEG33PDaHw/Sk0PpgVjCmI/AAAA AAAAABo/1ngE9K8oKUM/s128/lefttabbed-blue.PNG) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 7px;text-decoration:none; #menu a span {float:left;display:block; background: -repeat right url http://img514.imageshack.us/img514/9711/tabbedblue.png) no top;padding:5px 12px 4px 12px;color:#fff; #menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#000; float:none; #menu a:hover span {color:#fff; #menu a:hover {background-position:0% -27px; #menu a:hover span {background -position:100% -27px; .clear {clear:left /* Fin del menú */

/* Menú hori ontal ----------------------------------------------- */ #menu ul { margin:0; list-style:none; #menu li {display:inline;margin:0;padding:0; #menu a { /Sk0Ppu0JhrI/AAAAA float:left;background:url http://lh5.ggpht.com/_dsEG33PDaHw AAAABs/t0vZPWdFl38/s128/lefttabbed-green.PNG) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 7px;text-decoration:none; #menu a span {float:left;display:block; background: url http://img27.imageshack.us/img27/945/tabbedgreen.png)no-repeat right top;padding:5px 12px 4px 12px;color:#fff; #menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#000; float:none; #menu a:hover span {color:#fff; #menu a:hover {background-position:0% -27px; #menu a:hover span {background -position:100% -27px; .clear {clear:left /* Fin del menú */

/* Menú hori ontal ----------------------------------------------- */ #menu ul { margin:0; list-style:none; #menu li {display:inline;margin:0;padding:0; #menu a { float:left;background:url http://lh4.ggpht.com/_dsEG33PDaHw/Sk0PpoN4alI/AAAAA AAAABw/8ednVAn295Q/s128/lefttabbed-purple.PNG) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 7px;text-decoration:none; #menu a span {float:left;display:block; background: url http://img514.imageshack.us/img514/7015/tabbedpurple.png) no -repeat right top;padding:5px 12px 4px 12px;color:#fff; #menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#000; float:none; #menu a:hover span {color:#fff;

#menu a:hover {background-position:0% -27px; #menu a:hover span {background -position:100% -27px; .clear {clear:left /* Fin del menú */

/* Menú hori ontal ----------------------------------------------- */ #menu ul { margin:0; list-style:none; #menu li {display:inline;margin:0;padding:0; #menu a { float:left;background:url http://lh3.ggpht.com/_dsEG33PDaHw/Sk0Pps0fcVI/AAAAA AAAAB0/HN5FX_MoRMU/s128/lefttabbed-red.PNG) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 7px;text-decoration:none; #menu a span {float:left;display:block; background: url http://img27.imageshack.us/img27/9168/tabbedred.png) no -repeat right top;padding:5px 12px 4px 12px;color:#fff; #menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#000; float:none; #menu a:hover span {color:#fff; #menu a:hover {background-position:0% -27px; #menu a:hover span {background -position:100% -27px; .clear {clear:left /* Fin del menú */

/* Menú hori ontal ----------------------------------------------- */ #menu ul { margin:0; list-style:none; #menu li {display:inline;margin:0;padding:0; #menu a { float:left;background:url http://lh5.ggpht.com/_dsEG33PDaHw/Sk0PpvhhHeI/AAAAA AAAAB4/-BK98lkjqZs/s128/lefttabbed-yellow.PNG) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 7px;text-decoration:none; #menu a span {float:left;display:block; background: url http://img34.imageshack.us/img34/5144/tabbedyellow.png) no -repeat right top;padding:5px 12px 4px 12px;color:#fff; #menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#000; float:none; #menu a:hover span {color:#fff; #menu a:hover {background-position:0% -27px; #menu a:hover span {background -position:100% -27px; .clear {clear:left /* Fin del menú */

http://free125cards.com/main.php?g2_page=31 ( pagina para crear bannes)

Sign up to vote on this title
UsefulNot useful