Código, Web y Blogs


Jugando con el ancho del blog, las entradas y la sidebar.

Hoy vamos a explicar como modificar el ancho total del blog así como la parte tanto destinada a las entradas como a la sidebar.

Esto que para los bloggers experimentados es una verdadera chorrada para los recién llegados como el que les habla fue en su día una tragedia griega...

¿Has visto cuanto espacio queda a ambos lados del blog?.¿No te gustaría poder aprovecharlo?.Pues muy sencillo.

En plantilla/edición html marca expandir plantilla de artilugios.Recuerda que es obligatorio antes de hacer nada guardar una copia de toda la plantilla(descargar plantilla completa).

Ayudándote del buscador de tu navegador busca #outer-wrapper {, ("cuerpo del blog") o bien #content {.

Aquí cambia el valor que viene en pixeles (px) aumentando la cantidad donde pone width,(ancho).El mio por ejemplo es de 960px.

Hay algunas plantillas que traen ademas del #outer-wrapper un segundo código #content-wrapper {.

Has de poner el mismo valor,960px por seguir con el ejemplo, en ambos.

Utiliza vista previa para ver el resultado antes de guardar cambios.Notarás como se ha ensanchado todo el blog en su conjunto.

Ahora vamos a ensanchar el cuerpo de los post,("main"), o lo que es lo mismo,el sitio destinado a las entradas.

Para ello has de modificar el valor del ancho,(width) ,buscando el código #main-wrapper { .De nuevo usaremos la vista previa tantas veces como sea necesario.

Por ultimo modificando la cantidad del width en #sidebar-wrapper { lograremos ensanchar la sidebar.

Es muy importante que la suma de los anchos main+sidebar nunca sea superior al total del ancho delcontent/outer-wrapper.Puede ser inferior o igual pero nunca superior.

Como curiosidad podéis cambiar la posición de vuestra sidebar (a la derecha o a la izquierda) cambiando en el apartado "float" el right por left o viceversa dentro de #sidebar-wrapper {.

También podemos jugar con el tamaño de las fuentes tanto de los post como de la sidebar modificando el porcentaje donde dice font-size pero creo que será mejor no marear más la perdiz...

Todo esto os resultara muy útil a la hora de cuadrar cabeceras y evitar desplazamientos inesperados de la sidebar .

A menudo habrás comprobado que en ocasiones la sidebar se te desplaza debajo de los post.Hay mil razones pero las más corrientes son dos.

Seguramente has añadido un nuevo elemento html que la ha "descuadrado".Comprueba cual es ymodifícalo o en su defecto tendrás que ir pensando en eliminarlo.A veces es tan sencillo como eliminar el codigo <center>; que suelen traer y que deja materialmente sin espacio al elemento en cuestión al intentar centrarlo en la sidebar.Asegurate que se adapta en tamaño al ancho de tu sidebar.

La segunda y muy común es debido a que hemos metido en un post una imagen o elemento similar que sobrepasa el tamaño del cuerpo del post.(el width del main-wrapper que decíamos antes).Al no tener espacio físico automáticamente desplazara a nuestra intrépida sidebar justo debajo del final de la última entrada del blog.


Descarga adobe photoshop cs6 PORTABLE


Bueno para aquellos que no quieren que su equipo quede muy cargado en cuanto al peso de un software en este caso photoshop cs6....Hoy les traigo el programa Photoshop cs6 PORTABLE.. PORTABLE pero que es y cual es la diferencia, la diferencia radica en su peso al descargarlo es más rápido y su instalación será más breve la palabra clave en sí es liviano:


Pueden descargarlo aquí:  

MEDIAFIRE 

 CLICK AQUI(No disponible)



5 consejos para un buen rendimiento estudiando en la Universidad o Colegio



Bueno, les traigo cinco consejos con los que me he topado...en realidad son tres los otros dos los añadí....de otros lares, en todo caso te servirán mucho a mi me funcionan es lo que yo aplico y personalmente mis notas han subido y todo ello... comencemos:


Si estás en el colegio y te quedó alguna materia colgada, o si dejaste algún final de la facu para darlo en julio, vas a tener que estudiar bastante para llegar bien preparado y ahuyentar el fantasma de los aplazos. 

La buena noticia: eso no significa que tengas que sacrificar tus momentos de diversión y descanso, ni quemarte las cejas leyendo libros y apuntes durante tres meses. ¿Te dejaste estar durante el año o se te complicó meter todas las materias de una? Ya es tarde para arrepentirse. En todo caso, buscarás la manera de ponerte un poco más las pilas después. Ahora es momento de preparar los finales pendientes y, para eso, la ansiedad y la desesperación suelen ser malos compañeros. 

Que la preocupación y la angustia no te arruinen el verano. Mejor, sigue estos consejos y seguro vas a lucirte en los exámenes sin dejar de disfrutar de las vacaciones. 



1. Planifica tu estudio. 
 

La improvisación rara vez da resultado en estos casos. Así que empieza por evaluar la situación de la que partes (cuáles son los contenidos del programa y su grado de dificultad, la exigencia del docente, el tiempo del que dispones) y ármate un cronograma semana por semana con los temas a repasar y posibles ejercicios o tareas. 






2. No memorices, comprende. 



De poco sirve leer tratando de memorizar datos si uno no capta el sentido de los conceptos e ideas. Al momento de abordar cada contenido, lo mejor es seguir los siguientes pasos: comprender el tema, procesarlo (relacionarlo con otros, ponerlo en contexto, imaginar ejemplos, etcétera), retenerlo (a través de los repasos) y reproducirlo (o sea, ensayar tus respuestas a posibles preguntas del profesor). Establece un orden y si no entiendes algo, consulta con algún compañero o docente antes de continuar. 






3. Identifica lo más importante. 


Libros, fotocopias, notas tomadas en clase: el material para preparar un final puede parecerte muy largo. Pero la clave pasa por hacer, primero, una lectura rápida de los textos de cada tema, con el objetivo de entender la idea general. Y después, jerarquizar los conceptos por su importancia, separando lo principal de lo secundario y poniendo el foco en las nociones centrales. 










4. Arma un resumen. 


Esta tarea es “el corazón” de la preparación de un examen. Si la haces bien, tienes ya gran parte del camino recorrido. Volcar lo que comprendiste en un resumen o un esquema no sólo te va a ayudar a reducir toda esa maraña de textos en una hoja (o unas pocas) que condense lo principal, también te va a permitir desarrollar una mirada global, una visión de conjunto que conecte los distintos temas. Usa los recursos que a vos más te sirvan (flechas, dibujos, abreviaturas, mayúsculas, subrayados) y no pierdas de vista dos criterios básicos de un buen resumen: claridad y capacidad de síntesis.
 




5. Sé ordenado y disciplinado. 



No quiere decir que tengas que pasarte madrugadas enteras a puro mate o café para no dormirte mientras estudias. Al contrario: un buen descanso es fundamental para estar concentrado y atento. La disciplina, la constancia y el orden implican, por ejemplo, cumplir con el calendario que trazaste al comienzo y mantener espacios y momentos de estudio (no tirado en la reposera frente al mar ni apretujado entre los pasajeros del subte en hora pico) en los que te sientas cómodo y sin distracciones. 


Agregar banner en Blogger

Un banner es una pequeña imagen...bueno su tamaño y dimensiones varían, por ejemplo yo tengo en mi blog dos banners.. ¿Para que se usan? ... Se usan para hacer backlink, es decir, intercambio de enlaces con otras páginas webs o blogs en mi caso tengo dos de dos blogs:

Como ven lo encerrado en azul son banners.. para agregarlo vamos ha Diseño > añadir un gadget >  HTML/ javascript  y pegamos el siguiente código:

<a href="URL DEL BLOG O WEB"><img src="URL DE LA IMAGEN" border="0" width="155" height="140" /></a>  

Donde dice URL DEL BLOG ponen....lógico el link al cual redirecciona al dar clic en la imagen.
Donde dice URL DE LA IMAGEN  Pondrán el link el cual será la imagen a mostras.

lo que está en color naranja son las dimensiones o medidas de la imagen las que aparecen hay son las que yo aplico en mis banners.


HASTA LA PRÓXIMA !!




Reiniciar Google chrome o arrancar de nuevo


Si por alguna razón algo falla con tu navegador Google chrome, pues no doy algún error específico por que hay muchos y sabes que lo más necesario es reinstalarlo y en vez de ir a des-instalarlo, puedes hacer lo siguiente:


En windows 7: Escriben en ejecutar lo siguiente %LOCALAPPDATA%\Google\Chrome\User Data\ y dan aceptar o continuar les abrirá una ventana en donde deberán buscar una carpeta llamada Default.


Dan clic derecho y cambiar nombre y llamarán la carpeta Backup Default y dan enter y listo al momento les crea otra carpeta automáticamente llamada Default también ahora vayan a su navegador y está de nuevo todo como si lo hubiesen instalado de nuevo. 



COMENTAR ES AGRADECER


Formulario de contacto Widget en blogger


Se sabe que en blogger siempre hay que tener una buena comunicación con nuestros seguidores y otros usuarios que visiten nuestro blog y que mejor forma de hacerlo que colocando un formulario de contacto en nuestro blog.

Este es el formulario que hoy les voy a mostrar:

para insertarlo vamos primero a widegetbox.com

Luego nos saldrá your email address, allí escribiremos el correo al que queremos que nos lleguen los mensajes, mas abajo nos saldrá una serie de items que los explicaré:

→ Title=Titulo del Formulario
→ Sub Title= Subtitulo del formulario
→ Caption for Name box=Nombre
→ Caption for Subject box=Usuario
→ Caption for Message box=Mensaje
→ Caption for Verification Code= Código de verificación
→  Caption for Verification code box title=escribe el código de la imagen
→Send button text=Enviar

*Los items anteriores son para que los reemplazen por su respectivo significado que esta al lado.

El valor Form width indica el ancho del formulario por defecto viene en 180 pero lo puedes modificar y para cambiar el color del formulario vas al valor Background Color y cámbialo del color de tu preferencia.

Para terminar das clic en Get Widget y pegas el código que te dan en Diseño > añadir un gadget > HTML javascrip y por ultimo guardas y listo ya está.


fanbox de facebook flotante y con efecto deslizante


Se trata de un gadget que muestra una pestaña en un extremo del blog, y al pasar el cursor sobre ella aparece el fanbox de Facebook con un efecto deslizante. Puedes verlo en esta misma entrada, se encuentra en el lado derecho de la ventana.

El gadget funciona con jQuery que es el que le da ese efecto deslizante, así que usaremos ese script, un poco de CSS y el FanBox de Facebook.

Lo primero es entrar en Diseño | Edición de HTML y antes de </head> pega el script:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".slide_likebox").hover(function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>
Ahora antes de ]]></b:skin> agrega los estilos:
.slide_likebox {
float:right;
width:288px;
height:345px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxU3szkpFhlfWNcNrQL-O9Eir1CIcPcdaCjMWIAl25H3O3Fihk5ox323t1R-hw_qZqRPeBNVtNNvqAgbVO8x-7nseXXnfn3ptRO3IWTMQf9HcdFw3YRnlYWqiP26oppnK6UsZ350wUrTg/) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}
Por último entra en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript y ahí pega esto:
<div class="slide_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnombre-de-tu-pagina-de-facebook&amp;width=240&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=false&amp;height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; height:320px;" allowtransparency="true"></iframe></div></span></div></div>
Ese código contiene el Fanbox, así que cambia donde se indica el nombre de tu página, y listo.
No requiere muchos pasos ni mayor trabajo, a menos que quieras hacerle modificaciones.

La pestaña, así como el fondo del gadget es una imagen, así que si deseas cambiarle el color o tamaño tendrás que editar la imagen que se encuentra en el área de los estilos.
Lo ideal sería no modificar el tamaño, pero en caso de que desees hacerlo deberás -como dije- editar la imagen, cambiar las medidas tanto en los estilos como en el Fanbox, pues ese mismo procedimiento hemos usado aquí también, así que ahí podrás ver qué se necesita restar en las medidas del Fanbox.

Pero claro, eso es sólo si quieres modificar su tamaño, sino entonces no necesitarás nada más que los tres primeros pasos y podrás tener este Fanbox de Facebook, flotante y con efecto deslizante en tu blog.






Juegos Android de la semana: Black Ops Zombies, 2 player reactor, Wiil BLond y Minecraft PE


Muy buenas a todos los que estáis leyendo estas líneas, y bienvenidos a Juegos Android de la Semana
Para hoy tenemos dos juegos: Call of Duty Black Ops Zombies y 2 Player Reactor, junto con un futuro juego de Gameloft y una actualización de Minecraft: Pocket Edition. Sin más demora te dejo con todo lo anterior…
El primer juego de hoy es Call of Duty Black Ops Zombies
Este juego, que es descendiente directo del m0do Zombies del CoD Black Ops, nos trae todos los mapas que disfrutamos en las plataformas de sobremesa a nuestro dispositivo Android. Disponemos de todos los mapas que están disponibles para el resto de plataformas, incluyendo los adicionales, en el mismo paquete. Los gráficos están bastante bien, y es compatible con controles que no sean en la propia pantalla. Solo le veo dos pegas: su precio y la exclusividad para teléfonos Xperia durante 30 días.
Puedes comprar Call of Duty Black Ops Zombies por 5.49€ en Google Play
Continuamos con 2 Player Reactor… 
Ya os hemos traído este juego en muchas ocasiones, pero os lo volvemos a mostrar porque cada vez hay más gente que pide juegos con lo que disfrutar entre amigos, y este dará lugar a muchos piques: cada jugador tiene una mitad de la pantalla, y se irán haciendo diferentes preguntas y retos a medida que avance la partida. Es una buena opción cuando un amig@ y tu estáis aburridos y sin nada que hacer: los piques están más que garantizados…
Descarga 2 Player Reactor gratis desde Google Play
Lo siguiente es una noticia directa de Gameloft, y es que su próximo lanzamiento será de un juego que estará hecho con el motor gráfico Unreal Engine, que nos trae gráficos como los que estáis viendo en el vídeo de arriba. Cada vez los juegos de los sistemas móviles tienen muy poco o nada que envidiar a los juegos de sobremesa, y esta es una de las demostraciones de hasta donde pueden llegar los dispositivos que caben en nuestra palma de la mano…
Más información | Gameloft en Facebook
Y por último llegamos al juego Indie por excelencia de los últimos tiempos: Minecraft. Y es que el Minecraft Pocket Edition ha recibido recientemente una actualización que a muchos os interesará: nuevas armas como el arco con flechas, nuevos mobs como los esqueletos (arqueros) o arañas (los únicos mobs que pueden escalar), y nuevas características, como colocar antorchas en las vallas.


Cambiar fondo de pantalla Windows 7 Starter


Si, Si la imagen de arriba te jode aunque no nos haga nada jejeje es el fondo por default que nos ofrece el sistema operativo Windows 7 Starter que personalmente me parece malo como tal, pues ni siquiera permite cambiar el fondo de pantalla además de otras funciones, pero, gracias a una larga búsqueda he encontrado un programa totalmente gratis, que pueden descargar para cambiar el fondo de pantalla de su W Starter, lo único ha realizar es instalarlo tal y como se instala cualquier otro programa.

No tengo más imágenes que subir así bueno cuando ya lo instalen sólo van al escritorio y dan clic derecho luego sobre personalizar y ya creo que les saldrá en francés o español depende de tu suerte jejejeje aquí el link del programa.   http://www.mediafire.com/download.php?3c54xklrwlb70nm

BUENO ESTO ES TODO UN POST RAPIDITO PERO MUY BUENO PARA MUCHOS. NO OLVIDEN COMPARTIR Y DIFUNDIR EL POST.


Poner una tabla HTML en blogger

Hola bueno hoy aprenderán como insertar y realizar tablas en HTML en cuanto a tablas no son cosas raras ni nada de eso son tablas como por ejemplo para una estadística o explicar algún texto aclaro esto para que no hallan confusiones.

Para las tablas siempre se arranca con la etiqueta   <table>  y se cierra con la etiqueta </table>....

Las tablas se definen fila a fila, celda a celda, comenzando desde la celda superior izquierda. Las columnas se calcularán automáticamente según las celdas que hay en cada fila.

Cada fila de la tabla se indica mediante las tags <tr>.....</tr>. Las tags <th> y <td> con sus correspondientes tags de cierre, indican para indicar las filas individuales dentro de cada fila. Las tags <th>.....</th> indican que se trata de celdas que sirven como encabezado de tabla y suelen visualizarse en negrita. Las tags <td>.....</td>indican que se trata de celdas comunes.

Cabereca 1 Cabereca 2 Cabereca 3
Dato 1 Dato 2 Dato 3
Dato 4 Dato 5 Dato 6

La tabla que ven arriba se dio con la siguiente composición HTML:

<TABLE BORDER="1"> 
<TR> 
   <TH>Cabereca 1</TH> 
   <TH>Cabereca 2</TH> 
   <TH>Cabereca 3</TH> 
</TR> 
<TR> 
   <TD>Dato 1</TD> 
   <TD>Dato 2</TD> 
   <TD>Dato 3</TD> 
</TR> 
<TR> 
   <TD>Dato 4</TD> 
   <TD>Dato 5</TD> 
   <TD>Dato 6</TD> 
</TR> 
</TABLE>  

Así pues ustedes si ven la necesidad de crear tablas para explicar algo pueden hacerlo copiando la sintaxis de arriba y bueno le hacen algunos ajustes.


Convertir imagen en PNG en Photoshop CS6 2020

Hola todos hoy les enseñaré como poner una imagen o logo que estemos diseñando en formato PNG con Photoshop, pues lógico lo que estemos diseñando debe estar realizándose con Photoshop, un ejemplo visual de como es y se realiza PNG imágenes en photoshop:


Si ven arriba solo proyectamos y usamos el objeto que queremos en este caso son esos cuatro dados y sólo queremos algo así la imagen sin fondo cuando no se le aplica fondo es denominada PNG la mayoría de veces, bueno como se hace simple busquemos una imagen:

Yo usaré esta, si quieren descargarla para estar mas seguros o yo que se:

Abrimos Photoshop subimos la imagen y seleccionamos la herramienta de selección rápida, luego, traza la región que quieres guardar o recortar, así como lo hice yo:



Después presionas las teclas ctrl + N allí se te abre una ventana para hacer un nuevo proyecto tu configuras los pixeles nada más el resto lo dejas como aparecerá en la siguiente imagen:




Al dar en ok les abrirá otra ventana con un fondo de cuadritos pequeños blancos y grises, bueno volvemos en la parte de arriba a la imagen del botón que teníamos seleccionado y simplemente presionamos ctrl + C que es COPIAR la imagen recortada, luego, van al otro proyecto que hicieron la de los cuadritos y presionan las teclas Ctrl + V que es pegar y les saldrá de inmediato el botón sin fondo así:



Como ven está igual a la imagen de los dados, sólo queda terminar por ejemplo si quieres colocarle texto hazlo en ese mismo proyecto, ya para finalizar y guardar la imagen vamos a Archivo > Guardar Como > Formato PNG * y aceptan:



Aceptan y saldrá otra ventana más donde aceptan también no muevan nada y ya buscan la imagen y listo ya la tienen en Formato PNG:






Mapa conceptual sobre la Comunicación

Bueno aquí un buen mapa conceptual con el que me topé, y modifiqué trata de la comunicación sin más que decir les dejo la imagen:




Mensaje tipo post-it para informar a los lectores de tu blog

Si quieres que aparezca un mensaje estilo post-it en tu blog para informar a tus lectores de algo importante, deberemos hacer lo siguiente:


1) Vamos a Diseño
2) Elementos de página
3) Añadir un gadget
4) HTML/Javascript
5) Pegamos el siguiente código:



<style>
<!--
#postit{width:300px; height:200px; padding:5px; position:absolute; background-color:yellow; border:1px solid black; visibility:hidden; z-index:50; cursor:hand; color: #000;}
a:link {color: #000000; text-decoration:none;}
a:visited {color: #000000;}
a:hover {color: #000000;}
a:active {color: #000000;}
-->
</style>

<div id="postit" style="left:200px;top:50px">
<div align="right"><b><a href="javascript:closeit()"><font face="Arial" size="1">[CERRAR]</font> <img valign="middle" src="http://dl.getdropbox.com/u/647003/CiudadBlogger/Iconos/CloseIcon-small.png"/></a></b></div>

<!--AQUI VA EL MENSAJE-->
<br/>
Aquí va el mensaje que se mostrará

<!--FIN DEL MENSAJE-->


<script>

//Post-it only once per browser session? (0=no, 1=yes)
//Specifying 0 will cause postit to display every time page is loaded
var once_per_browser=0

///No need to edit beyond here///

var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ns4)
crossobj=document.layers.postit
else if (ie4||ns6)
crossobj=ns6? document.getElementById("postit") : document.all.postit


function closeit(){
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
crossobj.visibility="hide"
}

function get_cookie4(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie4.length > 0) {
offset = document.cookie4.indexOf(search)
if (offset != -1) { // if cookie4 exists
offset += search.length
// set index of beginning of value
end = document.cookie4.indexOf(";", offset);
// set index of end of cookie4 value
if (end == -1)
end = document.cookie4.length;
returnvalue=unescape(document.cookie4.substring(offset, end))
}
}
return returnvalue;
}

function showornot(){
if (get_cookie4('postdisplay')==''){
showit()
document.cookie4="postdisplay=yes"
}
}

function showit(){
if (ie4||ns6)
crossobj.style.visibility="visible"
else if (ns4)
crossobj.visibility="show"
}

if (once_per_browser)
showornot()
else
showit()


</script>

<script language="JavaScript1.2">

//drag drop function for ie4+ and NS6////
/////////////////////////////////

function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx
crossobj.style.top=tempy+e.clientY-offsety
return false
}
}

function initializedrag(e){
if (ie4&&event.srcElement.id=="postit"||ns6&&e.target.id=="postit"){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")

</script></div><div class="clear"/></div>





Si deseas cambiar el tamaño debes modificar width (largo) y height (ancho). También puedes cambiar ese color amarillo chillón por el que tu quieras en background-color. Sólo nos queda poner el mensaje que queramos.
En donde pone var once_per_browser=0  podemos cambiar el 0 por un 1. De esta forma sólo nos aparecerá una vez el mensaje.

ESTAMOS EN: