Bloggin Games...

miércoles, 25 de febrero de 2015

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,

jueves, 19 de febrero de 2015

Los mejores robots del mundo grandes proyectos de electrónica y robótica

Los mejores robots del mundo
Viendo de todo un poco y para aquellos amantes de la buena electrónica y sus derivados en los dispositivos como la programación aplicada a la robótica, hoy les mostraré algunos vídeos de los mejores robots en cuanto a funcionamiento, resistencia, diseño y otras cosas; aclarando que en este post no explicaré como hacer uno ¡No! pues es difícil y al igual que muchos otros estoy en proceso de apredizaje día a día.
Continuando llego a decir que algunos de los próximos vídeos que les mostrare en este post son proyectos de la NASA y otras grandes corporaciones de ideal tecnológico y avanzado comencemos con algunos vídeos:

Big Dog Evolution 

Algo increíble pues es en su totalidad "todoTerreno" un buen diseño neto a lo que es y muy resistente:


Sand Flea Jumping Robot

Un robot muy dinámico diseñado para resistir unos buenos golpes pues su función principal consiste en llegar a lugares altos de forma más fácil veamos:


Rhex Rough-Terrain Robot

Otro robot casi que un insecto por su forma y movimiento otro pequeño todo terreno es imparable muy bien desarrollado y diseñado:


LittleDog

Este curioso robot aunque un poco lento pero muy elegante toma el diseño de un canino pequeño y pasa algunos obstáculos:




Drone Cuadricóptero

Muchas personas ya conocen este tipo de modelos aunque no son estrictamente un tobot tiene que ver con la electrónica igual les comparto este excelente vídeo, además de que algunos de estos modelos traen cámara incorporada:




RISE

Otro elegante Robot desarrollado por un gran equipo de Ingenieros, cuya función consiste en trepar paredes sin mostrar alguna dificultad veamos:


Salamandra Robótica 

Un prototipo de salamandra muy entretenido y funcional elaborada para el agua y para zonas naturales veamos:


Bueno estos han sido los mejores y entretenidos además de funcionales como muchos lo saben hacer este tipo de cosas no toma ni un mes a veces se extiende el tiempo además de tener los conocimientos previos para todo esto, así que si eres estudiante de electrónica o Ingeniería Electrónica no estaría de más que te interesara este campo. 

domingo, 15 de febrero de 2015

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:

 
  
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,

jueves, 12 de febrero de 2015

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

domingo, 8 de febrero de 2015

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,

miércoles, 4 de febrero de 2015

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 mi fichero muy sencillo el cual funcionará como un bloqueo de IP para mi 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.

jueves, 29 de enero de 2015

Acelerar la carga de mi blog en blogger con Lazy Load (Precarga imágenes con Jquery)

Que nuestro blog tenga una buena carga por cada visitante que nos lea es importante, pues bien sabemos que a nadie le gusta un sitio lento y quedado en su carga desde el texto hasta las imágenes, por este motivo quiero enseñar hoy cómo optimizar un poco nuestros blogs con un script en JQUERY.

Lazy load images - Lazy Load poner en blog de blogger

El efecto lo pueden ver aquí en bloggin Red al notarse que las imágenes se precargan después de estar el sitio ya cargado, así que para poner esto en nuestros blogs haremos lo siguiente:

1. Nos dirigimos a Plantilla | Editar HTML y buscamos la etiqueta </head>  arriba de esta etiqueta pegamos 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[
/*
* Lazy Load - jQuery plugin for lazy loading images
* Copyright (c) 2007-2012 Mika Tuupola
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
* Project home:
* http://www.appelsiini.net/projects/lazyload
*/
(function($){$.fn.lazyload=function(options){var settings={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(options){$.extend(settings,options);}
var elements=this;if("scroll"==settings.event){$(settings.container).bind("scroll",function(event){var counter=0;elements.each(function(){if($.abovethetop(this,settings)||$.leftofbegin(this,settings)){}else if(!$.belowthefold(this,settings)&&!$.rightoffold(this,settings)){$(this).trigger("appear");}else{if(counter++>settings.failurelimit){return false;}}});var temp=$.grep(elements,function(element){return!element.loaded;});elements=$(temp);});}
this.each(function(){var self=this;if(undefined==$(self).attr("original")){$(self).attr("original",$(self).attr("src"));}
if("scroll"!=settings.event||undefined==$(self).attr("src")||settings.placeholder==$(self).attr("src")||($.abovethetop(self,settings)||$.leftofbegin(self,settings)||$.belowthefold(self,settings)||$.rightoffold(self,settings))){if(settings.placeholder){$(self).attr("src",settings.placeholder);}else{$(self).removeAttr("src");}
self.loaded=false;}else{self.loaded=true;}
$(self).one("appear",function(){if(!this.loaded){$("<img />").bind("load",function(){$(self).hide().attr("src",$(self).attr("original"))
[settings.effect](settings.effectspeed);self.loaded=true;}).attr("src",$(self).attr("original"));};});if("scroll"!=settings.event){$(self).bind(settings.event,function(event){if(!self.loaded){$(self).trigger("appear");}});}});$(settings.container).trigger(settings.event);return this;};$.belowthefold=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).height()+$(window).scrollTop();}else{var fold=$(settings.container).offset().top+$(settings.container).height();}
return fold<=$(element).offset().top-settings.threshold;};$.rightoffold=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).width()+$(window).scrollLeft();}else{var fold=$(settings.container).offset().left+$(settings.container).width();}
return fold<=$(element).offset().left-settings.threshold;};$.abovethetop=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).scrollTop();}else{var fold=$(settings.container).offset().top;}
return fold>=$(element).offset().top+settings.threshold+$(element).height();};$.leftofbegin=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).scrollLeft();}else{var fold=$(settings.container).offset().left;}
return fold>=$(element).offset().left+settings.threshold+$(element).width();};$.extend($.expr[':'],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"});})(jQuery);

$(document).ready(function($){
$('img').lazyload({ effect:'fadeIn',
placeholder:'http://lh3.googleusercontent.com/-9nuRfZdo5ro/T5cYmFT_X9I/AAAAAAAACa8/K9aG-gcgsaI/s1/bg_placeholder.png'
});
});
//]]>
</script>

Sólo queda guardar y estuvo.

Es importante saber que  se deja la versión más actual de JQUERY pues es la más estable, si en algún momento tiiene problemas con imágenes en los gadgets y quiere que se aplique a las imágenes sólo de las entradas entonces cambien lo que está en color rojo por lo siguiente: 

$('.post img').lazyload({

Espero les sea de utilidad nos veremos en un próximo post.-

Hasta la próxima...

martes, 27 de enero de 2015

Como instalar WordPress en hosting gratuito (hostinger) en 10 pasos

...Usar hostinger para el post no acredita que sea recomendado por nosotros, sólo es usado para el ejemplo, así que si piensas pagar un hosting piensa en uno mil veces mejor...
Un post más, pero, antes queremos agradecer a todos nuestros lectores y personas que visitan el blog ya que pudimos lograr los 3'000.000 de visitas :), una excelente noticia y esperamos que sigan siendo muchas más visitas.


Ahora sí a lo que ibamos, la instalación de WordPress en un hosting es fácil y aunque la instalación es un poco distinta dependiendo de donde compremos el hosting, este tutorial podrá servirles de guía para aquellos que recién inician.

¿Cómo instalar WordPress en un hosting?

¿No quieres leer? probemos con el vídeo :) 
 

Muy bien para el ejemplo usaré como servicio de hosting gratuito (hostinger) claro no es la mejor opción pero es para el ejemplo, después de todo gustos son gustos y cada quién opta por el servicio que desee.

COMENCEMOS: 

1. Lo primero será ir a hostinger.com allí escogen su país, si este no está sólo escojan uno de habla hispana, que será lo mismo, puedes optar por hostinger Colombia que será con el cuál trabajaré (click aquí para ir). Luego se registran ya sea con alguna red social o con una cuenta partícular (1 o 2):



2. El registro es fácil, así que una vez creada la cuenta nos saldrá la interfaz de usuario allí vamos a "nuevo hosting" (3):



3. Luego seleccionan el plan gratuito y esperan:


4. Se pasa a ingresar algunos datos entre ellos el subdominio y la contraseña, para la contraseña más adelante nos pedirán otra se recomienda poner la misma o manejar contraseñas que no se olviden fácilmente:


5. Luego se confirma la orden introduciendo el captcha y ordenando:



6. Luego saldrá que la cuenta fue creada con éxito, ahora van a "todas las cuentas"  o simplemente actualizan la página, allí saldrá su dominio y sólo dan click sobre el donde desplegará 4 cuadros, escogeran "Instalador automático":



7. Allí buscan "Administración de contenido" y seleccion a WordPress:



8. Un paso importante aquí pondrán la configuración para WP, esencial no olvidar el nombre de administrador y contraseña ya que esos serán para loguearse en WordPress, correo del admin, pues nunca se sabe si se olvida la contraseña, lo demás es básico:



9.Luego de instalarse se recomiendo actualizar la página en la que se está, allí se da click en el dominio:



10. Ahora al abrir el sitio nos saldrá la plantilla por defecto de WordPress para ingresar al panel de admin, después del "/" pondrán "wp-admin" quedandon así:
www.elnombredetuweb.esy.es/wp-admin
Entonces, les saldrá el panel de WP allí se loguean con los datos puestos en el paso "8":

Y Listo está todo terminado, nuestro escritorio de WP está terminado y a la vez puesto en línea el sitio o blog:

Es todo hasta la próxima BloggeRs, :)
¿Te gustó este post? -Suscríbete a nuestro canal y recibe el mismo contenido pero en vídeo.

domingo, 25 de enero de 2015

¿Cúanto ganan los mejores YouTubers de internet con Adsense? - SocialBlade una web que te lo dirá

Una duda que quizá no tengan muchas personas, pero, para quién la tenga hoy les enseñaré una herramienta o sitio web que nos dirá aproximaciones de cuánto gana el YouTuber que deseemos buscar.


¿Qué es y qué hace SocialBlade?

Una herramienta o sitio web el cuál nos ofrece la posibilidad de ver datos estadísticos de cualquier YouTuber entre estos datos están:

- El ranking de suscriptores contra otros canales.
- Cantidad de reproducciones en el último mes.
- Suscriptores en los últimos 30 días.
- Vídeos subidos.
- Ganancias hechas con adsense o con alguna NetWork

Entre otros, pero, bueno a lo que vamos (click aquí para ir al sitio), el sitio se verá así:


Genial!... ahora en la parte derecha superior hay un buscador en el cuál pondremos el Usuario del canal que queramos investigar ¿Cómo lo sacamos? fácil, vamos al canal de quién deseemos en este caso usaré el canal de EnchufeTV, su usuario se saca del link:

Usuario: enchufetv

Ahora sí vamos al buscador y lo pegamos luego presionamos enter, y nos saldrá algo como:



  Como vemos el grado de calificación para este canal es "A" (El más alto), cantidad de reproducciones en el último mes, y lo más importante saber cuanto dinero generan (son aproximaciones), en este caso podemos ver que:

Allí nos dice las estimaciones cada mes y el total al año, así con esta herramienta es muy fácil, pero, ahora veamos cuanto ganan los canales más famosos de YouTube (recuerden son aproximaciones):

¿Cuánto gana HolaSoyGerman en YouTube?

Según las estadísticas esto es: 



¿Cuánto dinero gana DrossRotZank en YouTube?

Según la web las estadísticas de este YouTuber son:


¿Cuánto dinero gana AuronPlay?

Datos aproximados de ganancias, visualizaciones y otros son:


Así y muchos más YouTubers podremos ver con esta herramienta, es todo por este post espero les agrade.

Hasta la próxima,

jueves, 22 de enero de 2015

Efecto de página o esquina doblada en blog de Blogger (Page peel)

El efecto de página doblada o page peel en Blogger es algo netamente fácil de aplicar, y en momentos por ejemplo para inaugurar algo en nuestros blogs, ofrecer algún tipo de publicidad de otros sitios entre otras cuestiones.



 Ahora bien hoy les enseñaré como lograr este efecto en nuestros blogs pero antes veamos como funciona en una demostración:


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

Listo esto, iniciamos con lo siguiente:

1. Lo primero será añadir la librería Jquery para ellos vamos a Plantilla > editor HTML > y buscamos lo siguiente línea </head> arriba de ella pegamos esto:


   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

<script>
//<![CDATA[
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
//]]>
</script>

NOTA: Recuerden que si ya tienen esta librería en su plantilla pueden saltar este paso. 

2. Ahora dentro del código de la plantilla buscaremos <body> ó
 <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> (para plantillas hechas con el diseñador), debajo de esta etiqueta pegaremos lo siguiente:

<style>
/* Página doblada -br
----------------------------------------------- */
#pageflip {
position: relative;
right: 0;
top: 0px; /* Modificar por 30px si se tiene la navbar (barra de navegación) */
float: right;
z-index:9;
}
#pageflip img {
width: 50px;
height: 52px;
z-index: 99;
position: absolute;
right: 0;
top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px;
height: 50px;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
background: url(URL IMAGEN DE FONDO) no-repeat right top;
}
#pageflipMirror {
position: static;
right: 0;
top: 0;
float: right;
}

</style> 

<div id='pageflip'>
<a href='URL A LA QUE LLEVA AL DAR CLICK'>
<img src='http://lh3.googleusercontent.com/-E0DxKFTKzhU/UJiWdesl7UI/AAAAAAAADP4/9kK-z8646YA/s000/pagina-doblada.png' style='width: 50px; height: 52px; overflow-x: hidden; overflow-y: hidden;'/></a>
<div class='msg_block' style='width: 50px; height: 50px; overflow-x: hidden; overflow-y: hidden; '/>
</div>

Para modificar los elementos la parte en Naranja contiene la imagen que lleva al fondo al dar el efecto de la página doblada ejemplo (La primera imagen de este post), en la parte de color rosado se pondrá la URL o link el cual al dar click nos lleve allí, muy fácil y sencillo además de elegante.

Es todo espero les guste este sencillo tutorial....

lunes, 19 de enero de 2015

Poner efecto de Zoom en las imágenes usando Jquery - Blogger

imagen tomada gentilmente de ciudadblogger.com
 Un post más en Bloggin Red, el día de hoy les mostraré como aplicar el efecto de Zoom a nuestras imágenes en el blog consta de algunos cortos pasos y estuvo haciendo uso claro de Jquery.
Puedes ver un demo de el siguiente truco funcionando en una imagen aquí:

http://innerfade.blogspot.com/2010/10/zoom-and-clip.html
FUNCIONAMIENTO: Click derecho para acercar cada vez más, y un click fuera de la imagen para que vuelva a su estado normal.
Muy bien ahora vamos a lo más importante como agregarlo a nuestro blog para ello descargamos el siguiente archivo, lo subimos a un servidor o hosting podemos usar dropbox (click aquí para más info).

Luego de tener listo el anterior paso, vamos a plantilla | Edición HTML y antes de </head> pegamos lo siguiente:
<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script language='javascript' src='URL del archivo .js' type='text/javascript'/>
Sólo cambiamos lo que está en rojo por lo que se subió al hosting del archivo js.

Ahora buscamos esto ]]></b:skin> y antes de ello pondremos lo siguiente:
#view {
border: 1px solid #333333; /* Borde de la imagen */
overflow: hidden;
position: relative;
width: 400px; /* Tamaño de la imagen */
}

#image {
display: block;
left: 0;
top: 0;
}

#zoom {
background-image: url(http://4.bp.blogspot.com/_dsEG33PDaHw/TK4Oj4JLR6I/AAAAAAAAAZc/dcjleXweXTY/s1600/fade.PNG);
border: 1px solid #000000;
cursor: pointer;
display: none;
height: 200px;
position: absolute;
width: 200px;
z-index: 100;
}
Y para terminar para poder darle el efecto zoom a una de tus imágenes simplemente usarás el siguiente código en las entradas o ya sea en la plantilla depende de ti:
<div id="view">
<img id="image" src="URL de la imagen" width="400" />
</div>
Y es todo amigos en este post, hasta la próxima.

jueves, 15 de enero de 2015

Cómo eliminar Aplicaciones de páginas web dedicadas al SPAM en Facebook "Compartir para ver"

Si estás en contra de sitios web dedicados de lleno al SPAM en redes sociales, este post es para ti, conoce como operan y se lucran con este método..
Un post más en Bloggin Red hoy será un poco más de análisis y ayuda para quiénes aún caen en las garras de inescrupulosos sitios Web dedicados al SPAM en redes sociales como Facebook.



Retomando las cosas como son...

A continuación explicaré con una pequeña historia el por qué ? del post, la razón por la cuál decidí hacer este post involucra a mi padre con su cuenta de Facebook; es de saberse que muchas personas en internet comparten contenido en sus redes sociales desde distintos sitios web, sin embargo, como no todos los que navegan se conocen las trampas que hay pues aquellos que si las saben quieren usar esas personas para obtener beneficios económicos.

LA HISTORIA...

Todo comenzó hace unas pocas noches atrás estaba mirando que había de nuevo en el inicio de mi Facebook, hasta aquí todo bien, de pronto me percato que de la nada me sale un chat grupal con un link enviado por mi padre quien se llama 'José', dicho enlace llevaba a una web de nombre "pasoviral.com" así:

Como se ve en la imagen anterior en el chulo verde está el chat que se creó, pensando yo que mi padre lo hizo, hasta aquí todo bien entré al sitio web y a simple vista se ve que la información que ponen es volátil (nada interesante o valioso):



Hasta aquí de nuevo normal, así que le dije a mi padre que por favor evitará enviar ese tipo de links a las personas y más en chats grupales ya que a casi nadie le importa y podría ser molesto y le di una charla sobre ello etc, a lo cuál el me dice, que no había enviado nada y que no sabía de que hablaba.

Me preocupó bastante este abuso permitido o no por Facebook en sus chats sin el consentimiento del usuario, así que decidí decirle a mi papá que me diera acceso a su cuenta, pasado un corto tiempo, pude acceder y darme cuenta de una cosa:

- El chat grupal a mi sí me aparecía y a él no en los respectivos mensajes de cada uno.
Según la anterior imagen la ventana izquierda es la mía y la de la derecha es la de mi padre como se ve en la mía tengo el chat marcado con chulo verde oscuro, y en la otra quedan signos de interrogación pues no está el dichoso chat, como prueba de que las dos cuentas estaban abiertas a la par está la hora de los mensajes marcados con azul y el mensaje.

Cabe decir que no fue el único chat grupal que se generó allí, más o menos fueron 3 en los que me involucré con links hacia el mismo sitio web basura.
OFICIALMENTE ERA UN ABUSO Y ERA SPAM
Entonces,

¿Cómo eliminar el SPAM de mi cuenta de Facebook?

Para este tipo de casos con estas webs así lo mejor es eliminar aplicaciones que aceptamos tiempo atrás (posiblemente no recordemos) para ello iremos a configuración > aplicaciones -click aquí para ir-: 


Allí como se puede apreciar hay varias aplicaciones con nombres como "vídeos impactantes", "Fanluxe: Lo más viral de la red" etc., lo que se procede a hacer es a eliminar dichas aplicaciones que no sirven para nada, de tal forma que sólo se selecciona la App y se suprime:

Es importante seleccionar donde dice "Eliminar toda la actividad de XXXX en facebook...." para que todo sea más efectivo, con esto ya estará todo hecho para que no se genere más SPAM en nuestra cuenta de Facebook.


RECOMENDACIONES PARA NO CAER:

A continuación desde mi experiencia espero poder brindar una serie de consejos para que sean más astutos contra este tipo de sitios:

- Dejar de visitar este tipo de sitios web, ¿cómo identificarlos? Algo fácil su contenido tiene títutos algo pasados o muy exagerados.

- No compartir en ninguna red social su contenido web en especial cuando se desea ver un vídeo y al dar en el reproductor nos sale que para verlo es obligatorio compartirlo POR FAVOR EVITEN ESO.

- Verifica con frecuencia las aplicaciones que abres con tu cuenta de Facebook ya que como dije antes algunas pueden colarse fácilmente dependiendo del conocimiento del usuario.

Es todo en este post amigos espero les sirva para que analicen mejor qué tipo de webs visitan.

Hasta la próxima,

domingo, 11 de enero de 2015

Fechas de actualizaciones a Android 5.0 Lollipop para los principales Celulares

Para este 2015 que recién inicia, las buenas noticias sobre la última versión de Android en tu SmartPhone también llegan, así que en este artículo explicaré un poco a que principales marcas y modelos de teléfonos llegará "Android 5.0 Lollipop".-


Aunque en algunos modelos como los Nexus que ya están viviendo este cambio han experimentado algunos problemas con esta nueva versión, pero, los encargados de dichos problemas hacen todo lo posible para hacer de Lollipop 5.0 algo mejor y más eficaz.

A continuación mostraré los principales Teléfonos que serán actualizados y sus fechas:

SAMSUNG

Samsung Galaxy S5, Su actualización está disponible en múltiples países se dice que primeró rondó y llegó a usuarios de Polonia, y semanas después en otros países Europeos, los usuarios que conservan equipos libres ya han recibido el paquete y señal de actualización. Lo que nos queda No claro es que ya empiezan a recibir las actualizaciones.

Samsung Galaxy Note 4, No hay información oficial pero según rumores se dice que este móvil recibirá la actualización a Lollipop durante este mismo mes de enero.

Samsung Galaxy S4,La buena nueva es que Samsung confirmó oficialmente que que actualizará este equipo a Lolllipop 5.0, aún no hay una fecha en concreto, se dice que posiblemente en febrero.

Samsung  Galaxy Note 3, Para la empresa de celulares SAmsung es importante actualizar sus equipos más recientes lastimosamente para esta versión no se tiene una fecha exacta, pero, el hecho de que se actualice a la última versión de android será asegurado.

Otros equipos de la misma marca que recibirían la actualización a Lollipop 5.0:

Modelos: Samsung Galaxy Note Edge, Samsung galaxy Note 2, Samsung Galaxy S5 mini, Samsung Galaxy S5 active y Samsung galaxy Alpha.

LG


LG G3, Para este modelo su actualización se lanzó por parte de la compañía desde Noviembre de 2014, pero, debido a que presentó fallos se retiró de momento se espera que reanuden su lanzamiento.

LG G2, Para este modelo también lo tocan las buenas noticias ya que también tendrá su actualización lo que queda en espera es a que llegue primero al modelo G3 y luego si a este equipo.

MOTOROLA

Moto G (segunda generación), Primer Teléfono después de los Nexus en comenzar con la actualización para Lollipop 5.0 (Claro que depende del país donde vivas), en el caso de España este modelo ya debería estar actualizado si aún no estás con él sólo espera porque de que llega, llega.

Moto G (Primera Generación), A este modelo también lo tocará la actualización sólo queda esperar suponiendo que primero llega a los del mismo modelo pero más recientes de segunda generación.

Moto X (Segunda generacion), algunos modelos dependiendo del país en Noviembre recibieron la actualización, y si aún no seria raro ya que está disponible ve a configuraciones y mira lo que debes hacer.

SONY


Sony Xperia Z3, Este modelo y el último lanzado por Sony comenzará a recibir la actualización desde Febrero del presente año oficialmente dicho por Sony.

Sony Xperia Z2, En este modelo llegarán terminando Febrero o iniciando marzo claro después de que su superior el Z3 esté actualizado.

Sony Xperia Z1, Sony lleva un orden y se dice que el Z1 si la recibirá pero deberás esperar ya que primero hay dos equipos por encima de este así que quizá llegue un poco tarde.

Otros modelos que recibirían la actualización: Sony Xperia Z, Sony Xperia ZL, Sony Xperia ZR, Sony Xperia Z Tablet, Sony Xperia Z1S, Sony Xperia Z Ultra, Sony Xperia Z1 Compact, Sony Xperia Tablet Z2, Sony Xperia Z3v, Sony Xperia Compact y Sony Xperia Xperia Tablet Z3 Compact.

HTC


HTC One (M8), Lo que se dijo para esta versión fue el 3 enero estaría listo para su lanzamiento pero al no ser así sólo queda esperar quiza unas semanas más pero de que llega así será.

HTC One (M7), Posiblemente esté lista a inicios de febrero o finales del mismo lo cierto es que llegará después de su superior el (M8) por ende si conservas este modelo queda que esperes para recibir todo lo bueno.


Y con esta información me despido es de esperar que llegue esta versión tan pronto como queremos. Hasta la próxima...

El material publicado en Bloggin Red es de forma completamente gratuita.
Tu contribución permite que este sitio continúe en funcionamiento.

SÍGUENOS EN: