Las plantillas de Vistas Dinámicas son muy modernas e interesantes, pero a algunas personas no les gusta que esté el logo de Blogger en todas partes. Cada vez que nuestro blog está cargando nos aparece una imagen con el logo de Blogger diciendonos que nuestro blog se está cargando. La imagen es la siguiente :
Para cambiarla debemos hacer lo siguiente :
Si usas la antigua interfaz entra en Diseño | Diseñador de plantillas | Avanzado | Añadir CSS. Y si usas la nueva interfaz entra en Plantilla | Personalizar | Avanzado | Añadir CSS
Si buscas que no aparezca ningún icono agregá lo siguiente:
Guarda los cambios y listo. Con eso no aparecerá nada mientras cargue el blog.
Si buscas reemplazar la imagen que viene por defecto (la del logo de Blogger con los engranajes) agregá lo siguiente :
Si quieres cambiar la imagen por otra, cambia la URL que está en color verde.
Hola amigos, hoy les traigo una interesante caja flotante hecha con Css, la cual nos va a permitir tener la opcion de copartir en Google +, Twitter y Facebook. Para utilizarla en nuestro blog debemos hacer lo siguiente:
Antes de ]]></b:skin> pegamos el siguiente código:
Una vez realizado el paso anterior buscamos <div class='post-footer'> y antes de esto pegamos el siguiente código:
Hola gente, hoy les vengo a mostrar como insertar iconos de suscripcion arriba del titulo de las entradas , esto es muy facil y realmente util. Podes ver un ejemplo funcionando en este blog de pruebas .
Antes de ]]></b:skin> pegamos este código :
Los valores marcados en negrita nos permitiran cambiar la posición.
Abajo de <div id='outer-wrapper'> pegamos lo siguiente :
Hola amigos , en esta entrada les traigo un efecto genial para nuestras imagenes ,como lo dice el título de la entrada se trata de que las imagnes rotan y al rotar se agrandan.
Lo primero que debemos hacer es pegar el siguiente código antes de </b:skin>
Con esto ya tenemos los estilos , ahora debemos hacerlos actuar. Para eso vamos a utilizar el siguiente código para agregar las imagenes.
Para agregar otra imagen solamente debemos copiar este código y reemplazar lo que se pide.
Aclaraciones :
TODAS las cosas que se encuentran en negrita pueden ser cambiadas.
width:125px y height:125px : Lo alto y lo ancho de la imagen . # : Esto puede ser reemplazado por un link si queremos .
Hola amigos ,en esta oportunidad les vengo a mostrar como utilizar la letra capital en las entradas de sus blogs. Es muy fácil, a continuacion les voy a enseñar como utilizarlo para una entrada específica o para todas las entradas.
Para utilizarla en todas las entradas solamente tenemos que pegar el siguiente código antes de </b:skin> .
Para agregarlo en una entrada específica pegaremos este código en la parte de "Edicion de HTML" la cual se encuentra justo al lado de "Redactar".
En ambos casos debemos pegar el siguiente código en nuestras entradas para poder usar la letra capital.
Hola amigos hoy les traigo una muy buena y facil manera de crear una galeria de imagenes con CSS3. El resultado que obtendremos será que al pasar el mouse por la imagen , esta se agrandará .
Lo primero que debemos hacer es pegar este código antes de </body>
<style type="text/css">
.hovergallery img{ -webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/ -moz-transform:scale(0.8); /*Mozilla scale version*/ -o-transform:scale(0.8); /*Opera scale version*/ -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/ -moz-transition-duration: 0.5s; /*Mozilla duration version*/ -o-transition-duration: 0.5s; /*Opera duration version*/ opacity: 0.7; /*initial opacity of images*/ margin: 0 10px 5px 0; /*margin between images*/ }
.hovergallery img:hover{ -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/ -moz-transform:scale(1.1); /*Mozilla scale version*/ -o-transform:scale(1.1); /*Opera scale version*/ box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/ -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/ -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/ opacity: 1; }
</style>
Con esto ya tenemos los estilos , ahora debemos agregarle el atributo "hovergallery" a las imagenes para que entre en acción . Para esto vamos a utilizar el siguiente código :
<div class="hovergallery"> <img src="URL DE LA IMAGEN" /> <img src="URL DE LA IMAGEN" /> <img src="URL DE LA IMAGEN" /> <img src="URL DE LA IMAGEN" /> <img src="URL DE LA IMAGEN" /> <img src="URL DE LA IMAGEN" /> </div>
Para agregar mas imagenes solamente debemos agregar esto antes de </div>
El efecto deslizante lo haremos con jQuery, y la burbuja con el texto (el botón) lo haremos con CSS3.
Empecemos: primero ingresa en la Edición HTML de la plantilla, marca la casilla Expandir plantillas de artilugios, y antes de </head> pega el script:
Ahora antes de ]]></b:skin> agrega los estilos:
Por último, busca esta línea:
Justo arriba de ella coloca el contenedor con los botones:
Guarda los cambios y listo. En las anotaciones en color verde he puesto como siempre las áreas que se pueden personalizar como el color de fondo, de texto, etc. En donde dice cellpadding='7' puedes controlar la distancia entre cada botón.
Recuerda que:
Sólo será visible en las entradas individuales, NO en la portada.
La burbuja está hecha con CSS3, así que si usas un navegador viejo como Internet Explorer 8 sólo verás un rectángulo.
En Internet Explorer el botón de Facebook no se verá bien, aunque sí funcionará.
