NOVEDADES
Mostrando entradas con la etiqueta Blogger. Mostrar todas las entradas
Mostrando entradas con la etiqueta Blogger. Mostrar todas las entradas

28 octubre 2018

Decora tu blog para Halloween con criaturas monstruosas en movimiento

Decoración Halloween Blogger

Información

Llega Halloween y es hora de decorar nuestros blogs para el día de los muertos. si quieres que varios monstruos deambulen por  tu blog sigue estos sencillos pasos.

Entra en el panel de configuración de tu blog y en la parte izquierda clica en Tema y después en Edición HTML.

Decora tu blog para Halloween con criaturas monstruosas en movimiento

Una vez allí antes de  </head> pega el siguiente código y dale a Guardar tema.


<script>
//<![CDATA[
// Fall v2.0 By MaxxBlade - http://www.maxxblade.co.uk/fall
var fallObjects=new Array();function newObject(url,height,width){fallObjects[fallObjects.length]=new Array(url,height,width);}
var numObjs=15, waft=100, fallSpeed=5, wind=-1;
newObject("https://1.bp.blogspot.com/-MqrlVxhKj7w/WfN3tkfW9DI/AAAAAAAAhic/LQTQW7VBt4I8DnP5RWUqdAG1PgLQehsfQCEwYBhgL/s1600/Criaturas%2Binfernales%252C%2BPNG%252C%2Bkiketrucker%2B%252813%2529.png",27,23);
newObject("https://3.bp.blogspot.com/-aynRnbX26PI/WfN6LpbcD4I/AAAAAAAAhis/winsIJc7fwEzYCJ01NkmG_ES_rnji8BAwCLcBGAs/s1600/Criaturas%2Binfernales%252C%2BPNG%252C%2Bkiketrucker%2B%252814%2529.png",46,15);
newObject("https://2.bp.blogspot.com/-pmQpJRr-PwQ/WfN6XgiLZxI/AAAAAAAAhiw/S6PQjqtz6XgkHkm5IBLPHuV8nhpMubSnACLcBGAs/s1600/Criaturas%2Binfernales%252C%2BPNG%252C%2Bkiketrucker%2B%25282%2529.png",36,33);
function winSize(){winWidth=(moz)?window.innerWidth:document.body.clientWidth;winHeight=(moz)?window.innerHeight:document.body.clientHeight;}
function fallObject(num,vari,nu){
objects[num]=new Array(parseInt(Math.random()*(winWidth-waft)),-30,(parseInt(Math.random()*waft))*((Math.random()>0.5)?1:-1),0.02+Math.random()/20,0,1+parseInt(Math.random()*fallSpeed),vari,fallObjects[vari][1],fallObjects[vari][2]);
if(nu==1){document.write('<img id="fO'+i+'" style="position:absolute;z-index:9;background:none;border:0;padding:0;box-shadow:none;" src="'+fallObjects[vari][0]+'">'); }
}
function fall(){
for(i=0;i<numObjs;i++){
var fallingObject=document.getElementById('fO'+i);
if((objects[i][1]>(winHeight-(objects[i][5]+objects[i][7])))||(objects[i][0]>(winWidth-(objects[i][2]+objects[i][8])))){fallObject(i,objects[i][6],0);}
objects[i][0]+=wind;objects[i][1]+=objects[i][5];objects[i][4]+=objects[i][3];
with(fallingObject.style){ top=objects[i][1]+winOffset+"px";left=objects[i][0]+(objects[i][2]*Math.cos(objects[i][4]))+"px";}
}
setTimeout("fall()",31);
}
var objects=new Array(),winOffset=0,winHeight,winWidth,togvis,moz=(document.getElementById&&!document.all)?1:0;winSize();
for (i=0;i<numObjs;i++){fallObject(i,parseInt(Math.random()*fallObjects.length),1);}
window.onresize=winSize;fall();
//]]>
</script>


En la parte marcada con color azul verás unas opciones: 

var numObjs=15, es la cantidad de hojas que aparecerán. 
waft=100, es la cantidad de pixeles que se mueven a los lados cuando caen 
fallSpeed=5, es la velocidad
wind=-1; es la dirección en la que caen los elementos, puede ser un valor negativo como está, 0 para que no tengan dirección, o un valor positivo (por ejemplo 1). Si es un valor negativo caerán a la izquierda, si es un valor positivo caerán a la derecha. 

Cada linea como la resaltada en rojo es un elemento, si quieres personalizarlos sólo tienes que cambiar la url de dicho elemento.

Si queréis añadir o cambiar las imágenes en el siguiente post del blog tenéis varias para elegir:

20 agosto 2018

Caja de texto personalizable en blogger con CSS y HTML

Tutorial: Caja personalizada de texto en blogger con CSS y HTML

Información

Resalta partes de un post con una caja de texto personalizable con los colores de tu blog, redondeado de esquinas y bordes.

Como siempre que vamos a tocar la plantilla antes de nada debemos descargar una copia de la misma.

Repasemos como hacerla




Se descargará un archivo con terminación .xml

Hecho esto vamos a clicar en Tema > Editar HTML


En el cuerpo del código HTML pulsamos CTRL+F y escribimos ]]></b:skin>

Justo antes de este cierre colocaremos el siguiente estilo CSS

/*----------- CAJA ----------- */

.caja {
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
color: #ffffff;
font-size: 18px;
font-weight: 400;
text-align: center;
background: #ff7d00;
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
border-radius: 35px 0px 35px 0px;
-moz-border-radius: 35px 0px 35px 0px;
-webkit-border-radius: 35px 0px 35px 0px;
border: 0px solid #5878ca;
}

En la siguiente imagen vemos los principales parámetros a personalizar

Al terminar clicamos en Guardar tema y vamos a ver el código que añadiremos a nuestro post para llamar desde el HTML el estilo antes introducido.

<code>
<div class="caja">Aquí el texto a resaltar</div>
</code>
(Sin el code)

Y este es el efecto conseguido

09 diciembre 2017

Personalizar color de texto seleccionado en Blogger con CSS

Personalizar color de texto seleccionado en Blogger con CSS

Información

Para personalizar el color del texto cuando alguien entra en nuestro blog y selecciona un texto para copiar.

Es bien sencillo, iremos al panel de configuración de Blogger - Tema - Editar HTML y buscaremos clicando CTRL+f  la linea   ]]></b:skin>

Justo antes de esta linea pegaremos el siguiente código:


/* Para Safari */
::selection {
background: #FF7D00;
}

/* Para Firefox */
::-moz-selection {
background: #FF7D00;


Donde el código del color es el que esta marcado en naranja, en esta página puedes obtener los códigos HTML de tu color favorito.

Una vez terminado de elegir el código del color lo cambiamos y damos a Guardar tema

Y listo ya podemos comprobar en nuestro blog como se ha aplicado el color al seleccionar texto, tal y como vemos en la imagen de cabecera.




14 junio 2016

Tutorial: Efecto zoom de imágenes con retardo en CSS3, sólo para las imágenes de los posts en Blogger


Información

Hay varios tutoriales en la red respecto a la aplicación de efectos a las imágenes de nuestro blog, pero despues de estar probando varios de ellos, me molestaba bastante que estos efectos se aplicaran en todas las imágenes del blog y no sólo en las imágenes de los posts, así que me puse manos a la obra para buscar como añadir esta opción y como personalizar despues el efecto, de forma que al pasar el cursor por la imagen hace efecto zoom pero con un retardo de 2 segundos de forma progresiva, cosa que veo más elegante que no un zoom inmediato.

Para conseguir que el efecto se aplique unicamente a las imágenes de los posts, vamos al Panel de control de blogger - Plantilla - Editar HTML, CTRL + F y escribimos img para buscar el tramo de código que nos interesa y que estará situado después de <"skin">

Aqui lo vemos, normalmente, no estará precedido de .post, motivo por el cual quedaba aplicado a todo el blog, es por eso que lo tenemos que anteponer a img.

A continuación de  todo este grupo colocaremos el código.

.post img:hover{
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5)
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}

Donde el valor 1.5 es la proporción de aumento de la imagen y 2 es el tiempo de retardo en aumentar la imagen.


Si no queremos que haya retardo al pasar el cursor sobre las imágenes, eliminaremos todas las lineas donde pone transition, podemos ver este ejemplo en Maraya Life, otro blog donde colaboro en su diseño y mantenimiento. Asimismo también nos servirá para ver otra posible ubicación del código en otra plantilla diferente.


Como vemos en la anterior captura, en este caso hemos añadido el código despues del grupo .post-body

Por último voy a añadir otro efecto que es Efecto Crooked photo,
con este efecto al pasar el cursor rotaremos la imagen hacia el lado izquierdo 7 grados, pero podemos personalizarlo completamente cambiando el valor “-7deg”.


.post img {
margin: 20px;
border: 5px solid #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

.post img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}

 Espero que haya sido comprensible y de utilidad, y como siempre atenderé cualquier duda que pueda solucionar en los comentarios.

07 junio 2016

Tutorial: ocultar creditos en plantillas de blogger resistentes a ello.


Información

Si ya llevas un tiempo en la blogosfera como un servidor y has cambiado de plantilla varias veces de sobra sabes que las plantillas llevan al final de página unos links con los créditos del autor.

Hay plantillas que se dejan fácilmente eliminar o modificar dichos links entrando a Plantilla - Edición HTML
pulsamos CTRL+F y en el campo de escritura ponemos footer-link, damos Enter y veremos algo así


Ahi podemos modificar, o eliminar creditos.

Recordad siempre que haceis algo en el HTML de vuestro blog descargar antes una copia de seguridad.

Pero hay autores que lo ponen algo más difícil, e introducen un script de manera que cuando alguien elimina así su crédito, al ir a cargar su blog, este redirige a la web del autor de la plantilla, algo que considero sucio, si cuelgas una plantilla gratuita, es gratuita sin condiciones y si no ponla de pago.

Asi que hecha la ley se busca la trampa, si sólo queremos ocultar a la vista los creditos, pero que aún sigan ahi y el script  no nos delate, lo que vamos a hacer es decirle que el texto sea del mismo color que el footer, 
para averiguar el color, si usamos Firefox, vamos al panel de opciones - Desarrollador - Selector de color


Y con esto no situamos sobre el color del footer de nuestro blog y capturamos al portapapeles el código HTML del color.

Ahora vamos al editor de la plantilla y escribimos footer-link, y ahi veremos las variables que aplican el color del texto de los links de créditos, los modificamos todos con el código HTML del color que hemos copiado anteriormente, guardamos los cambios y listo los creditos ya no se ven. Pero si pasamos el cursor por encima si que veremos que hay algo.
Otro método sería el siguiente: en el editor ponemos credit y buscamos lo siguiente

Debajo de display:none; añadiremos visibility:hidden; como vemos en la captura.

En otras plantillas en lugar de credit puede poner Attribution.

Salvamos los cambios y listo fuera creditos a la vista, pero ya sabes que siguen ahi.


Visto el primer comentario, creo que debo añadir, que cada plantilla es un mundo y que este truco puede no servir para la que cada uno de vosotros que me leeis usais en vuestro blog, pero intentaré ayudar añadiendo más información y posibilidades.

02 enero 2016

Tutorial: Fijar fondo o Background en blog de Blogger


Información

Por definición cuando entramos en un blog de la plataforma Blogger, y accionamos la rueda del ratón para bajar por la página, vemos que todo el cuerpo del blog se mueve también, tanto el fondo o background como el cuerpo central y los sidebar laterales.

Este comportamiento no resulta demasiado molesto si el  fondo es del blog es de un color determinado, pero si el fondo es una imagen, o como en mi caso un pattern (imagen que se repite y queda como un fondo uniforme) el efecto puede resultar molesto a la vista, aparte de que queda más elegante que lo que se mueve sea el cuerpo central del blog y no todo el conjunto.

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Para conseguir aplicar esto a nuestro blog iremos a

 Configuración de nuestro blog - Plantilla - Editar HTML.


En la ventana de edición de HTML de nuestro blog clicamos en el centro y pulsamos la combinación de teclas Ctrl + F, entonces se nos abre en la parte superior derecha un campo de búsqueda donde copiaremos body { y daremos a Enter de forma que en el cuerpo del HTML quedará resaltada esta linea.


Después de esta linea veremos el background o fondo de nuestro blog y justo a continuación insertaremos la siguiente linea

background-attachment: fixed;

 Hecho esto clicaremos en Vista previa de la plantilla, y si vemos que todo está correcto ya podemos darle a Guardar plantilla, y comprobar al ir a nuestro blog que el cuerpo central y las sidebar del mismo se mueven independientes del fondo.




 
Copyright © 2014 AccionglobalXSoft. Designed by OddThemes