Páginas De Café: Tutoriales

Mostrando las entradas con la etiqueta Tutoriales. Mostrar todas las entradas

23 de octubre de 2016

Tutorial { Personalizar botones de compartir de Blogger}

Tutoriales octubre 23, 2016

Hola!!!

Ya hace tiempo que no me aparecia por aqui, pero la verdad es que no estoy leyendo NADA, y como a mi no me gusta saturar el "inicio" de mi blog con cosas repetitivas.. como 2 o 3 book tags y top 10... sin que haya (es haya o halla? xd ) por lo menos una reseña, ya ire a comprar libros, pero la verdad estoy super indecisa y no se ni que comprar... !!! QUIERO TODOS!!
El tutorial de hoy trata de personalizar los botones de compartir de un post ^^

ESTE TUTORIAL ESTÁ TOMADO DE AQUÍ

4 de octubre de 2016

Tutorial {Agregar Botón Subir Arriba}

Tutoriales octubre 04, 2016

Hola Viajeros, en vista de que no puede subir el tutorial el lunes pasado se los traigo hoy, y no es nada menos que algo fácil y sencillo.

Nuestro botón de subir arriba nos permitirá al usuario volver a la cabecera de tu blog facil y rapido,

Por ejemplo: Si no usas que conforme vaya bajando el usuario el menú de igual manera vaya bajando (sin que sea molesto o muy grande), así como el mio, y tu menú son las "páginas/pestañas" que te brinda blogger, entonces este botoncito le ahorrará mucho trabajo a tu visitante volver al menú y visitar más secciones de su interés ;).

➴1 Añadir una gadget

Nos vamos a Diseño ➡ Añadir un gadget ➡ HTML.

☛ Podrán añadirlo tanto en el sidebar como en el footer, es indiferente, ya que con el código que le vamos a poner, le vamos a decir que se coloque en la parte inferior derecha del blog.

➴2 Añadimos el código HTML

Le añadimos el siguiente código:

Y modificaremos lo siguiente:

bottom:5px;right:20px; ➡ Este código lo pueden dejar así, pero si quieren dejar más o menos espacio entre el botón y los márgenes del blog pueden cambiar el número de píxeles.

20 de septiembre de 2016

Tutorial {Menú horizontal con subpestañas y buscador integrado}

Tutoriales septiembre 20, 2016

Hola bloggeros, la semana pasada y ayer no subi tutorial pero hoy les traigo uno muy útil, y es un menú horizontal desplegable/subpestañas y con buscador, OJO, no en todos los blogs funcionan todos los menús... así que si este no os sirve lo lamento mucho pero tendrán que buscar en otro lado, de igual manera yo al paso del tiempo subire diferentes menús (horizontales y verticales). Así que espero y que les funciones.

El siguiente menú está hecho únicamente con CSS, es un menú horizontal con subpestañas, y del lado derecho tiene un buscador redondeado.

(ACLARO: El tutorial es de ciudad blogger y os dejo una entrada en donde esta persona os enseña a modificar su plantilla para utilizar cualquier menú; entrada: LINK )

Para poner este menú horizontal con submenús en tu blog entra en la Edición HTML de tu plantilla, y antes de ]]></b:skin> pega los estilos:

PEGAS ESTO:

5 de septiembre de 2016

Tutorial: Botones de Redes Sociales con transiciones CSS3

Tutoriales septiembre 05, 2016

Como todo lunes llega el TUTORIAL!!! bueno hoy les enseño a poner una bonita forma de poner sus redes sociales. Estos botones son para enlazar tus redes sociales: Facebook, Twitter, Google+, RSS Feed, y suscripción por correo.

Lo que a muchos les resulta atractivo es el efecto que tienen cuando se pasa el cursor sobre ellos, ya que el ícono se mueve hacia arriba mientras el fondo cambia de color. el tutorial lo cogí de CIUDAD BLOGGER... por si os gustan a pasarse a ver otros tutoriales.

VAMOS A VERLOS

Este gadget lo veremos en dos versiones, uno con 5 botones pequeños alineados de forma horizontal, y otro de 4 botones un poco más grandecitos y alineados en dos columnas. Están hechos con sprites y transiciones CSS3.

Cualquiera de las dos versiones las vamos a colocar de un solo paso, es decir, pegando tanto los estilos como la estructura HTML dentro de un gadget, ¿por qué? por pereza nada más, pero quien quiera poner los estilos en su lugar correspondiente de la plantilla podrá hacerlo sin ningún problema.

Entonces, para ponerlos en tu blog, entra en Diseño | Añadir un gadget | HTML/Javascript y ahí pega el código de los botones que más te gusten.

Este es la primera versión de 5 botones.

Este es el código que deberían pegar en el gadget (debes dar click en HTML )

Aqui el codigo:

29 de agosto de 2016

Tutorial: {Personalizar los titulos de los post}

Tutoriales agosto 29, 2016

Hola lectores y bloggeros, el lunes pasado no subi tutorial, la verdad es que se me olvido, hay ocasiones en la que se me olvida que tengo un blog :D, en fin, es personalizar los títulos de los post/entradas.

Esta algo largo pero es debido a que les muestro diferentes formas de personalizarlos a sus gustos y hay bastantes imágenes. Espero y os guste ^^

PERSONALIZAR LOS TÍTULOS DE LOS POST

Para utilizar cualquier código de este tutorial deben de ingresar a Plantilla → Personalizar → Opciones personalizadas → Añadir CSS

Título con recuadro

.post h3 {
border: 2px solid #000000; /**Grosor y color del recuadro**/
margin:.25em 0 0;
padding:0 0 0px;
font-size:170%; /**Tamaño del texto**/
line-height:1.4em; /**Altura del recuadro**/
}
h3.post-title a, h3{
color: #000000; /**Color del título**/
text-align: center; /**centrar título**/
}

Recuerda jugar con los bordes y colores!

__________ Solid

.................... Dotted

--------------- Dashed

========= Double

Te quedara algo asi:

Les explico un poco lo de los bordes:

Border: 2px Solid #000000 | Sirve para cambiar el aspecto, de este código debemos de cambiar las variables de border: (2px indica el grosor del recuadro) ( Solid: indica el estilo del recuadro que puede variar según el ejemplo de las siguientes imágenes) (#000000: indica el color del recuadro | (ver más colores)

15 de agosto de 2016

Tutorial {Valoración de Estrellas}

Tutoriales agosto 15, 2016

Hola Bloggeros, el tutorial de hoy trata de esa valoración de 0-5 estrellas que le damos a los libros reseñados, muchos crean sus imágenes y otros bueno prefieren ahorrarse todo ese lio. Bueno pues hoy les traigo dos formas de poner estas estrellitas :D.

Valoración de estrellas en las entradas del blog

Así se veria en su blog este diseño :D Bien ahora les explico como hacerlo.

Vamos a ir a PLANTILLA ↣ PERSONALIZAR ↣ AVANZADO ↣ AÑADIR CSS ↣ PEGAS EL CODIGO QUE TE DARÉ MÁS ABAJO ↣ DAS ENTER ↣ APLICAR AL BLOG/GUARDAR.

El código que vas a pegar es el siguiente:

/* Estrellas de valoración
----------------------------------------------- */
.val-fieldset {
width:100px;
border:none;
font-weight:bold;
font-size:12px;
}
.valoracion {
width: 100px;
height: 21px;
display: block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy9UKytnRwOvD2bt715HbYE43SRqDS9B-crZ0HN778hwrh4-7cMcq9sFMjyC-wQwSADbQ9FndRANyzGIztP0efEa2RPcCq12Eq1z1fbc5wYflVQR9zGvz3AemwUD1ELIZm13NNN-sOaSo/s0/estrellas.png) 0 0 no-repeat;
}
.val-0 {background-position: -100px -0;}
.val-5 {background-position: -81px -21px;}
.val-10 {background-position: -81px 0;}
.val-15 {background-position: -61px -21px;}
.val-20 {background-position: -60px 0;}
.val-25 {background-position: -40px -21px;}
.val-30 {background-position: -40px 0;}
.val-35 {background-position: -21px -21px;}
.val-40 {background-position: -21px 0;}
.val-45 {background-position: 0 -21px;}
.val-50 {background-position: 0 0;}

Y luego en tu entrada donde quieras mostrar la calificación agrega lo siguiente:

8 de agosto de 2016

TUTORIAL: AGREGA BOTÓN 'LEER MÁS'.

Tutoriales agosto 08, 2016

¡Hola Viajeros! Esta vez les traigo un tutorial sumamente sencillo y se trata del famoso "BOTON LEER MÁS". Este botón ayuda a que aparezca un pedazo de cada entrada en el inicio, no la entrada completa, para que no ocupe tanto espacio y sea más cómodo leer. Al hacer clic en 'Leer más', la entrada se abre en una pestaña nueva y se pude leer completamente.
Les mostrare 2 formas de personalizar :D asi que por lo tanto esta algo largo :D

PERSONALIZAR CON UNA IMAGEN MUY MONA

Deben dirigirse a Plantilla →Editar HTLM, allí deben buscar: <data:post.jumpText/>

*dan CTRL + F y en la parte superior derecha donde comienza lo de la plantilla les saldrá un cuadro en el que pegaran <data:post.jumpText/> y dan enter y ya os sale el texto.)

Borran ese código y pegan el siguiente:

Pongan el enlace de la imagen que quieren que aparezca y ajustan hasta que tenga el tamaño que ustedes desean.

✞Si desean centrar la imagen:

✞ Si quieren alinear la imagen a la derecha:

✞ Si quieren alinear la imagen a la izquierda:

2 de agosto de 2016

Tutoriales

Tutoriales agosto 02, 2016

PON MONO TU BLOG (Diseño de gadgets y Botones)

DISEÑO DE ENTRADAS (TEXTO E IMÁGENES)

🔱 Valoración de estrellas (Útil para puntuaciones como en reseñas)
🔱Personalizar los títulos de los post/entradas

MENÚS

Desplegables (subpestañas)

🔱 Menu horizontal con buscador integrado

Tutorial: Personalizar "Entradas Populares"

Tutoriales agosto 01, 2016

Hola lectores bloggueros <3
Hoy les traigo el primer tutorial del blog y es la personalización de Entradas Populares/favoritos.
Espero y les gusten los diferentes modelos que les traigo :D.

⚓ Paso 1:
Deben ir a Diseño>Agregar un gadget.
Allí buscan el gadget que llamado Entradas populares, una vez que lo encuentren hacen clic en el botón de agregar.

⚓ Paso 2:
Una vez agregado y ubicado el gadget, deben dirigirse a Plantilla>Personalizar>Opciones avanzadas>Agregar CSS.
Allí pegan código del estilo que elijan a continuación, el cual pueden modificar a su gusto, ya que al lado de cada elemento hay una pequeña descripción que les indica qué es cada uno: