by Slash Kizar
Esto es lo que necesitamos para tener una imagen flotante en blogger que permita cerrarse para que no estorbe.
En nuestro Blogger vamos a la pestaña
Diseño >
Edición de HTML y antes de
<HEAD> pegamos esto:
<script type='text/javascript'>
//<![CDATA[
var ftr_arr = new Array();
var ftr_clear = new Array();
function ftrFloat(ftr) {
ftr_arr[ftr_arr.length] = this;
var ftrpointer = eval(ftr_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.ftrsrc = document.all? document.all[ftr] : document.getElementById(ftr);
this.ftrsrc.height = this.ftrsrc.offsetHeight;
this.ftrheight = this.cmode.clientHeight;
this.ftroffset = ftrGetOffsetY(ftr_arr[ftrpointer]);
var ftrbar = 'ftr_clear['+ftrpointer+'] = setInterval("ftrFloatInit(ftr_arr['+ftrpointer+'])",1);';
ftrbar = ftrbar;
eval(ftrbar);
}
function ftrGetOffsetY(ftr) {
var ftrTotOffset = parseInt(ftr.mtasrc.offsetTop);
var parentOffset = ftr.ftrsrc.offsetParent;
while ( parentOffset != null ) {
ftrTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return ftrTotOffset;
}
function ftrFloatInit(ftr) {
ftr.pagetop = ftr.cmode.scrollTop;
ftr.ftrsrc.style.top = ftr.pagetop - ftr.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("ftr_imagen").style.visibility = "hidden";
}
//]]>
</script>
Luego antes de
</body> pegamos lo siguiente:
<div id='ftr_imagen'>
<img border='0' class='close' onClick='closeTopAds();return false;' src='iconClose_13x13px.gif'/>
</div>
(donde iconClose_13x13px.gif es una imagen de 13x13 pixeles que servira de boton cerrar para nuestra imegen flotante)
Por último antes de
]]></b:skin> pegamos esto:
#ftr_imagen {
background: url(imagen_flotante.png) no-repeat;
bottom: 0px;
right: 0px;
width: 128px;
height: 128px;
position: fixed;
}
.close {
float: right;
padding-right: 10px;
cursor: hand;
cursor: pointer;
}
(donde imagen_flotante.png sera cambiada por la URL de la imagen a utilizar, y modificaremos width que es el ancho y height es el alto de la misma)
Fuente: http://ciudadblogger.com/2010/01/imagen-flotante-con-opcion-de-cerrar.html
by Slash Kizar
Esto va entre
<head> y
</head>
<script type='text/javascript'>
window.onload = detectarCarga;function detectarCarga() {document.getElementById("imgLOAD").style.display="none";}
</script>
Y esto en donde quieras que aparesca:
<div id="imgLOAD" style="text-align:center;">
<img src="URL-DE-LA-IMAGEN"/>
</div>
by Slash Kizar
Esto va entre
<head> y
</head>
Para Firefox:
<style type='text/css'>
body { cursor:url('http://www.tupagina.com/tucursor.png'),pointer; }
</style>
Para Internet Explorer:
<style type='text/css'>
BODY { cursor:url(http://www.tupagina.com/tucursor.cur); }
</style>
by Slash Kizar
Hay que pegar esto antes de la linea
]]></b:skin> en el codigo HTML del blog:
pre {
background:transparent url(http://img509.imageshack.us/img509/3046/codema7.png) no-repeat 0 0; /* Imagen Superior, si desas cambiarla modifica lo que se encuentra dentro de url(AQUI) */
padding-top:24px; /* Relleno - para ajustar Fondo */
}
pre code {
overflow:auto; /* Determina si es necesario agregar barras de Scroll */
background-color:#fffbe5; /* Color de Fondo en Hex */
border:1px solid #fff1a3; /* Color de Borde en Hex */
color:#7e1f09; /* Color de letra en Hex */
display:block; /* No tocar */
padding:5px; /* Relleno del cuadro */
white-space:pre; /* No tocar */
text-align:left; /* Alineacion del Texto , left=izquierda, center= centrado, right=derecha */su
min-height:63px; /* Altura minima del Cuadro */
}
/* Cuando pase el Mouse sobre la caja ocurrirá lo siguiente: */
code:hover {
background-color:#FEFEDD; /* Color de Fondo en Hex */
border:1px solid #ffd511;/* Color de Borde en Hex */le
}
Ahora cada que quieras agregar un codigo solo tienes que pegarlo entre
<pre><code> y
</code></pre>
Fuente:
http://www.trucosblogger.com/2007/07/cuadro-de-codigo-para-tu-blog.html
También puedes utilizar este más sencillo:
<pre style="overflow: auto; font-size: 8pt; width: 200px;">
aqui va el codigo
</pre>
Para poder escribir codigo sin que el navegador lo tome como parte de la misma pagina puedes utilizar estos sitios web:
http://www.simplebits.com/cgi-bin/simplecode.pl
http://nosetup.org/php_on_line/convertir_html_texto
http://chuano.net/chuano/util/convsimbolos.php
by Slash Kizar
Solo hay ke agregar esto donde quieras que aparesca:
<form method="get" action="http://www.google.com">
<table bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" border="0">
<tr>
<td><a href="http://www.google.com">
<img src="http://www.google.com/logos/Logo_25wht.gif" border="0" alt="Google" align="absmiddle">
</a>
</td><td>
<input type="text" name="q" size="15" maxlength="255" value="">
</td><td>
<input type="submit" name="btnG" value="Buscar en Google">
</td>
</tr>
</table>
</form>
quedara asi:
by Slash Kizar
Hay que poner esto en cualquier lugar del codigo HTML:
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://img249.imageshack.us/img249/8649/arrowup.png"/></a>
by Slash Kizar
justo antes de la linea
body { hay poner lo siguiente:
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
y ya! xD
