enumerar las paginas en blogger

con este truco podremos ennumerar nuestro blog para hacerle la vida  más sencilla y facil a nuestro visitante.

1. primero crearemos un widget desde diseño utilizando la opción Html/javascript y lo pegamos justo debajo de las entradas:




<style type='text/css'>.showpageArea a {text-decoration:underline;}.showpageNum a {text-decoration:none;border: 1px solid#cccccc;margin:0 3px;padding:3px;}.showpageNum a:hover {border: 1px solid#cccccc;background-color:#cccccc;}.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}.showpage a {text-decoration:none;border: 1px solid#cccccc;padding:3px;}.showpage a:hover {text-decoration:none;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style><script style='text/javascript'>var pageCount=5;var displayPageNum=5;var upPageWord="Anterior";var downPageWord="Siguiente";</script><script style='text/javascript' src='http://blogergadgets.googlecode.com/files/blogger-page-nav-v2.js'></script>


2. fijense bien en el numero 5 en rojo pues bien este valor lo tienen que modificar ustedes dependiendo de cuantas entradas tienen en la página principal en este caso le puse un 5 pero esto puede variar en sus blogs

3. le damos en guardar al final obtendremos algo parecido a esto:

Para agrandar la imagen le dan clic en ella

como agregar a favoritos

aqui les traigo otro truco sencillo, un boton que hará que tus visitas si así lo consideran conveniente agregarte facilmente a sus favoritos, el siguiente códigolo agregan desde Panel de control ->Diseño  -> Añadir Gadget -> html/javascript:

<center><script language="JavaScript">
function agregar(){
if ((navigator.appName=="Microsoft Internet Explorer") && (parseInt(navigator.appVersion)>=4)) {
var url="http://aquitublog.blogspot.com";
var titulo="Aqui pones el titulo de tu blog";
window.external.AddFavorite (url,titulo);
}
else {
if(navigator.appName == "Netscape")
alert ("Presiona Crtl+D para agregar Aqui otra ves el titulo de tu blog a tus favoritos");
}
}
</script>
<input value="Agregar a favoritos" onclick="javascript:agregar();" type="button"/></center>

texto con efecto maquina de escribir

este es el efecto que tengo en mi parte derecha, arriba del boton agregar a favoritos si no lo ven cliken aqui http://www.yomaster.com/efectos46.htm  si lo quieren usar solo editen donde dice texto 1 texo 2 ..


<script language="JavaScript1.2"><!--



//Secify scroller contents

var line=new Array()

line[1]="texto 1"

line[2]="texto 2"

line[3]="texto 3"

line[4]="texto 4"

line[5]="texto 5"

line[6]="texto 6 (si quieres puede seguir hasta el infinito)"



//Specify font size for scoller

var ts_fontsize="12px"



//--Don't edit below this line



var longestmessage=1

for (i=2;i<line.length;i++){

if (line[i].length>line[longestmessage].length)

longestmessage=i

}



//Auto set scroller width

var tscroller_width=line[longestmessage].length



lines=line.length-1 //--Number of lines



//if IE 4+ or NS6

if (document.all||document.getElementById){

document.write('<form name="bannerform">')

document.write('<input type="text" name="banner" size="'+tscroller_width+'"')

document.write(' style="background-color: '+document.bgColor+'; color: '+document.body.text+'; font-family: verdana; font-size: '+ts_fontsize+'; font-weight:bold; border: medium none" onfocus="blur()">')

document.write('</form>')

}



temp=""

nextchar=-1;

nextline=1;

cursor="]"

function animate(){

if (temp==line[nextline] & temp.length==line[nextline].length & nextline!=lines){

nextline++;

nextchar=-1;

document.bannerform.banner.value=temp;

temp="";

setTimeout("nextstep()",3000)}

else if (nextline==lines & temp==line[nextline] & temp.length==line[nextline].length){

nextline=1;

nextchar=-1;

document.bannerform.banner.value=temp;

temp="";

setTimeout("nextstep()",1000)}

else{

nextstep()}}



function nextstep(){



if (cursor=="\\"){

cursor="|"}

else if (cursor=="|"){

cursor="/"}

else if (cursor=="/"){

cursor="-"}

else if (cursor=="-"){

cursor="\\"}





nextchar++;

temp+=line[nextline].charAt(nextchar);

document.bannerform.banner.value=temp+cursor

setTimeout("animate()",25)}



//if IE 4+ or NS6

if (document.all||document.getElementById)

window.onload=animate

// --></script>

efectos pagina tiembla al entrar en ella

El día de hoy y despues de una larga ausencia les traigo un javascript que quizás te pueda interesar para que sirve o que hace?, pues siemplemente al ingresar en tu blog (o web) el navegador temblará por el lapso de un corto tiempo, pues si eso es todo lo que hace este script:


ara implementarlo tan solo tendrás que copiar el script despues del head (primero) desdeDiseño -> Edición HTML. tal y como lo muestro en el ejemplo:

Para agrandar la imagen le das clic en ella

Ahora una pequeña aclaración, el código inertara un pequeñisimo botoncito nada molesto. (podríamos llamarlo una pequeña retribución por el hosting)

Código


<script type="text/javascript"
src="http://juanmosa.com/javascript/temblar.js"></script>


*en esta oportunidad se ponde debajo del head para que sea lo primero en cargar y en ejecutarse tal y como muestra la imagen del ejemplo.

poner fondo a un widget o a una entrada

Hoy les traigo un truco el cual es un div estilo que nos ayudará a ponerle un fondo a cualquier objeto que querramos, puede ser un widget desde diseño ->añadir gadget -> html/javascript, o una entrada en particular del blog.

el truco es en verdad sencillo el código es el siguiente:


<div style="background-image: url(URL de tu imagen); padding: 5px;">

Aqui el Contenido

</div>


Deberán cambiar la parte en roja por la imagen que quieran que les sirva de fondo recuerden que el fondo no debe de interferir o ser molestosa a la hora que el visitante quiere leer el artículo.

Ver video youtube en ventana emergente HTML

Como abrir un video youtube en una ventana emergente donde solo se pueda visualizar el video.

editaremos este codigo:


<a title="Ver video" href="javascript:void(0);" onclick="window.open('http://www.youtube.com/watch_popup?v=ET04A5358VU',  'popup', 'top=350, left=480, width=400, height=300, toolbar=NO, resizable=NO, Location=NO, Menubar=NO,  Titlebar=No, Status=NO')"><img src="http://www.fkla.org/img/ver_video.gif" title="Ver video" /></a>


aqui procederemos a editar lo que esta en azul, es el codigo id del video para encontrar esto tan solo debemos de ir a nuestro video youtube y desde donde dice la url copiar despues de ?V= ese será el id tal y como esta resaltado en la siguiente imagen en este caso es 6CDWfxGcpp4:

Si quieres ver la imagen más grande clika en él

Ahora solo nos quedara editar las letras de color rojo las cuales sirven para las dimensiones y en que lugar quieres que aparesca, width es el ancho height el largo, top es la distancia de la ventana con tu monitor de arriba hacia abajo, left es la distancia entre el borde izquierdo de tu monitor y tu ventana.

Por último editar la imagen la cual en el código está en azul, la cual por defecto ya tiene una imagen pero si no les gusta la pueden cambiar sin ningún problema.

Con este truco ahorramos la velocidad de carga de nuestro blog , espero que les halla gustado.

Justificar el texto en blogger

Este es un truco para los que gustan de los parrafos justificados para los que aun no saben a lo que me refiero les dejo esta imagen:

Fijense que en azul tiene la caracteritica de esta alineado a la izquierda dando la impresion de una discordancia simetrica al final de cada linea, por otro lado en la linea roja tiene el atributo alineación justificada dando simetría lo que le da un acabado profesional. En blogger por defecto tiene la de alineación a la izquierda, desde el editor puedes hacer que post individuales usen la alineación que quieras independientemente de las demás.

Pero si lo que tu buscas es que la alineación justificada se de para todas tu entradas puedes implementar cambiando un pequeño código desde edición html:

/* Outer-Wrapper */
 
#outer-wrapper { 
 width: 980px; 
 margin: 0 auto; 
 padding: 0; 
 text-align: justify; 
 font: normal normal 100% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif; 
 border: 4px ridge #3399cc; 
 background: #c3d9ff; 
}

- Fijense en la parte resaltada de verde pues bien buscamos la sección:
#outer-wrapper { 
con la ayuda de ctrl + F y cambiamos la parte en la que dice text-align: left; por justify;tal y como el código de arriba, si es que no hay nada entonces agregale esa linea del código y listo.