Menu flotante: Flowers & Love

30 de enero de 2014



Para tener este lindo menu en tu bloggie debes simplemente pegar el siguiente code arriba de </body> {para ambos tipos de plantilla} y editarlo a gusto {puse cartelitos para explicar que hace que}

<style>
#fresas { /* Posision en que se encuentra */
  position:fixed;
  left: 20px;
  top: 20px;
}
/* Estilo de las imágenes */
.choco {
  background: #FF8C94; /* Color de fondo */
  padding: 4px;  /* Lo que sobresale del fondo */
  border: 2px solid #FFD3B5; /* Tamaño del borde */
  border-radius: 100px; /* redondeado */
  margin-bottom: 30px; /* Separación entre la imagen de abajo */
  width: 65px; /* Tamaño de la imagen */
}
/* Efecto en las imágenes hover */
.choco:hover {
  -webkit-animation: rumble linear 2s infinite; /* Efecto de giro */
}
#canela { /* Estilo del texto */
  position: absolute;
  background: #fcc; /* color de fondo */
  letter-spacing: 1px; /* espacio entre las letras */
  border-radius: 5px;  /* redondeado */
  border: solid 2px #FFD3B5; /* borde */
  color: #666; /* color del texto */
  font-size: 6pt; /* tamaño de la fuente */
  margin-top:30px;
  margin-left:18px;
  font-family: PF Arma Five;
  text-shadow: -1px 0 #fff, 0 1px #fff,1px 0 #fff, 0 -1px #fff; /* sombra del texto */
  padding-left: 3px;
  padding-right: 3px;
  width: 30px; /* tamaño de la cajita del texto */
  opacity: 0;
  z-index: 1000;
  transtition: 1s;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
 }
@font-face {font-family: PF Arma Five;src: url('http://static.tumblr.com/hhfgqo5/6Dlmfpt2j/pf_arma_five.ttf');}
.cont {
  display: inline-block;
  text-align: center;
}
.cont:hover #canela {
  transtition: 1s;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  opacity: 1;}
/* Animacion de giro */
@-webkit-keyframes rumble {
  0% {-webkit-transform: rotate(360deg)}
  20% {-webkit-transform: rotate(0deg)}
  40% {-webkit-transform: rotate(0deg)}
  60% {-webkit-transform: rotate(120deg)}
  80% {-webkit-transform: rotate(0deg)}
  100% {-webkit-transform: rotate(360deg)}
}
</style>
<div id="fresas">
<div class="cont">
<div id="canela">
Texto
</div>
<a href="#"><img class="choco" src="urldetuimagen"/></a></div><br/>
<div class="cont">
<div id="canela">
Texto
</div>
<a href="#"><img class="choco" src="urldetuimagen"/></a></div><br/>
<div class="cont">
<div id="canela">
Texto
</div>
<a href="#"><img class="choco" src="urldetuimagen"/></a></div><br/>
<div class="cont">
<div id="canela">
Texto
</div>
<a href="#"><img class="choco" src="urldetuimagen"/></a></div>
</div>


  • Para colocar el menu de forma horizontal deben borras los <br/> 
  • Para agregar otro boton deben colocar el código de abajo arriba del </div> que se encuentra en negrita

<div class="cont">
<div id="canela">
Texto
</div>
<a href="#"><img class="choco" src="urldetuimagen"/></a></div>

Espero les sirva el tuto ^^ cuidado con no borrar el </div> solito del final porque armará desastre xD



Tipos de cursores

27 de enero de 2014


Tipos de cursores:

{pasa tu cursor sobre los nombres para una vista previa de cada uno}

all-scroll
auto
col-resize
crosshair
default
hand
help
move
no-dropnot-allowed
pointer
progress
row-resize
text
vertical-text
wait

n-resize
ne-resize
e-resize
se-resize
s-resize
sw-resize
w-resize
nw-resize
Por url


¿Como colocarlos en tu blog?


 Para colocar cualquiera de estos cursores solo debes agregar en .body { o en a.link:hover { lo siguiente:

para los cursores comunes
cursor: nombre del cursor;

para cursores a partir de una url
cursor: url ('url del cursor'), auto;

Efecto Css: Bordes con outline-offset

20 de enero de 2014



Holi~ ya me siento mucho mejor y ya no me duele nada :3 .. algún día en mi blog personal escribiré que paso conmigo.. fue algo que paso con unas hormiguitas asesinas xD .. bueno como me sentía mejor decidí traerles un pequeño y sencillo tuto de como colocar bordes como arriba con un code Css al que le llamé Outline-offset.. 

Es muy fácil solamente debes agregar el siguiente código en donde quieras colocar ese efecto {algún tittle por ejemplo}
outline-offset: -3px;
outline: 1px dashed #fff;
padding: 6px;

Y lo editas~
 outline-offset: acá va la cantidad de pixeles de la distancia en que tu borde estará del centro
{-3px -4px -5px se ira más haca el centro -2px -1px 0px se irá más hacia afuera.}

outline: el tipo, color y grosor del borde. {prometo hacer alguna entrada con todos los tipos de bordes que existen :3}

padding: evita que el contenido por ejemplo el texto se acerqué mucho al borde.

Un ejemplo de este código dentro de algún titulo puede ser este:

.h2 {
  padding: 6px;
  background: #9f2c3d;
  color: #FFF;
  font-size: 7pt;
  font-family: 'pf ronda';
  letter-spacing: 1px;
  text-shadow: 1px 1px 1px #D69774;
  outline-offset: -3px;
  outline: 1px dashed #fff;}

lalala

La linea tendría que estar centrada pero a blogger le gusta distorsionar todo ¬¬

Bueno eso es todo, {les dije no era la gran cosa xD } espero les sirva el tuto~


Personaliza tu blog combinando colores

14 de enero de 2014


Quizás la cosa mas difícil algunas veces a la hora de diseñar es encontrar la inspiración suficiente para lograr decorar nuestro diseño.. cosas que normalmente solemos utilizar son combinaciones de colores, imágenes,  temas de que trata el blog como animes, series, películas etc.. pero a veces no es suficiente y nada conforma. Hoy yo les enseñaré como mezclar dos recursos conseguidos de la página Colourlovers {la uso para la mayor parte del diseño}  junto con imágenes de We Heart it para así poder personalizar tu blog.. comencemos~

Paletas de colores
Para mi el blog quedará bonito siempre y cuando tenga colores que se complementen entre sí y combinen.. para ello siempre uso la sección de colourlovers de Palettes clip para ir allí {hay miles y miles de opciones y hasta puedes hacer tu propia paleta si te registras}, yo busco o diseño una con colores que armonicen entre sí y luego los coloco en los títulos de mi diseño, en el cbox, etc.. y también los uso para buscar un fonditos~ les deje dos ejemplos de unas paletas que encontre..  Debes tener en cuenta de que si tu blog tendrá una temática por ejemplo submarina debes buscar colores acuáticos, o si será con un diseño kawaii debes buscar colores pasteles y tiernos.



Fonditos

Una vez que tengo seleccionada una linda paleta de colores, busco patterns {lo hago aquí} lindos que armonicen y combinen con los colores de la paleta  si están registrados también pueden colorear uno a su gusto y ahorrarse el tener que buscar mucho. La base del pattern dependerá de cual quede mejor con tu temática o cual te guste más. Y bueno de esa manera los fonditos combinaran con todo tu bloggie..





Imágenes

Una vez que tenga seleccionado los colores y el fondo, busco imágenes que queden bien con el resto y además que complementen la temática al blog.. para eso uso We heart it y luego las edito en PS, tambien busco pixeles o cualquier detalle que le quede bonito~ Ejemplos



Bueno eso es todo, espero se entienda >.< .. si necesitan ayuda para utilizar la página o tienen alguna pregunta pueden escribirme a sol.pourcel@gmail.com

Colocar páginas numeradas.

7 de enero de 2014


Un bonito efecto que sirve para las plantillas blogger. Para colocarlo en tu blog debes seguir dos pasos muy sencillos~

1. Primero ve a Plantilla / Editar HTLM busca con Ctrl + F </body> y coloca encima, el siguiente script:
<script style='text/javascript'> var pageCount=5;var displayPageNum=5;var upPageWord=&quot;Anterior&quot;;var downPageWord=&quot;Próxima&quot;;</script> <script src='http://static.tumblr.com/y66747w/DqWm7hhf3/page-nav.js' style='text/javascript'> </script>

2. Luego arriba de ]]></b:skin> coloca lo siguiente:
.showpageArea {
   font-family:tahoma; /* fuente */
   font-size: 8pt;
   color: #fff; /* color de texto */
   margin:10px;
 }
.showpageArea a {
   padding: 3px 8px;
   margin: 2px;
   text-decoration: none;
   color:#fff;  /* color de texto */
   border:1px solid #000; /* borde de próxima pagina */
   background: #FF7F51; /* color de fondo de próxima pagina */
}
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  color: #666; /* color de texto */
  border:1px solid #000; /* Borde de la numeración */
  background: #A0D0A0; /* color de fondo de la numeración */
}
.showpageNum a:hover {
   color: #fff; /* color de texto */
   border:1px solid #000; /* borde la numeración cuando el cursor esta encima de ella */
   background: #FF7F51; /* color de fondo la numeración  */
}

.showpageOf{
   margin:0 8px 0 0;
}
.showpagePoint {
   text-decoration: none;
   padding: 3px 8px;
   margin: 2px;
   font-weight: 400;
   background: #FF7F51; /* color de fondo de la numeracion activa */
   color:#fff; /* color de texto */

Solo faltaría personalizarlo a su gusto~ eso es todo, espero les sirva el tuto!
A veces tarda un poco en aparecer cuando lo colocas, es por el script que usa, si le das tiempo aparecerá ♥

Efecto zoom para los afiliados

5 de enero de 2014




Buenos días para todos mis angelitos, hoy les traigo otro nuevo tutorial. Este es sobre como colocar un efecto zoom a los links de afiliados ♥

Vista previa:

Love Love Love Love



También puedes verlo ya personalizado en el sidebar de mi blog de pruebas♥
Para tener este efecto en tu sección de afiliados debes  seguir los siguientes pasos:

Paso 1

Ve a la edición HTML de tu plantilla y con Ctrl + F busca ]]></b:skin y arriba el siguiente código:

.sunny {
background:#000 url(urldetuimagen) top right;
color: #fff;
padding-top: 30px;
text-align: center;
display: inline-block;
width: 75px;
height: 45px;
text-decoration: none;
box-shadow: 0px 0px 20px #fafafa;
text-shadow: 0px 3px 2px #fafafa;
white-space: nowrap;
font: 15px 'Arial'; letter-spacing: 0px;
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
-webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
border-radius: 100px;}
.sunny:hover {
-webkit-transition-duration: 1s;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
border-radius: 100px;}
a.sunny {
color: #fff;}

Paso 2

Modifica los colores y tamaños señalados arriba. Y luego pega el siguiente código en donde quieres que se encuentren tus afiliados. Si es en una entrada o página de tu blog debes pegarlo en la edición HTML del post.

<a target="_blank" class="sunny" href="link"> Love </a>
<a target="_blank" class="sunny" href="link"> Love </a>
<a target="_blank" class="sunny" href="link"> Love </a>
<a target="_blank" class="sunny" href="link"> Love </a>

Para agregar mas botones solo copia y pega cuantas veces desees la línea entera que señalé en negrita.

Espero les haya servido el tutorial .. besos ♥


Crear links de descargas directas con Google Drive

4 de enero de 2014

Es muy útil a la hora de tener que subir pequeños archivos para compartirlos en tu bloggie.. a la hora de descargar es muy cómodo ya que no te re direcciona a ningún lado.. y en mi caso que soy una perezosa me salva de andar registrándome en paginas de descargas.

  
Para hacerlo debes primero iniciar sesión en tu cuenta de google+ y dirigirte a Google Drive, una vez allí debes hacer clip en Subir y seleccionar tu carpeta o archivo..



Cuando lo hagas te aparecerá una ventanita que indica que esta cargando..


Una vez que se el archivo se cargue por completo le das clip en compartir ...

Te saldrá una ventana, copias el link y te aseguras de que el archivo este compartido de forma publica..

Una vez que copies el link debes sacar de este el id de tu archivo..

Ej: mi link https://drive.google.com/file/d/0B3tg4gWKfU_iNlRpdnQ4ZEg2VE0/edit?usp=sharing
solo  sirve lo que está en negrita, según tu link lo copias y lo pegas en el siguiente código:

https://docs.google.com/uc?export=download&id=acavaelIDquecopiaste



Y ya esta listo tu link de descarga .. pueden probarlo haciendo clip en el link de arriba se les descargará una imagen de agradecimiento nada más.

Nota:

Deben tener en cuenta que el pequeño inconveniente que existe es que a veces el navegador bloquea las descargas de este tipo.
Para desbloquearlo solo hay que hacer clip en permitir siempre donde muestra la imagen de abajo:



Eso es todo espero les haya sido de utilidad el tutorial