Como modificar "Mostrando entradas con la etiqueta..."

29 de noviembre de 2015

Modificar mostrando entradas con la etiqueta

Muy buenos días queridos angelitos Hoy les traigo un nuevo tutorial, en el les enseñaré como dejar bonito el mensaje de "Mostrando entradas con la etiqueta..." que aparece en un feo recuadro gris cuando miramos las etiquetas/secciones en nuestro blog.

Les mostraré como pueden borrarlo o modificarlo, poniéndole otro mensaje y cambiando su aspecto

Eliminar el mensaje "Mostrando entradas con la etiqueta..."

En realidad no vamos a borrarlo de nuestra plantilla, pero si haremos que no sea visible, así será mas fácil deshacerlo por si en algún momento cambiamos de opinión y queremos que se vuelva visible.

Es muy fácil hacerlo, solo vamos a Plantilla | Personalizar | Avanzado | Añadir CSS y pegamos lo siguiente:

.status-msg-wrap {display:none;}

Guardamos y listo ♥ Si luego lo quieres recuperar solo borra el código.

Modificar el mensaje "Mostrando entradas con la etiqueta..."


Primero vamos a cambiar el mensaje, en lugar de que diga "Mostrando entradas con .. etc etc" podemos poner lo que queramos, como Estas viendo la sección "tutoriales" o algo asi.

Para hacerlo debes ir a Plantilla | Editar HTML y con Ctrl + F buscar data:navMessage

Veremos que esta repetido 3 veces, nos interesa la segunda de ellas.

Ejemplo:


Vamos a sustituirla con lo siguiente:

Lalala tu mensaje va aquí <data:blog.searchLabel/>

<data:blog.searchLabel/> hace referencia a la etiqueta que se esta mirando, por ejemplo tutoriales, recursos o lo que sea, si no quieres que se vea borralo

Ahora solo nos queda hacerlo más bonito

Para hacerlo debes pegar encima de ]]></b:skin> lo siguiente:

.status-msg-body {
font-family: Arial; /* tipo de fuente */
font-size: 16px; /* tamaño del texto */
color: #fcc; /* color del texto */
}
.status-msg-bg { /*Para cambiar el color de fondo de la cajita*/
background-color: #fff;
}
.status-msg-border{ /* color del texto */
border: 1px solid #fcc;
}

Lo editas a tu gusto y eso es todo Espero les haya servido el tutorial.
Cualquier duda me la dejan en un comentario o me escriben a sol.pourcel@gmail.com

Diseño para Miss Meow

24 de noviembre de 2015


La entradita de hoy es algo cortita, es para compartirles el nuevo diseño que realicé para Marely de Miss Meow. Fue muy agradable diseñar para ella.

Puse una imagen más abajo para contar un poco como la realicé, el diseño es de temática gatuna, por eso puse unos cuantos gatitos por ahí  Además que hice un dibujo para su header, es la primera vez que coloco un dibujo hecho por mí en un diseño.

Bueno eso es todo, ¿Que tal les pareció el diseño?

Como usar la Font Awesome para crear social icons

17 de noviembre de 2015


En el tutorial de hoy quiero enseñarles una de las cosas fantásticas cosas que se pueden crear utilizando la fuente Awesome, más unos pocos retoques en css. Por ahora les mostraré como hacer sus propios icons de redes sociales, de una forma bastante rápida y sencilla y sin nececidad de que seas muy bueno editando en Css. Espero que les agrade el tutorial.
Como les prometí aquí les traigo el primer tutorial de unos cuantos que tengo preparados para ustedes ♥ 

En el tutorial de hoy quiero enseñarles una de las cosas que puedes crear con la fuente Awesome más unos pocos retoques en css.
Por ahora les mostraré como hacer sus icons de redes sociales. Hay otras cosas que se pueden realizar, pero les iré mostrando de a poco.

Bueno acá les pongo un ejemplo para que vean a que me refiero:

Crear icons sociales con font awesome y códigos CSS, se ve muy cute en tu blog y es muy fácil de hacer no hace falta que seas un experto en Css, estilo 1
Ejemplo

Para colocarlo en tu blog solo tienes que seguir unos pasos muy sencillos.

Paso 1 - Colocar el código HTML

Para agregarlo en tu sidebar solo debes ir a Diseño → Agregar un gadget → HTML/Javascript

En el debes pegar lo siguiente:

<center>
<ul class="side-social">
<li><a href="url" target="_blank" title="Facebook"><e class="fa fa-facebook"></e></a></li>
<li><a href="url" target="_blank" title="Twitter"><e class="fa fa-twitter"></e></a></li>
<li><a href="url" target="_blank" title="Pinterest"><e class="fa fa-pinterest"></e></a></li>
<li><a href="url" target="_blank" title="Bloglovin"><e class="fa fa-heart"></e></a></li>
<li><a href="url" target="_blank" title="Tumblr"><e class="fa fa-tumblr"></e></a></li>
<li><a href="url" target="_blank" title="Google+"><e class="fa fa-google-plus"></e></a></li>
<li><a href="url" target="_blank" title="Youtube"><e class="fa fa-google-plus"></e></a></li>
<li><a href="url" target="_blank" title="Instagram"><e class="fa fa-google-plus"></e></a></li>
</ul></center>


Cambia lo que está coloreado por la url de tus redes. Y guarda (se verá algo feo, pero en unos pasos más mejorará)

Si quieres eliminar alguno de los botones tienes que borrar de <li> a </li>
Por ejemplo si quieres borrar el botón de Pinterest debes borrar todo esto;
<li><a href="url" target="_blank" title="Pinterest"><i class="fa fa-pinterest"></i></a></li>

Paso 2- Colocar la fuente Awesome

Ahora debes ir a Plantilla → Edición HTML y con CTRL + F debes buscar la etiqueta <head>

Debajo de ella debes pegar lo siguiente:

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Paso 3- Colocar el código Css

Ya solo nos falta determinar el estilo que tendrán tus redes. Ya estando en la plantilla de tu blog solo tienes que buscar con CTRL + F    y pegar arriba el código del estilo que mas te guste y personalizarlo ♥

Estilo 1
Crear icons sociales con font awesome y códigos CSS, se ve muy cute en tu blog y es muy fácil de hacer no hace falta que seas un experto en Css, estilo 2

.side-social li {
text-align: center;
width: 60px; /* Ancho de la cajita */
background: #ffb0be; /* Color de fondo de la cajita */
text-transform: uppercase;
font-size: 9px;
display: inline-block;
padding: 0;
margin-bottom: 3px!important;
}
.side-social e {
width: 32px; /* ancho de la fuente - tiene que ser menor que el ancho de la cajita */ 
height: 32px; /* alto de la fuente */ 
margin: 15px auto 0;
line-height: 100%;
text-align: center;
font-size: 20px;
color: #fff; /* Color del texto */
}
.side-social li:hover {
background-color: #9ccedf; /* Color de fondo de la cajita hover */
}


Estilo 2
Crear icons sociales con font awesome y códigos CSS, se ve muy cute en tu blog y es muy fácil de hacer no hace falta que seas un experto en Css, estilo 2
.social li {
text-align: center;
width: 50px; /* Ancho del redondo */
height: 40px; /* Alto del redondo */
background: #fcc; /* Color de fondo del redondo */
text-transform: uppercase;
font-size: 9px;
display: inline-block;
padding: 0;
border-radius: 100%;
margin-bottom: 3px!important;
}
.social e {
width: 40px; /* ancho de la fuente - tiene que ser menor que el ancho del redondo */
height: 40px; /* alto de la fuente - tiene que ser menor que el alto del redondo */ 
margin: 15px auto 0;
line-height: 10px;
text-align: center;
font-size: 20px;
color: #fff; /* Color del texto */
}
.social li:hover {
background: #777; /* Color de fondo del redondo hover */
}


Puse unas etiquetas para que sepas que cambia que, ahora solo editas a tu gusto y listo ♥ Recuerden que si tienten alguna duda pueden escribirme sol.pourcel@gmail.com abrazos!

Nueva plantilla en el blog ♥

15 de noviembre de 2015

Como ya habrán notado he cambiado el diseño del blog por uno nuevo, espero que les guste como ha quedado. En la entradita de hoy quiera hacerles un pequeño resumen sobre como lo hice 

Bueno, primero quería contarles cuanto tiempo y dedicación le puse a este diseño, la verdad es el primero al que le dediqué tanta atención, empecé a realizarlo el Lunes y estuve prácticamente durante todo el día, todos los días, trabajando en el, hasta el día de hoy, me atrapó bastante. 

Lo hice con colores suaves y tranquilos, con un estilo algo vintage, me inspiré un poco con la imagen de la bicicletita con flores, y de ahí poco a poco fueron surgiendo nuevas ideas. 

También aprendí nuevas cosas al realizarlo, las compartiré con ustedes próximamente en algunos tutoriales, para que asi puedan ponerlos en práctica en sus blogs :D 

Bueno aquí abajo les dejo una imagen donde se encuentran todos los componentes que conforman este diseño:
Espero que disfruten de este diseño ♥