database.kzrteam.file

Imagen flotante en blogger que no estorba

2010-07-25T15:56:00.000-05:00

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

Indicador de carga de la pagina

2009-09-03T12:18:00.001-05:00

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>

Pagina web con puntero personalizado

2009-09-02T17:40:00.004-05:00

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>

Instertar cuadro de codigo en blogger

2009-09-02T14:10:00.003-05:00

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

poner buscador google desde tu pagina

2009-09-01T11:11:00.000-05:00

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:

Crear un boton flotante "back to top"

2009-08-31T21:48:00.001-05:00

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>

Como quitar la barra "navbar" de Blogger

2009-08-31T15:24:00.000-05:00

justo antes de la linea body { hay poner lo siguiente:

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

y ya! xD