Código, Web y Blogs


Agregar iconos CSS a tu blog [PacMan - Arbol- Vaso] hechos en puro CSS

El día de hoy quiero compartiles tres iconos hechos en CSS puro CSS se trata de tres figuritas muy sencillas las cuales son:

- Un vaso con agua
- Un arbol estilo navideño 
- Un Pacman 

Presentaré de forma simple los debidos códigos de cada figúra para quien la quiera.

Vaso con agua




El código respectivo de esta figura es: 

<style>
.mug_animate {
  box-shadow: 0 -3em 0 0 #0AF inset;
  height: 2.5em;
  position: relative;
  -moz-transition: all 1000ms linear 0s;
  -webkit-transition: all 1000ms linear 0s;
  -o-transition: all 1000ms linear 0s;
  -ms-transition: all 1000ms linear 0s;
  transition: all 1000ms linear 0s;
  width: 1.5em;
}
.mug_animate:after {
  border-color: #DDD transparent #DDD #DDD;
  border-image: none;
  border-radius: 0.75em 0 0 0.75em;
  border-style: solid none solid solid;
  border-width: 0.25em medium 0.25em 0.25em;
  content: "";
  height: 1.5em;
  left: -1em;
  position: absolute;
  top: 0.25em;
  width: 0.75em;
}
.mug_animate:before {
  border: 0.25em solid #DDD;
  border-radius: 0 0 0.2em 0.2em;
  content: "";
  height: 2.5em;
  left: -0.20em;
  position: absolute;
  top: -0.5em;
  width: 1.5em;
}
.mug_animate:hover {
  box-shadow: 0 0 0 0 #00F inset;
}
</style>
<div class="mug_animate"></div>

Arbol de navidad




EL código respectivo de esta figura en CSS es: 

<style>
.fir {
  box-shadow: 0em 0.9em 0 -0.8em #4D4,0em 1em 0 -0.8em #4D4,0em 1.1em 0 -0.8em #4D4,0em 1.2em 0 -0.8em #4D4;
  border-bottom: 1.7em solid #4D4;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  font-size: 20px;
  height: 0em;
  position: relative;
  width: 0em;
}
.fir:before {
  border-bottom: 1em solid #4D4;
  border-left: 0.7em solid transparent;
  border-right: 0.7em solid transparent;
  content: '';
  display: block;
  height: 0em;
  left: -0.7em;
  position: absolute;
  top: -0.2em;
  width: 0em;
}
.fir::after {
  border-bottom: 0.7em solid #4D4;
  border-left: 0.5em solid transparent;
  border-right: 0.5em solid transparent;
  content: '';
  display: block;
  height: 0em;
  left: -0.5em;
  position: absolute;
  top: -0.5em;
  width: 0em;
}
</style>
<div class="fir"></div>

PacMan

 

El respectivo código para este Pacman en CSS es: 

 <style>
.pacman {
  background-image: -webkit-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: -moz-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: -o-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: -ms-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  border-radius: 3em 3em 0 0;
  height: 1.5em;
  position: relative;
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  width: 3em;
}

.pacman:after {
  background-color: #EE0;
  border-radius: 0 0 3em 0;
  content: '';
  height: 1.5em;
  left: 0em;
  position: absolute;
  top: 1.45em;
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  width: 1.5em;
}
</style>

<div class="pacman"></div>

¿Cómo agrego esto a mi blog?

Para agregarlo es tan fácil como ir, si se trata de un Gadget vamos a Diseño | Añadir un gadget | HTML/JavaScript, allí pegamos el respectivo CSS.

Si lo que se quiere es poner en una entrada al visualizarlo este se verá no centrado sino ubicado al borde izquierdo así que en la primera parte del CSS de las llaves {} agregamos la propiedad:

margin-left:300px;

Tomando en cuenta que le decimos al código que nos corra el elemento 300 pixeles desde la izquierda para modificar la distancia editan la cifra en rojo.

Espero les guste este sencillo truco.

Hasta la próxima Bloggers,


Unboxing & Review Cuadricóptero - Drone JJRC H6C detalles + vídeo de vuelo

...Suscríbete a nuestro canal de YouTube para recibir más vídeos de Drones...
 Algo bueno si eres de los primeros en leer este post, en Bloggin Red estrenamos una nueva categoría en donde presentaremos "Unboxing" y "Review" de distintos productos en especial aquellos relacionados directamente con la electrónica como lo son los DRONES y todo aquello relacionado con circuitos RC.


Cuadricóptero JRC H6C 

Aunque se ve sencillo este interesante y ágil aparatico es capaz de hacer cosas sorprendentes (Lo podrán apreciar más adelante en unos de los vídeos que publicaré en este post.

Sus cuatro motores le dan la potencia suficiente para que este Cuadricóptero se eleve muchos metros y mantenga una buena estabilidad, además de incluir funcionas como giros de 360° y regreso automático.

Su tamaño es chico cabe en una mano dejando apenas la protección fuera algo que lo hace cómodo al coger, pero, difícil de ver cuando está volando muy lejos.

Y lo último es que el H6C contiene una cámara de 2 MPX lo que le da el mayor interés al poder grabar todo lo que se nos antoje en el tiempo de vuelo que dure.

Unboxing Drone JRC H6C

Aquí podrás ver el desempaquetado narrado en español:


Pruebas de vuelo con el Quad JRC H6C + grabación de su cámara interna 2MPX

Aquí un vídeo probando el JRC H6C de en el día, además, de una grabación de vuelo con su cámara integrada de 2 MPX:

 
 
Pero esto no es todo te tenemos un vídeo para que lo mires volando de noche aquí está: 

Es todo en este post amigos así que si piensas comprar este cuadricóptero es una buena elección para iniciar.

Hasta la próxima,


Poner menú horizontal con efecto deslizante en blogger

Un menú es importante para nuestro blog pues facilitará la navegación a nuestros lectores por esa razón hoy les traigo otro menú muy elegante y sencillo se trata de este:

Menu deslizante en blogger

Pueden ver una demostración del menú aquí:

http://bloggin-prueba.blogspot.com/


Muy bien para agregarlo y siendo breves iniciamos con ir a Plantilla > Edición HTML y buscamos este código </head>, encima de ese código pegaremos lo siguiente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
// jQuery Multi Level CSS Menu #2- By Dynamic Drive: http://www.dynamicdrive.com/
jQuery.noConflict();
var arrowimages={down:['downarrowclass', 'http://lh4.googleusercontent.com/_dsEG33PDaHw/TaITwtLndVI/AAAAAAAABT0/mA-q3eyPYVk/Imagemenu-arrow-down.gif', 23], right:['rightarrowclass', 'http://lh3.googleusercontent.com/_dsEG33PDaHw/TaITws3Ww2I/AAAAAAAABT4/Q-8GXxpmSGs/Imagemenu-arrow-right.gif']}

var jqueryslidemenu={
animateduration: {over: 200, out: 100},
buildmenu:function(menuid, arrowsvar){
jQuery(document).ready(function(jQuery){
var jQuerymainmenu=jQuery("#"+menuid+">ul")
var jQueryheaders=jQuerymainmenu.find("ul").parent()
jQueryheaders.each(function(i){
var jQuerycurobj=jQuery(this)
var jQuerysubul=jQuery(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:jQuerysubul.outerWidth(), subulh:jQuerysubul.outerHeight()}
this.istopheader=jQuerycurobj.parents("ul").length==1? true : false
jQuerysubul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
jQuerycurobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />')
jQuerycurobj.hover(function(e){
var jQuerytargetul=jQuery(this).children("ul:eq(0)")
this._offsets={left:jQuery(this).offset().left, top:jQuery(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>jQuery(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
if (jQuerytargetul.queue().length<=1)
jQuerytargetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)},
function(e){
var
jQuerytargetul=jQuery(this).children("ul:eq(0)")
jQuerytargetul.slideUp(jqueryslidemenu.animateduration.out)})})
jQuerymainmenu.find("ul").css({display:'none', visibility:'visible'})})}}
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)
//]]>
</script>

Luego antes de  ]]></b:skin> pega los estilos:

/* Menú horizontal deslizante
----------------------------------------------- */
.jqueryslidemenu{
background: #414141; /* Color de fondo del menú */
width: 100%;
font-weight: bold;
font-size: 12px; /* Tamaño de la letra */
font-family: Verdana; /* Tipo de letra */
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.jqueryslidemenu ul li {
position: relative;
display: inline;
float: left;
}

.jqueryslidemenu ul li a {
display: block;
background: #414141; /* Color de las pestañas */
padding: 8px 10px;
border-right: 1px solid #778; /* Color del borde que separa las pestañas */
text-decoration: none;
}

* html .jqueryslidemenu ul li a {
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited {
color: #FFF; /* Color del texto */
}

.jqueryslidemenu ul li a:hover {
background: #000; /* Color de la pestaña al pasar el cursor */
color: #FFF; /* Color del texto al pasar el cursor */
}

.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

.jqueryslidemenu ul li ul li {
display: list-item;
float: none;
}

.jqueryslidemenu ul li ul li ul {
top: 0;
}

.jqueryslidemenu ul li ul li a {
font: normal 13px Verdana;
width: 160px; /* Ancho de las subpestañas */
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

Por último vas a Diseño | Añadir un Gadget| Html/JavaScript ahí pegas la siguiente estructura:

<div class="jqueryslidemenu" id="myslidemenu">
<ul>
<li><a href="URL del enlace">Pestaña 1</a></li>
<li><a href="URL del enlace">Pestaña 2</a></li>
<li><a href="URL del enlace">Pestaña 3</a>
<ul>
<li><a href="URL del enlace">Sub 3.1</a></li>
<li><a href="URL del enlace">Sub 3.2</a>
<ul>
<li><a href="URL del enlace">Sub 3.2.1</a></li>
<li><a href="URL del enlace">Sub 3.2.2</a></li>
<li><a href="URL del enlace">Sub 3.2.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="URL del enlace">Pestaña 4</a></li>
<li><a href="URL del enlace">Pestaña 5</a>
<ul>
<li><a href="URL del enlace">Sub 5.1</a></li>
<li><a href="URL del enlace">Sub 5.2</a></li>
<li><a href="URL del enlace">Sub 5.3</a></li>
<li><a href="URL del enlace">Sub 5.4</a></li>
</ul>
</li>
<li><a href="URL del enlace">Pestaña 6</a></li>

</ul>

<br style='clear: left'/>
</div>

Reemplaza por las URL de los enlaces a donde llevará el Menú en lo que está color Rojo, lo que está en color azul se cambiará por el nombre que lllevará cada enlace, si quieres agregar otra pestaña solo pon antes del último </ul&gt; una línea como esta:
<li><a href="URL del enlace">Otra Pestaña</a></li>

O sí es otra pestaña con subpestañas lo mismo que lo anterior pero pega el siguiente código:
<li><a href="URL del enlace">Otra pestaña</a>
<ul>
<li><a href="URL del enlace">Subpestaña 1</a></li>
<li><a href="URL del enlace">Subpestaña 2</a></li>
<li><a href="URL del enlace">Subpestaña 3</a></li>
</ul>
</li>

¿ Sigues con dudas y no entiendes claramente ?
 Mira el vídeo.... 

Plantilla blogger


Descargar música para tus vídeos de YouTube - música libre de derechos de autor

Un post más para Bloggin Red, para hoy tocaré un tema fundamental para todos aquellos que realizan vídeos en YouTube, usar música que esté libre de derechos de autor pues para aquellas personas que son partners usar música protegida les traería problemas.

Música gratis de YouTube para vídeos de YouTube

Así es tal y como leen, YouTube ofrece una herramienta o pequeña plataforma de la cuál podemos escoger entre muchas canciones de distinto estilo alguna de nuestro gusto para descargar y usar en nuestros vídeos sin tener problemas legales.

CLICK PARA IR A LA BIBLIOTECA DE AUDIO

Cabe aclarar que es necesario tener cuenta de Google para poder usar la herramienta.

Allí nos ofrecen múltiples opciones:

 
Como se ve es fácil y no hay mucho que explicar sólo escuchar la canción de nuestro gusto, descargarla y usarla es todo.

Hasta el próximo post,


Cómo usar PHP en blogger - Fácil y sencillo

En este post el ideal es mostrar como PHP puede llegar a aplicarse en Blogger, aunque la plataforma blogger en su estado normal no admite el código directamente alojado en la plantilla, esto no quiere decir que no se pueda llamar el archivo .php alojado en un hosting cualquiera y luego añadirlo para setenciarlo 

Imagen tomada gentilmente de miltrucosblogger
 El primer paso es crear nuestro fichero .php posteriormente subirlo a un hosting.

 -Dando click aquí enseño como alojar ficheros PHP en algún hosting. 

Suponiendo un código de un fichero muy sencillo el cual funcionará como un bloqueo de IP para el sitio en blogger "Pero se puede usar cualquier otro código PHP": 
<?php
header("content-type: application/x-javascript"); // Importante señalar en el header el content-type
/*
Si no se señala el content-type, el archivo .php mostrará el contenido como texto plano
y al hacer la llamada desde blogger no lo reconocerá como javascript.
*/
function getRealIP() { // Cogemos IP
        if (!empty($_SERVER['HTTP_CLIENT_IP']))
            return $_SERVER['HTTP_CLIENT_IP'];
         
        if (!empty($_SERVER['HTTP_X_FORWARDED_FOR']))
            return $_SERVER['HTTP_X_FORWARDED_FOR'];
     
        return $_SERVER['REMOTE_ADDR'];
}
if(getRealIP() == "111.222.33.44") { // Comprobamos si la IP está baneada
        echo 'document.getElementById("main").innerHTML = "Baneado!";'; // Mostramos mensaje
}else{
    die();
}
?>

Después de tener el código a usar listo queda dirigirse a blogger > Plantilla > Editar HTML luego se busca esta parte en el código de la plantilla   </head> arriba de estese pega el siguiente código y posteriormente se reemplaza por la URL del archivo PHP que está en el Hosting:
<script src='URL DE TU ARCHIVO PHP' type='text/javascript'></script>
Quedando así siendo el caso de mi prueba:


Por supuesto existen muchos códigos más que pueden implementar, por ejemplo un .php cuya función es atrapar todas las ip que ingresen a nuestro blog

Es todo por esta vez, hasta un próximo post.

ESTAMOS EN: