Codigo Script Code HTML en Blogger Blogspot con SYNTAX HIGHLIGHTER

.

Ejemplo de código script Htmlo en Blogger con SYNTAX HIGHLIGHTER.





Lechill Mobile
<!-- -->



canvas
{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index:-1
}

#container{
height:580px;}






Your browser doesn't support the HTML5 Canvas. Try using Firefox or Google Chrome



var canvas = document.getElementsByTagName('canvas')[0],
ctx = null,
grad = null,
body = document.getElementsByTagName('body')[0],
color = 255;

if (canvas.getContext('2d')) {
ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 300, 300);
ctx.save();
// Create radial gradient
grad = ctx.createRadialGradient(0,0,0,0,0,600);
grad.addColorStop(0, '#fff');
grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');

// assign gradients to fill
ctx.fillStyle = grad;

// draw 600x600 fill
ctx.fillRect(0,0,1000,1000);
ctx.save();

body.onmousemove = function (event) {
var width = window.innerWidth,
height = window.innerHeight,
x = event.clientX,
y = event.clientY,
rx = 1000 * x / width,
ry = 1000 * y / width;

var xc = ~~(256 * x / width);
var yc = ~~(256 * y / height);

grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 1000);
grad.addColorStop(0, '#fff');
grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));
ctx.restore();
ctx.fillStyle = grad;
ctx.fillRect(0,0,1000,1000);
ctx.save();
};
}













.

¿Te fijaste que al principio del artículo hay una cosa que pone DISCLAIMER?. Pues si se te queman las tostadas por intentar poner en practica lo que dice este articulo o se te raya un CD de El Fary por leerlo no es culpa nuestra. Avisado quedas.

.
Anuncios

Script code codigo PHP, Html, ActionScript3, Bash, Shell, ColdFusion, C# CSharp, Ansi C, C++, Cpp, CSS, Delphi, Pascal, Dif, Diff, Patch, Erl, Erlang, Groovy, Javascript, Java, JavaFX, Perl, Texto Plano, Powershell, Python, Ruby, Scala, SQL, Visual Basic, xml, xhtml, xslt, xhtml en Blogger o Blogspot con SyntaxHighlighter

.

Script code codigo PHP, Html, ActionScript3, Bash, Shell, ColdFusion, C# CSharp, Ansi C, C++, Cpp, CSS, Delphi, Pascal, Dif, Diff, Patch, Erl, Erlang, Groovy, Javascript, Java, JavaFX, Perl, Texto Plano, Powershell, Python, Ruby, Scala, SQL, Visual Basic, xml, xhtml, xslt, xhtml en Blogger o Blogspot con SyntaxHighlighter.

SyntaxHighlighter es un completo y funcional “resaltador de sintaxis del código” desarrollado en JavaScript, por Alex Gorbachov.

     Informacion sobre coloreado o resaltado de sintaxis   
  
 

 “SyntaxHighlighter is an open source Java Script client side code syntax highlighter”.
           Web del Proyecto       
  
        http://alexgorbatchev.com/       

SyntaxHighlighter utiliza distintas sintaxis para distintos lenguajes, en archivos separados llamados Brushses.

     Brushses soportados     
  
   http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/       
Lista de Brushses soportados, y conocidos, en internet.     
 
 http://www.undermyhat.org/blog/2009/09/list-of-brushes-syntaxhighligher

– Nota: –   En estos enlaces se incluyen los alias (class=”brush: alias”) a utiliar y también aparecen los Lenguajes de Programación soportados por SyntaxHighlighter.

>> – Pasos para añadir SyntaxHighlighter a Blogger – <<

1. Hacer una copia de seguridad del Blog, para recuperar los datos en el caso en el que algo salga mal.
2. Ir a Escritorio > Plantilla > Edición de HTML,  Clic en:  Expandir plantillas de artilugios.
3. Pegar en la parte superior de este código:





























SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();


Nota:
No hace falta todo el código. Se puede dejar solo los Brushes de los lenguajes que se utilicen. Por ejemplo, si sólo se utiliza SQL:








SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();

5. Vista previa de la plantilla y si todo funciona bien, a continuación, guardar.

– Etiquetas que se pueden usar –

Script añadido al blog.
Para resaltar correctamente el código del lenguaje, existen dos posibles etiquetas.

1.


. Necesita convertir caracteres HTML.


Your 'HTML' code goes here

– Pasos:

1.1. Copiar el código en alguna Web de la lista:
– .   http://accessify.com/tools-and-wizards/developer-tools/quick-escape/  .-
– .  http://www.string-functions.com/htmlencode.aspx    .-

1.2. Convertir los caracteres especiales y copiar el resultado entre las etiquetas


.

1.3 Clic en Vista Previa, ahora el código HTML se representa correctamente.

2. . No necesita convertir caracteres HTML.


 <! [CDATA [
Your 'HTML' code goes here
]]>
 

– Nota: – Esta etiqueta puede provocar errores.

Más información en la web del autor.

http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html                 

– Temas para SyntaxHighlighter. –

SyntaxHighlighter dispone de temas personalizados CSS. Esto significa que al cambiar un solo archivo CSS, puede cambiar completamente el color de la sintaxis resaltada. Existe un pequeño número de temas con distintos colores, simplemente hay que clic en el tema de CSS para compararlos.

En el código,


se cambia el nombre del archivo: ‘shThemeDefault.css’, para comparar las combinaciones de colores.

 Temas de CSS disponibles  
  
 

– Artículos relacionados: –

– . Scripts en Blogger / Blogspot . –
– .Mostrar scripts en páginas HTML, y blogspot. –

.

¿Te fijaste que al principio del artículo hay una cosa que pone DISCLAIMER?. Pues si se te queman las tostadas por intentar poner en practica lo que dice este articulo o se te raya un CD de El Fary por leerlo no es culpa nuestra. Avisado quedas.

.

Scripts en Blogger / Blogspot

.
<?php 
echo gmdate ("d n y");
?>

Por fin, una forma de alojar e implementar scripts en blogger, de una forma sencilla y fácil. Hacía tiempo que buscaba la manera de colocar scripts en el blog.

Pasos a seguir:

El script no se puede poner directamente entre las etiquetas


, porque da error y no se muestra el script.

El script hay que copiarlo a la página  Blogcrowds , en la que hay una aplicación que se encarga de convertir todos estos caracteres especiales HTML  en su respectivo nombre HTML para que Blogger los muestre y no los interprete, que es donde está el conflicto y el error.

Información:

.

¿Te fijaste que al principio del artículo hay una cosa que pone DISCLAIMER?. Pues si se te queman las tostadas por intentar poner en practica lo que dice este articulo o se te raya un CD de El Fary por leerlo no es culpa nuestra. Avisado quedas.

.

¿Cuál es el formato que más comprime las imágenes?

.

Durante un tiempo, estube subiendo imágenes con extensión .png, y después me di cuenta de que los archivos con extensión .jpg se comprimen más… o_O  ¿Y qué más da una cosa que otra? Pues no da igual, porque resulta que los cachondos de Blogger no dan una capacidad ilimitada de espacio para que se suba y se suba imágenes a sus servidores, y como  para ellos al final es mierda que tienen que mover, puede que consideren dar al usuario  una lección y cerrarle el chiringuito. Tampoco me voy a poner ahora a reemplazar las imágenes, lo subido subido queda, ahí se queda, con cambiar la extensión de ahora en adelante, vale, aunque ya llevo un tiempo subiendo imágenes con extensión .jpg    ^_^ .

Existe la leyenda de que sólo dan 1 GigaByte de capacidad para alojar imágenes. Bueno, también existe la leyenda de que yo soy guapo, por eso no hago caso de ninguna leyenda, ni de la de los mapas. ; )

Voy a comparar unas cuantas extensiones de archivos (.jpg, .gif, etc…) para saber en primera persona cuál de ellas pesa menos, y a partir de ahora subir sólo de esa extensión.
Seguramente ya exista algo parecido a esto en internet, aunque eso a mi me da igual.

La imágen que voy a probar es esta:

Tiene extensión .png y huele mal. Es la mascota de PHP, la boñiga se la añadí yo, la sonrisa ya la tenía. o_O
En la página de ayuda de blogger se puede leer los formatos compatibles, (Preguntas frecuentes sobre la publicación de imágenes.), y dice algo así:

¿Qué tipos de archivo son compatibles?
Puedes subir imágenes en formato JPG, GIF, PNG, TIF o BMP.

El modo de hacer es el siguiente: Edito el original, y lo voy guardando como el archivo nuevo con la extensión nueva, de este modo todos parten del mismo archivo y con la misma calidad.

 Tipos de archivo y el tamaño:

Así se queda la cosa:

1º:  .jpg , 2º:  .gif, 3º:  .png, los demás tipos ocupan demasiado espacio.
El mejor en relación calidad y espacio que ocupa es .jpg.

A partir de ahora sólo subiré imágenes .jpg, que aunque sabía que era un buen formato, no sabia las cifras en las se movia, ahora si, ahora hablo  y juzgo con conocimiento de causa.

Libres domingos y domingas!!! Libertad para ambos!!

…Y aprovechando la ocasión: Tibet Libre!!

 
.

Subir video a blogger: algo imposibles con el editor actualizado.

En blogger son una panda de cachondos, ¿porqué?Pues porque el botón de subir videos a blogger no está en el editor nuevo.
En el l editor viejo, que creo que es el que dejan por defecto, viene un botoncito con el que puedes subir un video:

No voy a decir cómo se sube un video a blogger porque hay millones de artículos al respecto.
En el editor nuevo o actualizado, como se quiera llamar, no han puesto esta herramienta:

 
Si, si, mucha pijotada, pero del botoncito para subir un video… ni rastro.
Aunque no pasa nada porque, se puede crear un post o articulo con el editor actualizado, guardarlo, y usar el editor viejo, también llamado ‘El que te dejan by default (por defecto)’, para subir un video, si es que se quiere, para ponerlo en ese artículo. 
Esto creo que es perfectamente válido, aunque no he usado este método, porque no tengo videos para subir..  o_O
Demasiado trajín para un blog…

Error en Blogger – Error en Blogspot


.

A veces suele pasa este error en blogger al intentar logearse en blogspot, la solución es sencilla, simplemente clic en ATRAS en el navegador y ya se entra en el usuario, eso si es que se dió el caso de que salió el error cuando siempre se ha entrado sin problemas.
En el caso de que nada más hacerse el blog, salga el error, lo mejor es seguir las instrucciones.

.

How to – Cambiar el color de fondo de la plantilla del blog de blogger


.

Bueno voy a estar un tiempo con este estilo, al más puro estilo de El lado del mal, que parece que con este color de fondo :  #113355  parece que se leen mejor las letras. No lo sé.

Para poner el mismo color de fondo que el que hay ahora hay que hacer lo siguiente:

Clic en Diseño – Fuentes y colores – Seleccionar color de fondo de la página:

Y en Editar el código hexadecimal de color, se escribe: #113355

Creo que es azul verdoso o verde claro, no lo tengo claro.

.

How to – Cómo cambiar de plantilla en blogger / blogspot y no cagarse en su puta madre.


.

El otro día vi que la web Joaquín, uno más se hizo un un lavado de cara, es decir que cambió de apariencia. Yo también estaba buscando hace tiempo cabiar de forma y estilo este blog, pero no encontraba ningún template o plantilla que me gustase para poner/instalar.

Siempre me ha gustado el estilo de El lado del mal, así que hoy, después de buscar  por fín encontré una web en la en la que salían plantillas que me gustan:  Florwex – Plantillas y recursos para blogger.

Así que me he decidido por una plantilla y la he instalado….

Pero hay cosas que hay que hacer antes de instalar una plantilla en blogger, blogspot o como coño se llame esta puta web.

——–Mini corta y pega, que en el post de su web hay mas—————-
Estos son los códigos que he copiado directamnete del blog de Hoctro:
Plantilla Blanca

Plantilla Azul

Plantilla Negra

Plantilla Ocre

——–FIN—-Mini corta y pega, que en el post de su web hay mas———–FIN—–

      He subido las plantillas aquí, por si fallaran los enlaces anteriores, este enlace contiene solo tres primeras; la blanca, la azul, que yo creo que es verde, y la negra, La ocre no.      

-Pero se le ha olvidado poner en su post una cosa, el post hace una lista de todo lo que hay que hacer:

—Mini corta y pega—
¿Cómo insertar la nueva plantilla?

1º Entra en vista html de tu plantilla.
2º Guarda tu plantilla (copia de seguridad)
2.1—Aqui le faltó decir: Por si acaso haz copias de tus widgets o enlaces no sea que se pierdan para siempre.
3º Carga la plantilla que elegiste. 
3.1 —AQUI LE FALTÓ DECIR ALGO—
4º Dale a vista previa.
Si te gusta lo que ves, Guarda los cambios
—Fin ——-

3.1 – ¿Qué le faltó decir?

Pues que al cargar la plantilla nueva, en el caso de que se tenga widgets sale un Warning para avistar que se puede perder todos los enlaces de los widgets que se tienen en la página.
Esto quiere decir que si se tiene por ejemplo, una lista de enlaces a webs interesantes (a esto se le llama widget, si no se tiene cuidado se puede borrar, y borrar para siempre. Este es el mensaje de Alerta

Mensaje: Warning: Your new template does not include the following widgets.
Traducción de Google:Warning: Your new template does not include the following widgets.”>Advertencia: El nuevo modelo no incluye los siguientes artilugios.

Lo que quiere decir que, la nueva plantilla que se va a instalar no tiene los widgets o los nuevos widgets que se tiene en la vieja plantilla.

Clic en Mantener Widgets, de lo contrario se perderá todo lo que se tenga en el blog, como la lista de enlaces a webs, ultimos comentarios y todos los demás widgets.

– Esto es lo que sigue, después del 5º Paso.  

La seguridad ante todo, y antes de manipular nada lo mejor es hacerse una copia de seguridad hasta de las legañas y trabajar y manipular sin miedo, porque si pasa algo inesperadamente malo, siempre se podrá restaurar a lo anterior que se tenía, de lo contrario, puedes destruir el blog / la web, sin querer.

Por no tener una copia de seguridad actualizada del blog, se me fue a la mierda casi la totalidad de los enlaces… . Tengo una copia de seguridad de los enlaces pero no es muy actual, porque despues de hacerla he ido borrando algunos y añadiendo nuevos enlaces…
Con el tiempo y poco a poco iré restaurando el blog y poniendo de nuevo todo lo que se ha jodido con la nueva plantilla, no se si dejarlo así en negro, o pasarme al azul, aunque yo creo que es verde.

Conclusión final:  lo principal es la seguridad.

.

Mostrar scripts en páginas HTML, y blogspot


.

Para poder mostrar código de algún script de cualquier lenguaje, que yo sepa ahora mismo, exiten tres etiquetas; code, pre,  quote y blockquote. Por ejemplo en blogspot el código de los scripts se estropea al pegarlo, el editor se pasa de listo… tanto corregir.

Para saber más o menos como muetra cada etiqueta un scritp aqui ahi algunos ejemplos:
Para empezar, este es el código o script sin ninguna etiqueta:

#include

int main()
{
int i;
for(i=1;i < =100;i++)
puts(“No tiraré papeles en clase.”);
return 0;
}

– Ejemplo con la etiqueta blockquote:

#include 
int main()
{
   int i;
   for(i=1;i < =100;i++)       puts("No tiraré papeles en clase.");  return 0; }

– Ejemplo con code.

#include
int main()
{
int i;
for(i=1;i < = 100;i++) 

  puts("No tiraré papeles en clase."); 
return 0; 

– Ejemplo con la etiqueta pre

#include 

int main()
{
int i;
for(i=1;i < =100;i++)
puts("No tiraré papeles en clase.");
return 0;
}

– Ejemplo con quote:

#include

int main()
{
int i;
for(i=1; i <  =100;i++) puts("No tiraré papeles en clase."); return 0; }

Al final el script/código siempre acaba jodido, al menos aquí en en blogspot.
Otra forma sería pegar una imágen, pero está el problema del espacio, y el peso de la imágen, es decir, una imágien simpre pesa más que cuaquier script que se pueda pegar en la web… y el espacio en una web es limitado.

¿Entonces?¿Cómo pegar un script en la web sin que se joda?¿Cómo hago para pegar un script y que se quede como yo quiero?
Pues no tengo ni zorra idea de cómo se hace, aunque hay formas de hacerlo y que más o menos se quede como se quiere.

No se yo si de esta forma…

rojo - verde - azul

De esta forma se estropea el script también...

#include
int main()
{
int i;
for(i=1; i < =100;i++)
puts("No tiraré papeles en clase.");
return 0;
}

#include

int main()
{
int i;
for(i=1; i < =100;i++)
puts("No tiraré papeles en clase.");
return 0;
}

Para ver cómo se queda el código al final, seleccionarlo, clic derecho, ver código fuente.
Visto lo visto, lo mejor al final será un imágen, aunque ocupe más espacio, sale como quiero que salga.

No sé si existe la forma, yo no lo a he encontrado de momento, por algo soy un supuesto informático.
Solcución encontrada de momento: Imagen y despues un enlace para descargar el script si procede.

.

Problemas con los comentarios.

Acabo de solucionar un problema con los comentarios: que no funcionaban…
Al hacer click en los comentarios, no se por qué, no funcionaban, asi que me he
puesto manos a la obra y a toquetear y trastear en las opciones del
blogspot y ya parece estar solucionado.

De todas formas si ocurriese algun error, agradecería que me lo dijeran,
un saludo a todo aquel que gaste su tiempo en leerme.