Código, Web y Blogs


Descargar vídeos de youtube, Facebook en línea (Sin programas) en HD y otras resoluciones

Muchos de nosotros hemos buscado vídeos en You Tube tan a gusto que queremos descargarlos quizá esto para algunos sea fácil, pero, para otros no tanto, así que hoy les enseñaré como descargar vídeos de You Tube y facebook sin descargar programa alguno, esto lo lograremos directo desde nuestro navegador para ello haremos los siguientes pasos:

1. Lo primero será tener nuestro vídeo a descargar ya sea de You Tube o de Facebook  será el mismo proceso, en mi caso usaré este vídeo:

https://www.youtube.com/watch?v=MrLE0gDU3yE

2. Luego iremos a la siguiente página Web CLICK AQUÍ nos saldrá un sitio web similar a este:


3. Ahora pegaremos nuestra URL del vídeo en el espacio que se encuentra encerrado y daremos al lado en DOWNLOAD:



4. En la parte inferior desplegará los distintos formatos disponibles que tenemos para descargar nuestro vídeo para mi vídeo de you tube tengo las siguientes la que tiene la flecha es la que recomiendo que usen para descargar: 




5.En el paso final damos click sobre el enlace "Download MP4" y guardamos para iniciar descarga ó damos click derecho "Guardar enlace como" y allí se guardará en su formato mp4.

NOTA: Para los vídeos de Facebook como dije es lo mismo pero para saber que link debemos copiar, sólo lo hacemos tomando el que vemos cuando abrimos el vídeo ejemplo:

Es todo espero les sirva este breve tutorial... 

Hasta la próxima,


Agregar o poner Slider de imágenes en blog de Blogger (Orbit Slider)

FRAGMENTOS TOMADOS GENTILMENTE DE CIUDADBLOGGER

El día de hoy les quiero compartir un Slider de imágenes preferiblemente, pero, claro este también lo pueden usar para sus publicaciones aunque ya no será automático como otros sino manual.

PARA VER UN DEMO DEL SLIDER FUNCIONANDO PUEDEN DAR CLICK EN DEMO:

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


Para incorporar este Slider en nuestro blog haremos los siguientes pasos:

1. Poner los Scripts para buscaremos en el código de la plantilla plantilla > Editar HTML la etiqueta </head>  y encima de esta copiamos lo siguiente: 

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

<!--[if IE]>
<style type="text/css">
.timer { display: none !important; }
div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
</style>
<![endif]-->

<script type='text/javascript'>
$(window).load(function() {
$(&#39;#featured&#39;).orbit({
advanceSpeed: 5000,
&#39;bullets&#39;: true,
&#39;timer&#39; : true,
&#39;animation&#39; : &#39;horizontal-slide&#39;
});
});
</script>

<script type='text/javascript'>
//<![CDATA[
/*
* jQuery Orbit Plugin 1.1
* www.ZURB.com/playground
* Copyright 2010, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/

(function(e){e.fn.orbit=function(a){a=e.extend({animation:"fade",animationSpeed:800,advanceSpeed:4E3,startClockOnMouseOut:true,startClockOnMouseOutAfter:3E3,directionalNav:true,captions:true,captionAnimationSpeed:800,timer:false,bullets:false},a);return this.each(function(){function m(c){function g(){f.eq(h).css({"z-index":1});s=false}var h=b,k=c;if(h==k)return false;if(!s){s=true;if(c=="next"){b++;if(b==n)b=0}else if(c=="prev"){b--;if(b<0)b=n-1}else{b=c;if(h<b)k="next";else if(h>b)k="prev"}a.bullets&&
x();if(a.animation=="fade"){f.eq(h).css({"z-index":2});f.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,g);a.captions&&o()}if(a.animation=="horizontal-slide"){f.eq(h).css({"z-index":2});k=="next"&&f.eq(b).css({left:t,"z-index":3}).animate({left:0},a.animationSpeed,g);k=="prev"&&f.eq(b).css({left:-t,"z-index":3}).animate({left:0},a.animationSpeed,g);a.captions&&o()}if(a.animation=="vertical-slide"){f.eq(h).css({"z-index":2});k=="prev"&&f.eq(b).css({top:u,"z-index":3}).animate({top:0},
a.animationSpeed,g);k=="next"&&f.eq(b).css({top:-u,"z-index":3}).animate({top:0},a.animationSpeed,g);a.captions&&o()}}}var b=0,n=0,t,u,s,d=e(this).addClass("orbit"),f=d.find("img, a img");f.each(function(){var c=e(this),g=c.width();c=c.height();d.width(g);t=d.width();d.height(c);u=d.height();n++});f.eq(b).css({"z-index":3});if(a.timer){d.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');var j=e("div.timer"),p;if(j.length!=0){var C=
a.advanceSpeed/180,v=e("div.timer span.rotator"),y=e("div.timer span.mask"),z=e("div.timer span.pause"),l=0,A,w=function(){p=true;z.removeClass("active");A=setInterval(function(){var c="rotate("+l+"deg)";l+=2;v.css({"-webkit-transform":c,"-moz-transform":c,"-o-transform":c});if(l>180){v.addClass("move");y.addClass("move")}if(l>360){v.removeClass("move");y.removeClass("move");l=0;m("next")}},C)},q=function(){p=false;clearInterval(A);z.addClass("active")};w();j.click(function(){p?q():w()});if(a.startClockOnMouseOut){var B;
d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"><span class="orbit-caption"></span></div>');var r=d.children("div.caption").children("span").addClass("orbit-caption").show(),o=function(){var c=f.eq(b).attr("rel"),g=e("#"+c).html(),h=r.height()+20;r.attr("id","#"+c).html(g);g?r.parent().stop().animate({bottom:0},a.captionAnimationSpeed):r.parent().stop().animate({bottom:-h},
a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');j=d.children("div.slider-nav").children("span.left");var D=d.children("div.slider-nav").children("span.right");j.click(function(){a.timer&&q();m("prev")});D.click(function(){a.timer&&q();m("next")})}if(a.bullets){d.append('<ul class="orbit-bullets"></ul>');var E=e("ul.orbit-bullets");for(i=0;i<n;i++){j=e("<li>"+i+"</li>");e("ul.orbit-bullets").append(j);
j.data("index",i);j.click(function(){a.timer&&q();m(e(this).data("index"))})}var x=function(){E.children("li").removeClass("active").eq(b).addClass("active")};x()}})}})(jQuery);
//]]>
</script>
Lo que está en azul representa la velocidad con la que cambiará cada imagen en el slide sólo se mmodifica a gusto de cada unon y estuvo.

2. Luego pegaremos los estilos CSS así que buscaremos este código  ]]></b:skin> arriba de este código pegamos lo siguiente:

/* ORBIT SLIDER
----------------------------------------------- */
#featured {height: 1px; width: 1px; overflow: hidden;}
div.orbit {
width: 1px;
height: 1px;
position: relative;
overflow: hidden;
}

div.orbit img {
position: absolute;
top: 0;
left: 0;
}
div.orbit a img {border: none;}

div.timer {
width: 40px;
height: 40px;
overflow: hidden;
position: absolute;
top: 10px;
right:10px;
opacity: .6;
cursor: pointer;
z-index: 1001;
}

span.rotator {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: -20px;
background: url(http://4.bp.blogspot.com/_dsEG33PDaHw/TMHhPl2pVcI/AAAAAAAAAas/O7A5Aa7ZMhs/s1600/rotator-black.png);
background-repeat: no-repeat;
z-index: 3;
}

span.mask {
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
overflow: hidden;
}

span.rotator.move {left: 0;}
span.mask.move {
width: 40px;
left: 0;
background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TMHhQItQqeI/AAAAAAAAAaw/afLXhP0yQI8/s1600/timer-black.png);
background-repeat: repeat;
background-position: 0px 0px;
}

span.pause {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0px;
background-image: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TMHhPCHG1JI/AAAAAAAAAak/EiGTzJCfL1c/s1600/pause-black.png);
background-repeat: no-repeat;
z-index: 4;
opacity: 0;
}

div.timer:hover span.pause,
span.pause.active,
div.timer:hover span.pause.active { opacity: 1; }

div.caption {
background: #000;
background: rgba(0,0,0,.6);
width: 100%;
z-index: 1000;
position: absolute;
bottom:-100px;
color: #fff;
padding: 8px 0;
text-align: center;
}

div.caption span {
padding: 0 10px;
font-size: 14px;
text-shadow: 0px 1px 0px rgba(0,0,0,.8);
margin: 0;
}
.orbit-caption { display: none; }

div.orbit:hover div.slider-nav { display: block; }
div.slider-nav { display: none; }
div.slider-nav span {
width: 33px;
height: 33px;
text-indent: -9999px;
position: absolute;
z-index: 1000;
top: 43%;
cursor: pointer;
}

div.slider-nav span.right {
background-image: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TMHhPefIDjI/AAAAAAAAAao/Gyy0k0F5Hzw/s1600/right-arrow.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TMHhNd07EPI/AAAAAAAAAaY/_k9SqP88gV8/s1600/left-arrow.png);
left: 10px;
}

.orbit-bullets {
position: absolute;
z-index: 1000;
list-style: none;
top: 10px;
left: 7px;
margin: 0;
padding: 0;
}

.orbit-bullets li {
float: left;
margin-left: 5px;
cursor: pointer;
color: #999;
text-indent: -9999px;
background-image: url(http://4.bp.blogspot.com/_dsEG33PDaHw/TMHhLtWyUXI/AAAAAAAAAaU/8MQ8LP5flS8/s1600/bullets.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 7px;
height: 7px;
overflow: hidden;
}

.orbit-bullets li.active { color: #222; background-position: -7px 0; }

3. Como último paso el HTML del Slide para visualizar las imágenes para esto iremos a Diseño | Añadir un gadget | HTML/JavaScript y pegamos lo siguiente:

 <div id='featured'>
<a href='URL del enlace'><img rel='foto1' src="URL de la imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto1'>DESCRIPCIÓN</span>

<a href="URL del enlace"><img rel='foto2' src="URL de la imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto2'>DESCRIPCIÓN<a href='URL del enlace' style='color: #fff';'>DESCRIPCIONN MAS ENLACE</a></span>

<a href="URL del enlace"><img rel='foto3' src="URL de la imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto3' style='text-align:center;'>DESCRIPCIÓN</span>

<a href='URL del enlace'><img rel='foto4' src="URL de la imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto4'>Este es un ejemplo de la descripción con enlaces: <a href='URL del enlace' style='color: #fff';'>DESCRIPCIÓN</a></span>
</div>

Bien lo último es lo que lleva las imágenes para saber donde ubicarlas modificaremos lo que dice URL de la imagen por su link es lo que está en color rojo.

Lo que está en color Verde claro hace referencia a las descripciones que llevaría cada imagen sino la desean poner solo dejan el espacio vacío.

Lo que está en color Naranja son los enlaces o URL a los que llevaría al dar click sobre la imagen o la palabra de la descripción tan solo se reemplazan y ya.

Es todo por hoy cualquier duda que tengan con el post no olviden comentar y les ayudaré..

Hasta la próxima...


Menú elegante con efecto deslizante para blog de blogger (Agrégalo en un paso)

Hoy les mostraré como agregar de forma muy sencilla un menú hecho con HTML y CSS donde su diseño es muy simple pero a la vez elegante, aclaro que el menú no es de mi creación y sólo hice unas pequeñas modificaciones y estuvo.

Menú deslizante para blogger con CSS y HTML 2014
El menú seria este pueden interectuar con el:


Muy bien podemos incorporar este menú en nuestro blog haciendo los siguientes pasos:

1. Vamos a Diseño | Añadir gadget | HTML/JavaScritp y allí pegamos el siguiente código tal cual está:

<style>
/*------ CSS3 ---------*/
#bit-menu, #bit-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#bit-menu {
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #3A3A3A;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#bit-menu:before,
#bit-menu:after {
content: "";
display: table;
}
#bit-menu:after {
clear: both;
}
#bit-menu {
zoom:1;
}
#bit-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#bit-menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#bit-menu li:hover > a {
color: #fafafa;
}
*html #bit-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#bit-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#bit-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#bit-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#bit-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#bit-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#bit-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#bit-menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#bit-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#bit-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#bit-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#bit-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#bit-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#bit-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
</style>
<ul id="bit-menu">
<li><a href="Tu-Url">Home</a></li> <li>
<a href="Tu-Url">Categories</a> <ul>
<li><a href="Tu-Url">CSS</a></li> <li><a href="Tu-Url">Graphic design</a></li> <li><a href="Tu-Url">Development tools</a></li> <li><a href="Tu-Url">Web design</a></li> </ul>
</li>
<li><a href="Tu-Url">Work</a></li> <li><a href="Tu-Url">About</a></li> <li><a href="Tu-Url">Contact</a></li> </ul>

Para modificar los textos del menú cambiamos las palabras en color Naranja y para poner sus respectivos links o enlaces al dar click modificamos los que dicen TU-URL que están en color rojo.

Hecho esto sólo queda guardar el trabajo realizado e ir al blog y mirar su función, aclaro que es lógico si se trata de un menú se debe agregar en los gadgets superiores arriba de las entradas en la parte de Diseño.


Sacar claves guardadas de páginas, redes sociales y otros sitios en un navegador web (Firefox, Chrome) por (Inspeccionar elemento)

Este post está hecho para darle un uso educativo en ningún momento se pretende causar el mal contra alguien, si usted implementa algo todo corre bajo su responsabilidad
Aunque a muchos esto les parezca poco creíble o a los que sepan del tema algo muy fácil o "bobo" no se trata de lograr el mal contra alguien directamente sino los descuidos que se dan al dar a ese famoso "recordar contraseña" a determinado sitio web todo por alimentar nuestra flojera y demorarnos unos segundos menos.



Es importante tener en cuenta que aunque el pc en el que demos a esta opción sea nuestro equipo personal nunca falla la posibilidad aunque sea mínima de que algún curioso sepa esto y por mera casualidad tenga acceso a nuestros correos, o cuentas de banco o de Paypal lo más cerca a manejo de dineros.

¿Cómo logra alguien obtener de forma sencilla el password de nuestra cuenta en facebook y redes sociales?

Aunque hace tiempo atrás como acceder a una cuenta de facebook desde el Home del sitio y con la opción de guardar contraseñas habilitadas, este puede aplicarse a todo tipo de sitios que recuerden nuestras claves de usuario.

Daré un breve ejemplo para obtener la clave guardada de una cuenta de twitter en un navegador: 

1. Por suerte alguien entró a twitter.com y se fijo que había una cuenta ya lista claro que puede ingresar pero esta persona quiere la clave:

Sacar claves de Twitter sin programas

2. Seleccionará la clave y dará clic derecho, allí a lo último dice "Inspeccionar elemento":


3. Luego saldrá un cuadro inferior horizontal en donde se muestra el código y programación de este fragmento analizado en este caso el de la contraseña seria:



4. Analizando más de cerca el código vemos en su HTML que el tipo de texto está en "PASSWORD":


5. Y seria tan sencillo como cambiar esta propiedad por "TEXT" haciendo esto que se visualice la contraseña fácilmene:


Dejandole a quien supo esto que la clave de esta cuenta de TWITTER es "PASSDEPRUEBA" logró hacerlo todo porque aquella persona habilitó la opción de guardar contraseña, y quién lo hizo no levantó sospecha alguna.

¡Sobre cuentas de dinero como Paypal.com! 

Nada está libre de cosas sencillas y es que el manejo de economía por internet es algo delicado demostraré que esto también puede aplicarse a las cuentas de Paypal...

1.Quizá en Paypal alguien dio bajo su voluntad o sin saberlo al famoso "Recordar Contraseña" alguien que iba a entrar se ha dado cuenta y aplico el método visto anteriormente como ya expliqué detalladamente esta vez seré más directo:

- Inspecciono el elemento:

- Cambio por la propiedad de texto y  estuvo:



Ahora se que la clave de esta cuenta es"CLAVEDEPRUEB123" quizá aunque la forma sea la misma la gravedad y el como perjudica esto al descuidado que no supo cuidar su cuenta bien va bajo el tipo de sitio en este caso Paypal es de más gravedad que twitter por ejemplo. 


Con esto doy a entender y concluir algunas cosas como:

-Tener cuidado sobre donde guardamos nuestras claves en cualquier sitio web.
-Nunca habilitar esta opción para sitios relacionados con el manejo de dinero.
-Sale mejor navegar por modo incógnito.

Espero este post les sirva y los haga pensar un poco sobre como administramos nuestras claves en nuestros navegadores.

Saludos, y hasta la próxima...





Speed Art - Photoshop CS6 - Creando Banner publicitario "Moto Pulsar Colombia"

En este segundo Speed Art realizado por un autor de Bloggin Red, mostramos el elegante y sencillo Diseño de un banner publicitario tomando como referencia la marca de motos Pulsar "Colombia":


El diseño Finalizado es el siguiente:


A continuación pondré el vídeo que espero lo tomen con mucho agrado, recuerdo a quien no sepa que no hago un tutorial exactamente sobre el tema porque nadie hará los mismo diseños siempre por eso "Speed Art" Sin embargo algunos de los efectos que yo aplique o imágenes les pueda servir:


Sí les ha gustado y quieren obtener el PSD del proyecto pueden comentar y lo enviaré.

Hasta la próxima bloggers.....


Descargar Adobe DreamWeaver CS6 PORTABLE en español (1 link)



Para aquellos amantes del Diseño WEB hoy quiero compartirles este potente programa y muy dinámico, se trata de Adobe DreamWeaver CS6 en su versión portable y totalmente en español, habilitado y perfecto para programar en lenguajes web tales como PHP, HTML, CSS entre otros...

DESCARGAR, BAJAR ADOME DREAMWEAVER CS6 PORTABLE EN ESPAÑOL 1 LINK EN MEDIAFIRE
Para descargar el programa sólo den click en el enlace de abajo:

CLICK AQUI PARA DESCARGAR (No disponible)


INSTALACIÓN

Luego de haberlo descargado procedemos a descomprimir el ejecutable en algún directorio de nuestro PC.

- Doble click sobre el instalador y escogen el sitio donde se instalarán todos los componentes y estuvo.


 




 
Es todo en este post,

Hasta la póxima...


Poner botón leer más automático con imagen miniatura en Blogger (método 2)

Algunos fragmentos tomados gentilmente de ciudadblogger
 
Hace ya un tiempo atrás expliqué como agregar el botón leer más, pero, de forma manual aunque es muy fácil lograrlo, para ello seguiremos el siguiente tutorial:

¿No quieres leer? no te preocupes, tenemos 
lo mismo pero en vídeo 



Estructuralmente el truco se verá reflejado similar a la imagen anterior, con algunos pasos.

1. Dirigirnos a Blogger > Edición HTML > y buscamos este código:


<data:post.body/>

Nota: Generalmente esta etiqueta suele aparecer dos o 3 veces, en la mayoría de casos es la segunda encontrada, sin embargo si esta no funciona recomiendo que prueben con cada una.



La eliminamos y en su lugar pondremos el siguiente código completo:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id' style='font-size:13px; text-align:justify;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

 2. Lo siguiente será buscar </head> y antes de esta etiqueta pegamos lo siguiente:

 <script type='text/javascript'>
summary_txt = 410;
img_thumb_width = 120;

</script>

<script type='text/javascript'>
//<![CDATA[
// Script original de Anhvo
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src="http://lh6.ggpht.com/_dsEG33PDaHw/TSJuyxzIKkI/AAAAAAAAAgU/GP7fRmaI-5A/thumbnail.png" width="'+img_thumb_width+'px" /></a></span>';
summ = summary_txt;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px"/></a></span>';
summ = summary_txt;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

La parte color naranja:

summary_txt = 410; Indica el número de caracteres en el resumen de la entrada.
img_thumb_width = 120; Es el ancho que tendrá la imagen en miniatura..


La parte color azul:

Indica el link de la imagen por defecto cuando el post no tiene imagen alguno se mostrará dicha imagen, para cambiar la imagen sólo cambien el link subiendo la nueva imagen a un servidor y estuvo.

Es todo en este post hasta la próxima Bloggers......


Como activar el chat en HALO CE (Custom Edition) - 2020 Gratis

En una solución rápida a un problema que muchos Jugadores de HALO CE buscan, cuyo problema se ve reflejado en que al jugar dicho juego no a todos les sale el chat o la parte que nos avisa a que jugador hemos matado, es por esto que hoy les mostraré una solución muy sencilla veamos:

Descargar Chat Halo CE en español 2014 full link directo 1 link

1. Será descargar el programa el cuál se debe instalar normalmente, el software está alojado en MEGA.


2. Después de bajarlo sólo lo descomprimen en el escritorio y lo ejecutan para instalarlo y estuvo.

Programas HALO CE  para activar chat !

3. Abrimos el juego y probamos que funcione y listo fue todo muy fácil.

Hasta la próxima,


Speed Art Photoshop CS6 diseño de imagen para sección juegos WEB

He decidido involucrar al Blog un pequeño apartado tanto en You Tube como en otras redes, se trata de algunos Speed Art que realizaré poco a poco algunos que aporten ideas para aquellos que diseñan, botones imágenes etc. lo que sea relacionado con blogs, sitios webs y otros:


Este Speed Art lo hice basado en la sección de Juegos de bloggin Red y la nueva web que se lanzó con Juegos en flash para aquellos que quieran pasar un buen rato la imagen final a tener es la siguiente:
Espero que este vídeo les motive a aprender una pequeña parte del Diseño no hay que ser el mejor de todos para hacer cosas sencillas y buenas a nuestro gusto:


Un gusto queridos Bloggers hasta la próxima....


Cómo infectar una computadora, métodos alternativos.

¿ Y quién no se ha topado con la formá de distribuir un payload de tal forma que no pueda ser detectado ? Pues hé aquí otro método más que nos servirá para obtener una sesión meterpreter usando herramientas de software libre y qué la mayoría vienen ya listas en distros de seguridad.

Sin más, aquí el vídeo :









Se puede hackear un blog de blogger ?


ESTE POST LO HICE CON EL IDEAL DE ACLARAR ALGUNAS COSAS NO CIERTAS Y OTRAS CIERTAS QUE HE ENCONTRADO EN FOROS Y OTRAS WEBS LLENAS DE INFORMACIÓN BASURA E IRREAL SOBRE EL TEMA

 Aunque no todos los Bloggers se hacen este tipo de preguntas es bueno saber algunas posibles respuestas a esta "pequeña" inquietud.


Quizá muchos usuarios han tenido esa cuestión de si su blog hecho en BLOGGER se puede hackear otros en cambio buscan sobre esta duda para mirar si pueden lograr hacer algún mal al blog de alguien de nuevo y en este caso hecho en Blogger, desde mi punto de vista puedo decir que hackear tiene distintas perspectivas sobre lo que se vaya aplicar el término.

SOBRE NUESTROS BLOGS EN BLOGGER Y SU SEGURIDAD

Para los despistados que quizá no lo sepan Blogger esta legendaria plataforma pertenece a los grandes de Google, ahora analicemos un caso:

- Cuando un "hacker" sin tener acceso de admin quiere entrar a hacer daño en mi blog de blogger, No negaré su posibilidad sólo sobre la plataforma más no sobre un blog, pero, resumiré algo hackear blogger significa hackear a Google ahora bien viendo la situación del caso y hasta donde sé, bajo mi conocimiento a un blog de blogger no se le puede aplicar algún tipo de inyección SQL, ataque xss u otras vulnerabilidades muy famosas sencillamente porque nuestro blog estructuralmente maneja lenguajes como  HTML, CSS, JavaScript lo cual disminuye las posibilidades para un "atacante".


- Cuando alguien intenta un ataque DDoS contra mi blog,  Resumiendo sobre un ataque DDoS se trata de usar algún Sotware o código que envíe muchas peticiones a un determinado sitio de tal forma que sature el servidor donde se hostee el sitio, suponiendo que un sitio web tolere entre 30 mil y 50 mil visitas diarias simultáneas, pero, alguien ejecuta ataques de este estilo (Se necesitan varios equipos para ejecutar el ataque eficazmente) con un poco de suerte lograría hacerle creer al servidor que se presentan mas de 100 mil peticiones o visitas simultáneas, haciendo que al final se tenga como resultado:


¿ Esto puede aplicarse contra mi blog?..... Sí se puede aplicar pero no se logrará mayor efecto si bien dije anteriormente, por blogger no pagamos Hosting, el Hosting son los servidores de Blogger o Google por ende soportan y toleran muchas visitas de ser un blog demasiado visitado, claro que podría lograrse con gran dificultad si se tiene con suerte un ejercito de personas haciendo el ataque a la vez, pero, es muy poco probable.


SOBRE EL ROBO DE UNA CUENTA QUE INVOLUCRA UN DAÑO AL BLOG


Ya analizada la parte sistemática y por métodos de "hacking" si así puedo llamarlo para lograr lo que estuviera a alcance con tal de afectar un blog, ahora veremos que por esta parte SÍ EXISTE LA POSIBILIDAD DE QUE NUESTRO BLOG NO SEA HACKEADO PERO SÍ AFECTADO AL SABER QUE ALGUIEN LOGRÓ ROBAR NUESTRA CUENTA DE BLOGGER, sin embargo daremos algunas situaciones y acciones que se ejecutan para el robo de cuentas en este caso de blogger:

- Cuando tristemente somos víctimas de Pishing, El pishing algo en lo que muchas personas caen víctimas, un ejemplo claro está en la imagen anterior es la falsedad de un sitio muy pero muy similar al original, en nuestro caso el inicio de sesión en blogger que es muy parecido a todos los servicios de Google, queda saber que como consecuencia si alguien logra tener nuestra cuenta dicha persona puede:

1. Eliminarnos nuestros blogs.
2. Modificar la plantilla a su gusto (desordenar todo).
3. Borrar las entradas ( Algo más valioso que la plantilla cuando el blog tiene muchas visitas).
4. Redireccionar nuestros blogs a otro sitio con un script   y con un poco de mala suerte para nuestro blog este script sea encriptado u ofuscado.
5. Que nos modifiquien las entradas por "X" contenido distinto.

Entre otros cientos de acciones....

- Cuando somos víctimas de un Keylogger, Este caso es muy similar al anterior pues su objetivo es tener nuestros datos de acceso sólo que es con un programa instalado en el equipo el cual registra minuto a minuto todo lo que tecleamos en nuestro computador y el destino en donde lo escribimo,s los daños son los mismo enumerados anteriormente.

Así que ahora que saben esto más atención,

Esto ha sido todo por el post de hoy aunque pude profundizar más, decidí ser lo más general posible espero les sirva este contenido no olviden compartir.

Hasta la próxima y cuiden sus blogs,







Poner contraseña a blog o páginas estáticas en blogger

Aunque de forma común o en sano juicio Blogger no admite la posibilidad de poner contraseña a un elemento específico de un blog o a todo el blog; haciendo unos truquitos por aparte se podrá lograr, sin tener ningún conflicto con otros elementos del sitio.

Como ponerle contraseña a mi blog 2014 fácil y sencillo
Nota: Primero explicaré como hacerlo en el blog en general y después en una página estática de nuestro blog... aclaro NO SE RECOMIENDA USARLO CON ENTRADAS INDIVIDUALES genera conflictos..

Colocar contraseña al blog en general

Demostramos que funciona aquí; al ingresar la contraseña esta será "blogginred" y listo:

http://blogpruebasbr2.blogspot.com/



Para añadirlo,

Lo primero será dirigirnos al blog que queremos privatizar, ahora vamos a "Diseño > Edición HTML" y allí buscamos la etiqueta </head> , arriba de esta etiqueta pegaremos lo siguiente:

<Script languaje="javascript">
  var getin = prompt("Necesitas una contraseña para acceder al blog")
  if (getin!="Aquí la contraseña")
  {location.href='URL de página anunciando error'}
  else
  {alert('Contraseña correcta, acepta para ingresar')}
</Script>

Hecho esto el paso siguiente será modificar los elementos de color rojo, naranja y azul; en el rojo irá el mensaje que visualizará el código al pedir la contraseña:





Lo que está en color azul se reemplaza por la contraseña que queramos introducir.

Lo que está en color naranja es la URL o link hacia donde redireccionará cuando la contraseña que se introduzca no es la correcta recomiendo que pongan el mismo link principal del blog....

Y esto es para que nos funcione en todo un blog.


Colocar contraseña a página estática en mi blog

Para poner contraseña a una página específica de nuestros blogs es un procedimiento similar al anterior, sin embargo, aclaro que no es para las entradas o publicaciones individuales claro que si lo hacen les funciona, pero, va generar conflicto al entrar al blog es por eso que en las páginas estáticas funciona perfectamente sin generar conflicto alguno...

De esta forma al agregarlo en una página específica nos sirve para que ese contenido sea valioso o no sólo ciertas personas puedan tener acceso bueno no?

1. Nos dirigimos al apartado páginas de nuestro blog:



2. En la página que se quiera poner el acceso por contraseña la abrimos y vamos al modo " HTML":




3. En este modo en la parte superior de primeras pegaremos el siguiente código:

<Script languaje="javascript">  var getin = prompt("Necesita una contraseña para acceder aquí")  if (getin!="Aquí la contraseña")  {location.href='URL de página anunciando error'}  else  {alert('Contraseña correcta, acepta para ingresar')}</Script>

Para modificar los elementos es igual a lo anterior lo azul es la contraseña que se desea poner, lo rojo el mensaje que pondrás y lo naranja la URL de re dirección en caso de ingresar mal la contraseña (Recomiendo que pongan el link de la página misma con contraseña de acceso para que lo vuelvan a intentar en caso de fallar).

Como ven es muy fácil y esto traerá mucha ayuda en una que otra situación..

Hasta la próxima bloggers,


Donde subir o alojar archivos - ficheros PHP (hosting gratuito)

En el día de hoy enseñaré como subir archivos o ficheros php a un hosting (gratuito), para ello les diré lo siguiente:



- Los archivos deben terminar en extensión .php
-  El hosting gratuito por más que se diga nunca será mejor que uno de pago.
- Para usar los archivos o ficheros no es necesario montar el sitio en el mismo hosting pues el mismo sólo se usará para alojarlos y citarlos desde otro lugar.

Sabiendo esto, lo primero será ir a Byethost allí se da click en "Free hosting Sing Up":

Luego, se llena el típico formulario de registro de datos:



Después de llenar el formulario y dar click en "register" se debe confirmar el uso de la cuenta mirando el correo electrónico que se recibe del hosting, "sino está en los correos normales mirar la carpeta spam":



Después de confirmar la creación de la cuenta, llegará otro correo con el acceso al cpanel y su debido usuario - contraseña: 

 

Listo esta parte en dicho correo llega a donde podemos acceder, par ahorrar camino iremos al Cpanel el cuál tiene la URL a lo último del correo.



Allí colocaremos los datos que nos llegaron de nuevo en el correo como Cpanel username y Cpanel password, ingresamos y nos saldrá un escritorio de esta forma: 



Ahora, nos dirigimos a Files > Online File Manager, como se ve en la imagen anterior después de hacer esto nos saldrá el panel de gestión de archivos en nuestro hosting aquí nos dirigimos a "Htdocs" :


Al haber clickeado donde se muestra nos llevará a otro directorio en el cual se busca la opción "New File":



Luego de clickear en "new File" procederemos a pegar nuestro código php en la caja de texto que se muestra allí en mi caso será un "hola mundo con PHP":



En la imagen anterior se pegó el código en este caso muy sencillo y en "New File name" establecemos el nombre del archivo con la extensión en este caso .php al finalizar damos en guardar y atrás, verificamos nuestro panel de archivos y veremos el que recién su hosteo:



Ahora para saber el link de nuestro fichero php debemos tener en cuenta la URL del host que se ha tomado en este caso:
http://www.adelamoncar.byethost13.com

Pero cada uno busca la que estableció y al final de la URL se pondré "/phparchivo.php" quedando como resultado:
http://www.adelamoncar.byethost13.com/nombre.php

Sí me dirijo al link directamente veré el hola mundo que hice:

 Y es todo se logró el objetivo recuerden que no sólo son archivos php también HTML, CSS, SCRIPTS pero en esta ocasión quiser detallar más en este lenguaje..

Hasta la próxima,

ESTAMOS EN: