Hacer indice de entradas con imágenes

¿Cómo saber quién se ha suscrito a mi blog?

Recibir actualizaciones por e-mail

Hacer indice de entradas en blogger

Evita que copien el texto+fotos de tus entradas (Blogger)

Hacer indice de entradas en #blogger

Hola

Vengo con este video tutorial para blogger, si preferís que lo haga escrito con fotos dejarmelo en los comentarios.

En la próxima os enseñaré ha hacer estos indices para blogger, web o wordpress con imágenes.

» Redondear las esquinas de tu blog en blogger

Hola a todos mis soñadores

Vengo con un tutorial la mar de sencillo y fácil de hacer, no hace falta saber de html ni programación ni nada de nada.

Por si acaso os pongo un video.

Tutorial blogger: Copia seguridad, subir plantilla, leer más y cita-blockquote

Hola

Os traigo este mini tutorial para que sepáis como hacer una copia de seguridad de la plantilla de vuestro blog,subir una plantila nueva, que os salga el leer más y un texto resaltado (cita/blockquote) en blogger.

Próximos tutoriales, agendas y más

Buenos días

Traeremos nuevos tutoriales para que aprendáis photoshop nivel básico y para que podáis manejar vuestros blogs y podáis hacer las cosas por vosotros mismos

Archivo del blog en forma de calendario

Hola mis soñadores

¿Os gustaría un tutorial para vuestros blogs y cambiar el aspecto del gadget/widget "archivo del blog" y tuviese este aspecto de calendario?

» [Tutorial blogger - Redes sociales] Añadir botón Facebook y próximos

» [Tutorial blogger - Redes sociales] Añadir botón Facebook y próximos

Buenos días corazones

Por petición de tutoriales hoy vengo de como añadir el botón de facebook a vuestros blogs y los próximos que voy a publicar, este mismo tutorial lo subiré también al blog literario "Aprendiendo sencillamente (LearningTrue)"

Los próximos tutoriales serán el de "Tutorial sobre añadir pestaña de sigue leyendo en los post y dejar un inicio más sintetico" pero hoy será el de "añadir botón de facebook" y "añadir vuestro facebook"

Para pedir tutoriales y ver el indice de tutoriales, hasta ahora publicados, dándole click aquí o en el menú de arriba donde pone tutoriales

Existen dos tipos de botones que puedes añadir a tu blog: el de "follow (seguir)" y el de "share/like (compartir)". No sólo se puede hacer con facebook, sino también con twitter, LinkedIn y Google+, aunque hoy os quiero enseñar, por petición, los de Facebook.

Botón de Follow. Dale click aqui  y personaliza el botón a tu gusto. Genera el código (HTML5, XFBML O IFRAME) y ponlo en el lugar en el que quieres que aparezca (añadir un gadget en tu blog).

Caja de Like ("me gusta"). De forma similar al botón de Follow, dale click aqui. También existe el botón de like click aqui para personalizar el tuyo.

Botón de enviar. Para facilitar a los usuarios que visitan tu blog que puedan compartir los contenidos en sus perfiles crea el botón de enviar/compartir click aqui.

Compartir enlaces. Si quieres que tus visitantes compartan enlaces directamente, dirígelos a http://www.facebook.com/share.php?u=http://bit.ly/2n6sj01 donde el enlace despues de "u=" (en este caso, un enlace de bit.ly) es el link al artículo/entrada que se quiere compartir. Por ejemplo: ¡Comparte esta entrada!.

Todos los botones están recogidos en la página de Facebook están dandole click aqui

Para los que no sepáis que es bit.ly es una web que te acorta los enlaces

» [Tutorial blogger] Redondear las imágenes en tu blog

¿Cómo Redondear Una Imagen Con Código HTML o CSS?

Hoy vengo con otro tutoríal súper fácil de hacer, te daré varias opciones, elige la que más te apetezca, pero OJO cambia el enlace de la imagén que he puesto como ejemplo por la que tu quieras redondear, tendrás que subir las fotos en algúna plataforma, tipo tumblr y después copiar el enlace de la imágen.

» [Tutorial blogger - Redes sociales] Pájaro de twitter volando

Buenos dias y feliz domingo

Seguimos con la sección de tutoriales del blog, que será todos los domingos, a menos que alguien solicite otro tutorial y se publicará en una nueva entrada además de la que haga el domingo.

Esta vez os quiero mostrar un truco fácil y muy chulo, que es colocar el pájaro de twitter volando libremente, además de permitir a los que entran a nuestro blog, al pinchar sobre este pájaro azul les lleve a vuesra cuenta de twitter.

» [Tutorial blogger] Personalizar títulos gadgets

Buenas mis soñadores

Vengo con otro tutorial para blogger, que me han pedido via whatssap, que es, como dice el título de la entrada, personalizar los títulos de los gadgets de tu blog de blogger.

Para personalizar los títulos de los gadgets vamos a Plantilla → Personalizar → Avanzado → Añadir CSS y pegamos el siguiente código

» Protege tu blog

Buenas tardes mis amores

Por una petición os quiero traer esa entrada de como proteger tu blog (de blogger) y no puedan copiarte nada de nada.

Para que podáis hacerlo este blog no está protegido, porque si no no podréis copiar los que os voy a poner a continuación..

» Seguir varios blogs en blogger a la vez

Hoy os vengo con una, de varias opciones, de seguir varios blogs de blogger usando, vaya la rebuznacia tu perfil de blogger.


Os lo pongo en forma video.

» Tutorial menú desplegable

Hola

Debo decir que estoy súper contenta porque habéis estrenado el formulario para pedir tutoriales, tú también puedes hacerlo además de ver el indice de tutoriales, hasta ahora publicados, dandole click aquí o en el menú de arriba donde pone tutoriales

Uno de los tutoriales que nos han pedido es poner un menú desplegable en nuestro blog, en el próximo tutorial será un menú que se desplaza.

Aunque parece muy complicado, es muy sencillo. Recuerdo cuando empecé con mi blog en blogger, que no tenía ni idea de cómo iba todo y leí “menú desplegable”, te juro que en ese momento lo flipaba en colores y lo veía como una misión imposible, quien me iba a decir a mi que más tarde estaría enseñándote a ti y a todos mis dreamers cosas sobre blogging y blogger y que iba a ser yo quien te lo iba a enseñar a ti como hacer este menú para tu blog.

¿Tienes todo preparado? Lo que vas a necesitar es abrir el escritorio de tu blog, para poder entrar en diseño y en plantilla cuando lo necesites y un word, sí, un word, yo lo hago así porque me es más fácil.

Me siento como las típicas personas que te van a enseñar manulidades, pero yo te lo voy a enseñar todo paso a paso, no voy a hacer como ellos que cortan y de repente está ya todo perfecto, que cuando lo intentas hacer tú te sale todo fatal. Ahora sí  ¿empezamos?

Escoger las categorías y subcategorías que quieres poner en el menú.

Yo, antes de empezar con el html ni esos rollos me miro bien mi blog y escojo que categorías y subcategorías quiero poner. Como siempre te voy a poner ejemplos, de un blog de literatura, que me encanta leer
.
Ejemplo nº1: Blog de literatura – Puedes hacer categorías que sean reseñas, autores, entrevistas, etc. Las subcategorías podrían ser por ejemplo en los reseñas: leido 2016, leido 2017.

Ejemplo nº2: Blog de moda/maquillaje – Siempre puedes poner las típicas categorías de verano, invierno, primavera y otoño.. En el caso de maquillajes también pueden ser día y noche o por colores. Sólo tú sabes realmente de que hablas en tu blog y que categorías harían que estuviese mejor organizado y fuese más fácil para tus lectores navegar por él. De subcategorías serían todos los colores que hayas usado o también, si eres una fanática de todo tipo de pantalones, incluso puedes hacer una que sea pantalones y de subcategoría todos los tipos de pantalones que has enseñado a combinar.

Lo que sí te aconsejo es que dejes siempre la primera pestaña como “inicio” porque les será más fácil a tus lectores entender que si quieren volver a ver la página de inicio deben darle allí, también funciona clicando a la imagen de portada, pero he visto sitios en los que no, así que no está de más nunca tener esa pestaña. .

Elabora el menú

Antes: No olvides hacer una copia de seguridad de tu plantilla yendo a Diseño –> Plantilla –> Crear/Restablecer copia de seguridad y guardas la plantilla actual antes de hacer ningún cambio.

Ahora ya sabes que categorías y subcategorías vas a poner en tu blog, así que vamos a elaborar el menú para que puedas instalarlo en tu blog. Ahora debes abrir un word en blanco y pegar allí el siguiente código, no te olvides ninguna coma ni nada, si te olvidas de algo el código no funcionará.
que para añadirlo a tu blog tienes que darle a diseño: edición html y buscar este código y pegar el código de abajo justo después de esta linea <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>:

<div id='menu-desblegable'>
<ul class='menu'>
 <li><div id='buscar-top'><form action='/search' id='searchthis' method='get' style='display: inline;'>
<input class='search-box' name='q' placeholder='BUSCAR' size='30' type='text'/>
</form></div></li>
<li><a href=''>Inicio</a></li>
<li><a>Seccion 1</a>
<ul>
<li><a href='aquienlaces'>Seccion 1a</a></li>
<li><a href='aquienlaces'>Seccion 1b</a></li>
<li><a href='aquienlaces'>Seccion 1c</a></li>
</ul>
  </li>
<li><a href='aquienlace'>Seccion 2</a></li>
<li><a>Seccion 3</a>
<ul>
<li><a href='aquienlace'>Seccion 4a</a></li>
<li><a href='aquienlace'>Seccion 4b</a></li>
<li><a href='aquienlace'>Seccion 4c</a></li>
<li><a href='aquienlace'>Seccion 4d</a></li>
<li><a href='aquienlace'>Seccion 4e</a></li>
<li><a href='aquienlace'>Seccion 4f</a></li>
</ul>
  </li>
</ul>
</div>

Ahora, una vez tengas pegado el código en tu word deberás cambiar lo siguiente:
Naranja: Cambiarlo por la url que corresponda a cada categoría o subcategoría o a la de tu blog si se trata del inicio.
Verde: Cambiar por el nombre de cada categoría o subcategoría.
Si te fijas, en las categorías desplegables tienes un # donde supuestamente iría el enlace de la pestaña, si quieres que simplemente sea el nombre de la categoría para ordenar tus pestañas desplegables deja el #, si  por el contrario quieres que también el “título” del desplegable también lleve a alguna parte de tu blog en concreto ponle el enlace en el lugar del # y solucionado.
Nota rápida: Recuerda que para saber que url tiene una etiqueta lo único que tienes que hacer es clicar en la etiqueta y copiar la url que aparezca.

¿Necesitas añadir más…?

Añadir más subpestañas: Sólo tienes que copiar <li><a href=’URL‘>Subcategoría 1</a></li> debajo de la última subcategoría y solucionado, cópialo tantas veces como te haga falta, sobretodo no te olvides que va justo antes de </ul>.
Añadir más categorías desplegables: Para esto deberás copiar más código y pegarlo donde lo necesites, en concreto el código será este, que para añadirlo a tu blog tienes que darle a diseño: edición html y buscar este código y pegar el código de abajo justo después de esta linea <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>:

<div id='menu-desblegable'>
<ul class='menu'>
 <li><div id='buscar-top'><form action='/search' id='searchthis' method='get' style='display: inline;'>
<input class='search-box' name='q' placeholder='BUSCAR' size='30' type='text'/>
</form></div></li>
<li><a href=''>Inicio</a></li>
<li><a>Seccion 1</a>
<ul>
<li><a href='aquienlaces'>Seccion 1a</a></li>
<li><a href='aquienlaces'>Seccion 1b</a></li>
<li><a href='aquienlaces'>Seccion 1c</a></li>
</ul>
  </li>
<li><a href='aquienlace'>Seccion 2</a></li>
<li><a href='aquienlace'>Seccion3</a></li>
<li><a>Seccion 4</a>
<ul>
<li><a href='aquienlace'>Seccion 4a</a></li>
<li><a href='aquienlace'>Seccion 4b</a></li>
<li><a href='aquienlace'>Seccion 4c</a></li>
<li><a href='aquienlace'>Seccion 4d</a></li>
<li><a href='aquienlace'>Seccion 4e</a></li>
<li><a href='aquienlace'>Seccion 4f</a></li>
</ul>
  </li>
</ul>
</div>

Añadir más categorías simples, sin desplegables: Simplemente deberás copiar <li><a href=’URL‘>Categoría</a></li> y pegarlo donde lo necesites.
Igualmente si tienes cualquier duda o necesitas ayuda para elaborar tu menú, contáctame y te ayudo.
Una vez tengas elaborado tu menú deberás ir a Diseño y en el apartado que pone “cross-column”, donde visualmente estaría el menú, añadir un gadget html/javascript y pegar tu código html con tu menú hecho.

Dale tu toque al menú

No me mates, lo se, tu menú está todo descuadrado y ni funciona ni nada, lo se, ahora lo que debes hacer es darle tu estilo y todo irá de maravilla. ¿cómo dices? Con CSS. Ves a Plantilla –> Personalizar –> Avanzado –> Añadir CSS y pega este código (no te olvides ni una coma):

#menu-desblegable {
margin:auto;
width:100%;
background:#81368e; /*Color de fondo de la barra*/
height:40px; /*Anchura de la barra*/
border-bottom: 4px solid #adbcdc; /*Línea de debajo del menú, si no queréis borrad esta línea*/
position:fixed; /*Para que la barra se quede fija*/
z-index:101; /*Para que la barra se quede fija*/
}
ul, ol {
list-style:none;
}
.menu > li {
float:left;
}
.menu{
margin:0 auto;
width:800px; /*Ancho del menú dentro de la barra, variaremos este valor hasta conseguir el que buscamos*/
}
.menu li a {
color:#ffffff; /*Color de las letras de las pestañas*/
font:normal normal 15px Georgia; /*Tamaño y tipografía de las pestañas*/

letter-spacing: 2px; /*Espaciado entre caracteres, si no queréis borrad la línea*/
text-decoration:none;
padding:10px 20px;
display:block;
cursor:pointer;
}
.menu li a:hover {
color: #cccccc; /*Color de las pestañas al pasar el ratón por encima*/
}
.menu li i{ /*Esto es para los iconos sociales, si no los tenéis borrad este bloque*/
color: #adbcdc; /*Color de los iconos sociales*/
font-size: 14px; /*Tamaño de los iconos sociales*/
}
.menu li i:hover{ /*Esto es para los iconos sociales, si no los tenéis borrad este bloque*/
color: #ffffff;  /*Color de los iconos sociales al pasar por encima*/
}
.menu li ul {
background-color: #98bbe6; /*Color de fondo de las subpestañas*/
display:none;
position:absolute;
min-width:140px;
}
.menu li ul a { /*Si queréis que la letra sea igual que las pestañas, borrad esta línea*/
color: #000000; /*Color de las letras de las subpestañas*/
font:normal normal 14px Times New Roman; /*Tamaño y tipografía de las subpestañas*/
text-transform:uppercase; /*Para que esté en mayúsculas, sino borrad la línea*/
letter-spacing: 2px; /*Espaciado entre caracteres, si no queréis borrad la línea*/
}
.menu li ul a:hover { /*Si queréis que la letra sea igual que las pestañas, borrad esta línea*/
color: #ffffff; /*Color de las letras de las subpestañas al pasar el ratón por encima*/
}
.menu li:hover > ul {
display:block;
}.search-box{ /*Para cambiar la apariencia de la cajita*/
width:90%; /*Tamaño de la caja entera*/
text-align:center;
padding:3px 0; /*Altura de cajita*/
color:#9c0202; /*Color de las letras cuando escriba el usuario*/
border:1px solid #cccccc; /*Tamaño, estilo y color del borde, si no queremos borde borrar la línea*/
background:#ffffff; /*Color de fondo*/
font: normal normal 11px Lato; /*Tamaño y tipografia de la palabra BUSCAR (o la que hayas escrito)*/
border-radius:2px; /*Bordes redondeados, si no los quieres, borrar esta línea*/
}

#buscar-top{ /*Para colocarla bien dentro de nuestra barra*/
margin-top:6px; /*Variar para colocarlo bien de altura*/
margin-right:0px; /*Variar para colocarlo bien a lo ancho*/

}

Para encontrar el codigo del color que quieres puedes encontrar una gama amplia en esta página, puedes cambiar todos los que te he marcado en azul que son #numerodelcolor, además puedes cambiar el tipo de borde y la letra y tamaño de ésta. Es muy fácil y lo único que tendrás que ir haciendo es tocando lo que te he marcado en azul hasta que encuentres. Tienes un visor que te va enseñando los cambios, el problema es que no podrás ver las subpestañas, así que yo lo que hago es ir guardando y viendo el blog directamente para así poder ver el desplegable y todo.

Últimos consejos:

1. Utiliza colores que combinen bien con tu blog, no pongas colores a lo loco y intenta que los colores de la tipografía y el fondo no contrasten mucho. Por ejemplo, no pongas fondo negro con letras verde fosforito porque no se va a poder ver nada bien y va a molestar a la vista.
2. No hagas desplegables infinitos, escoge tus categorías y subcategorías importantes. Si tienes muchas, revisa seriamente tu blog porque entonces quiere decir que estás abarcando mucho más trabajo del que deberías y puedes acabar agobiándote.
3. Pon las categorías importantes, no pongas una pestaña dedicada a premios. Todos conocemos los premios que nos damos unos blogs a otros, se agradecen mucho pero no hace falta que uses el menú para ponerlos, yo cometí ese error y me arrepiento mucho. El menú es una forma muy  visual de ver de que trata tu blog.
4. Tomate con calma esto de hacer tu menú desplegable, como si tardas una semana, sin agobios.

Fanpage artista

Fanpage Dreaming Graphics

/>

Twitter Seguir a @fagrafics

¿Nos regalas un tweet?

Tweet to @FAGrafics