Código, Web y SEO

domingo, 29 de marzo de 2015

Poner caja de suscripción por email para Blogger (Pop up - CSS)

Un post más en BR, hoy enseñaré como poner una caja de suscripción por email en nuestro blog de Blogger dicha caja será algo así:


Para agregar esta caja a nuestro blog es necesario hacer algunos pasos muy sencillos entre los cuales tenemos:

1. Vamos a plantilla > Editar HTML y allí buscamos la etiqueta </body> , antes de ella pegaremos lo siguiente:
<div class='modalDialog' id='signup'>
<div>
<a class='close' href='#close' title='Close'><i class='fa fa-times'/></a>
<div class='signup-container'>
<style>
.newsletter-sm {background:#fff; width: 100%; margin: 0; padding: 20px;}
.newsletter-sm h3 {color:#555; font-family: &#39;Maven Pro&#39;, sans-serif; font-size: 24px; font-weight: normal; text-align:center; margin-bottom: 10px;}
.newsletter-sm p {font-size: 14px; color:#555; line-height: 20px; font-family: &#39;Maven Pro&#39;, sans-serif;}
.newsletter-sm .newsletter-input-sm {border: 0; padding: 5px 10px; width: 360px; float:left; height: 40px; color:#555;border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;}
.newsletter-sm .newsletter-sm-bot{background:#00aa9f url(http://4.bp.blogspot.com/-0mBblowuHEI/VKnxGxyRmUI/AAAAAAAAHiU/ewwqQBE8VE0/s1600/bg.png) no-repeat; padding: 20px; margin: 0 -20px -20px; height: 80px;}
.newsletter-sm .newsletter-button-sm {float:right; height: 40px; display:inline-block; font-size: 14px; padding: 5px 10px; position: relative;color: #fff;text-align: center; background:#00aa9f;border: 1px solid #fff;cursor: pointer; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;}
</style>
<div class='newsletter-sm'>
<i class='fa fa-envelope-o' style='background:#00aa9f; color:#fff; width: 50px; height: 50px; display:block; line-height: 50px; text-align:center; font-size: 24px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; margin: 0 auto;'/>
<h3>Suscríbete y recibe nuestro contenido</h3>
<p style='text-align:center'>MENSAJE ALEATORIO PUESTO POR ADMIN DEL BLOG</p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=URLDETUFEEDBURNER&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<div class='newsletter-sm-bot'>
<input class='newsletter-input-sm' name='email' placeholder='Ingresa tu email' type='text'/>
<button class='newsletter-button-sm' type='submit'>Enviar</button>
  </div>
<input name='uri' type='hidden' value='MyBloggerAide'/>
</form>
</div>
</div>
</div>
</div>
Lo que está en rojo es el texto y este se cambia por el que se desee y lo que está en color Naranja simplemente se cambia por el link de nuestro FeedBurner, ahora pegaremos el CSS para ello buscamos ]]></b:skin> y antes de dicha etiqueta pegamos:
 /*--------------- MBA Modal Dialog ---------------*/
.modalDialog {
 position: fixed;
 font-family: Arial, Helvetica, sans-serif;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background: rgba(0,0,0,0.6);
 z-index: 99999;
 opacity:0;
 -webkit-transition: opacity 200ms ease-in;
 -moz-transition: opacity 200ms ease-in;
 transition: opacity 200ms ease-in;
 pointer-events: none;
}
.modalDialog:target {
 opacity:1;
 pointer-events: auto;
}
.modalDialog:target > div {
margin: 8% auto;
}
.modalDialog > div {
 -webkit-transition: all 100ms ease-in;
 -moz-transition: all 100ms ease-in;
 transition: all 100ms ease-in;
 width: 500px;
 position: relative;
 margin: 5% auto;
 background: #fff;
 min-height: 200px;
}
h2.signup {
background:#00aa9f;
border-bottom: 1px solid #008d84;
font-weight: normal;
text-align:center;
padding: 10px;
color:#fff;
font-size: 18px;
}
.close {
 color: #888;
 position: absolute;
 top: 1px;
 right: 1px;
 width: 30px;
 height: 30px;
 line-height: 30px;
 text-align: center;
 font-size: 16px;
}

.close:hover { text-decoration:none; }
.close:hover { color:#555; }
Por último si queremos que este quede como botón agregamos el siguiente código en se desee que quede el botón:
<a href='#signup'>Signup</a>
Y listo quedó guardado nuestra caja de suscripción por email.

martes, 24 de marzo de 2015

Poner menú dinámico circular que se expande al dar click sobre él - blog de Blogger

Hoy enseñaré como incorporar un elegante menú circular a nuestro BLOG con algunas cortas líneas de código, dicho menú tiene un efecto desplegable al dar click sobre él mostrandome distintas redes sociales y botones a los cuales direccionar.


Sí con la anterior imagen no fue suficiente pruébalo ahora mismo:



NOTA: Puse un fondo rosa ya que los iconos son blancos y lo más lógico es que se puedan ver, así que no es posible usarse en blogs con fondo blanco totalmente...


Continuando, si te ha gustado a continuación deberás seguir el siguiente tutorial (no va tener el fondo rosa como el ejemplo en la NOTA dice la razón de porqué la usé):

INSTALACIÓN DE MENÚ

1. Lo primero será saber que el menú podrá incorporarse en las entradas y en los gadgets en este casó será en los gadgets; así que, van a Blogger > Diseño > Añadir Gadget > HTML/JavaScript.

2. Luego allí mismo pegarán el siguiente código:
<center>
<nav class="circular-menu">

  <div class="circle">
<a class="fa fa-home fa-2x" href="URL INICIO"></a>
    <a class="fa fa-facebook fa-2x" href="URL FACEBOOK"></a>
    <a class="fa fa-twitter fa-2x" href="URL TWITTER"></a>
    <a class="fa fa-linkedin fa-2x" href="URL LINKEDIN"></a>
    <a class="fa fa-github fa-2x" href="URL GITHUB"></a>
    <a class="fa fa-rss fa-2x" href="URL RSS"></a>
    <a class="fa fa-pinterest fa-2x" href="URL PINTEREST"></a>
    <a class="fa fa-asterisk fa-2x" href="URL ASTERISK"></a>
  </div>
<a class="menu-button fa fa-bars fa-2x" href="#"></a>

</nav>
</center>
<style>
@import "http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";   /*Link desde donde toma los iconos usados*/

.circular-menu {
  width: 250px;      
  height: 250px;
  right: 0px;
  position: relative;
}

.circle {
  width: 250px;
  height: 250px;
  opacity: 0;
 
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -transform: scale(0);

  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

.open.circle {
  opacity: 1;

  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -transform: scale(1);
}

.circle a {
  text-decoration: none;
  color: white;
  display: block;
  height: 40px;
  width: 40px;
  line-height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  position: absolute;
  text-align: center;

}

.circle a:hover {
  color: #eef;
}

.menu-button {
  position: absolute;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  text-decoration: none;
  text-align: center;
  color: #444;
  border-radius: 50%;
  display: block;
  height: 40px;
  width: 40px;
  line-height: 40px;
  padding: 10px;
  background: #dde;
}

.menu-button:hover {
  background-color: #eef;
}  </style>

<script> var items = document.querySelectorAll('.circle a');

for(var i = 0, l = items.length; i < l; i++) {
  items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
 
  items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
}

document.querySelector('.menu-button').onclick = function(e) {
   e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
} </script> 


Muy bien, detallaré las cosas resaltadas por cada color: 

- Lo que se encuentra en color naranja es referente a la URL de lo debe ir cuando el lector de click sobre algún icono.

- Por otra parte, lo que está en color rojo es la URL que contiene los iconos que estamos usando ya que no son directamente imágenes y están citadas desde otro link.

- Por último, lo que está en azul es como están los iconos escritos en este código, pero, que es el mismo nombre que tendrán en el link de color rojo.

Así que, si desean cambiar un icono deberán abrir la URL roja y buscar los iconos "fa fa nombre icono" y reemplazarlo en este código por el que deseen que están en los azules.

Por hoy siendo todo, espero les guste si hay dudas pueden comentar, hasta la próxima...

lunes, 23 de marzo de 2015

Descargar EveryCircuit (apk) simulador de circuitos para Android

Un post más para Bloggin Red el día de hoy mostraré una excelente aplicación para todos los electrónicos que a la hora de hacer simulaciones sencillas no tienen un equipo a la mano, así que con esta aplicación instalada en nuestro Android podremos simular lo que se quiera.


Se trata de EveryCircuit una aplicación para teléfonos Android la cual permite la simulación y datos de circuitos eléctricos y electrónicos, algunas capturas:

 Si quieres descargar el APK del programa.

CLICK AQUI PARA DESCARGAR

Sólo descargala, descomprímela, pasala a tu teléfono Android y luego se instala.

Listo todo terminado, Hasta la próxima.


miércoles, 18 de marzo de 2015

Como poner un documento PDF, word, power Point en mi blog o sitio web

Un post más para Bloggin Red el día de hoy traigo un tutorial algo breve, se trata de como anexar o poner documentos de distintos formatos sean PDF, word, PowerPoint; en nuestro blog o sitio web.

Paso a paso:

- Lo primero será saber que clase de documento se va a mostrar en el blog o web, así que si son PDF, Word, Power Point; entonces se irá a slideshare.net

- Luego se registran lo pueden hacer con su cuenta de facebook para hacerlo más fácil allí dan click en subir:


- Buscan el documento y lo suben normal, luego, ponen una descripción y categoría por último dan en guardar y continuar:

- Y allí saldrá automáticamente el código que se debe copiar:



- Al tener el código copiado ahora si es blogger y se quiere pegar en una entrada, van a nueva entrada seleccionan la opción HTML que está junto a redactar:

- Allí pegan el código copiado, si quieren centrar el documento en su post sólo aplican la etiqueta center:
<center> ...código documento....</center>
Y listo prácticamente está lista la visualización del documento en el blog o sitio 
web.

Ejemplo de documento Word en blog:



Espero les sirva el post y toda la información, como ven es muy fácil de hacer y útil en un blog o sitio web.

Hasta la próxima,

viernes, 13 de marzo de 2015

Como recortar una imagen en Photoshop (Selección rápida, 2 herramientas)

Recortar una imagen en photoshop... para ello Abrimos photoshop y pasamos la imagen a recortar yo tomaré de ejemplo esta imagen: 


Listo, ahora teniendo ya la imagen, seleccionaremos la herramienta selección rápida:



Ahora sólo queda ir dando clic sobre la imagen hasta seleccionar lo que quieres recortar por ejemplo yo quiero solo el gorrito de pikachu entonces comenzaré a seleccionar cuidadosamente el sombrero, hasta que me quede así:


En el círculo amarillo si vemos el sombrero del muñeco claramente esta rodeado por unas lineas seguidas, eso es lo que debo recortar y el cuadro azul arriba es el panel de manejo de esa herramienta de selección, Ahora hacemos un nuevo psd damos CTRL + N  y configuran las medidas:


Listo ahora vamos a la imagen que queramos recortar damos CTRL + C, luego, vamos a el nuevo PSD que hicimos y presionamos CTRL+ V allí deberá quedar pegado:

 Como ven ya esta recortada la imagen y la pase a una nueva ventana en el programa muy fácil espero les sirva pues personalmente recorto muchas imágenes :) y esta herramienta es de gran ayuda.


No entendiste? te lo mostramos en vídeo.. 


HASTA UN PRÓXIMO POST

jueves, 5 de marzo de 2015

Cómo pasar, poner o exportar una imagen a PNG con Corel Draw

En este post dedicado a la parte del Diseño explicaré como pasar, transformar o exportar (Como lo quieran llamar) una imagen que tenemos diseñada a formato PNG. 


Así que lo seguiremos unos pasos muy sencillos para lograr esto; estando en Corel en este caso yo uso la última versión (Corel Draw x7), nos dirigimos a "Archivo > Exportar" ó podemos presionar las teclas Ctrl + E:





Nos saldrá una ventana allí asignaremos un nombre a la imagen, luego, escogeremos el formato al que se quiere exportar en este caso pondremos PNG y luego click en "Exportar":


Luego, nos saldrá otra ventana de Corel en donde se puede configurar más a fondo la calidad de nuestra imagen en PNG, si no se sabe de qué significa cada cosa no recomiendo mover nada, tan sólo dar click en "aceptar":



Y estuvo sólo queda ir a la carpeta donde guardamos la imagen para comprobar que todo salió bien, aquí la imagen que transformé:


Es todo en este post...

Hasta la próxima BloggeRs, 

SÍGUENOS EN: