Principal | Indice | Ir Arriba
Te recomiendo Rincón Ubuntero

En contra de SOPA o cualquier variación

0 comentarios
Esta publicación solo tiene el interés de informarlos mediante el FEED. Hoy mantendré cerrado mi blog como apoyo a todos aquellos que están en contra de SOPA, aunque esa no es la única, tenemos a Sinde de España o la Ley Lleras en Colombia.


Todos unidos porque ¡El Pueblo Unido, Jamás será Vencido!
Leer más...

Introducción a CSS3 por #mejorandola

0 comentarios
Mejarandola se caracteriza por darnos tutoriales muy últimos en los temas de vanguardia como JavaScript, HTML5 y otras. En este caso nos dan una introducción al CSS3, un lenguaje para diseñar que desde hace mucho ya aplico a cada blog que hago.

Los tutoriales de Mejorandola son de temas muy buenos, eso es lo interesante pero son demasiado coloquiales y se pierde un poco la estructura de lo que esperamos de un tutorial. Además a Mejorandola le recomendaría estructurar sus charlas y construir un documento que facilite la interpretación de los códigos por parte de los interesados.


Por lo demás felicito a Mejorandola por compartir su conocimiento con todos los latinos.
Leer más...

Comentarios Anidados en Blogger

5 comentarios

Ya era hora de que Blogger nos diera comentarios anidados por defecto, a muchos nos gusta la controversia y cual es a mejor forma que respondiendo a la opinión de otro participante.

Ahora como muchos les hemos puesto manos a la plantilla no van a activarse por defecto, para activarlos abrimos la plantilla y la editamos en HTML, expandimos los artilugios y buscamos el siguiente código:

<b:include data='post' name='comments'/>

Y la cambiamos por el siguiente, si aparece varias veces las remplazamos a todas:

<b:include data='post' name='threaded_comments'/>

Guardamos la plantilla y va a parecer varias lineas nuevas de código css entre

<b:includable id='threaded_comment_css'>
  <style>
//Lineas css predeterminadas
  </style>
</b:includable>

Ya trate y no se pueden mover, siempre se quedarán en medio de la plantilla así que no pierdan tiempo llevándolas junto al resto de css.

Pueden personalizar el modo de ver los comentarios editado esas lineas o si prefieren les regalo mi configuración, a la que le agregue animaciones css3.

.comments {
  clear: both;
  margin: 10px 0 0 50px; /*Posición de la caja con respecto al margen izquierdo de bloque de contenido*/
  line-height: 1em;
}
.comments .comments-content {
  font-size: 13px;
  margin-bottom: 16px;
}
.comments .comment .comment-actions a {
  padding-top: 5px;
  padding-right: 5px;
}
.comments .comment .comment-actions a:hover {
  text-decoration: underline;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: left;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 36px;
}
.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;
}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
  margin-left:6px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}
.comments .comments-content .comment-header {
 -moz-background-inline-policy: continuous;
 background: none repeat scroll 0 0 #EEEEEE;
 border: 1px solid #CCCCCC;
 font-size: 15px;
 font-weight: normal;
 margin-right: 20px;
 padding: 5px;
}
.comments .comments-content .comment-content {
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
margin-left: 0;
margin-right: 20px;
padding: 7px;
margin-top: -8px;
}
.comments .comment .comment-actions {
border-bottom: 1px solid #CCC;
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
font-size: 11px;
line-height: 1.4em;
margin: -0.8em 20px 2em 0;
padding: 5px;
text-transform: none;
display: block;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .continue {
  cursor: pointer;
}
.comments .continue a {
  display: block;
  padding: 0.5em;
  font-weight: bold;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
  float: left;
  overflow: hidden;
  background: url(http://4.bp.blogspot.com/-aTQ-4k2ZpWs/TxHIJzWhDNI/AAAAAAAABRc/3zPyDFcsW1E/s1600/avatar.png);
height: 60px;
box-shadow: 1px 1px 1px 0 #ccc;
margin-left: -25px;
width: 60px;
    border: 5px solid #eee;
    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
border: 5px solid white;
overflow: hidden;
border-image: initial;
z-index:2;
}
.comments .avatar-image-container img {
  width: 60px;
}
.comments .avatar-image-container:hover {
color: #000;
box-shadow: rgba(155, 155, 155, .9) 0 0 16px;
position: relative;
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
opacity: .9;
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}

Sin nada más que decir me despido y a disfrutar los nuevos comentarios anidados, no olviden personalizar las plantillas a su gusto.
Leer más...

Activa desde ya la nueva interfaz de Youtube

0 comentarios
Youtube esta trabajando en una nueva interfaz para la página, una que resulte más atractiva y más acoplada a lo que hemos visto en Google+ y gracias a los amigos de theverge.com la podemos disfrutar unos días antes de la versión definitiva, espero que no se demore porque me gusto mucho. El manual de ellos ha sido repetido por varias webs de habla hispana y yo también lo quiero dejar en mi Blog.


Asi se ve ahora, más interactiva, veo mis suscripciones y suscripciones recomendadas sin salir del Home y si quiero subir un vídeo lo puedo hacer clic allí mismo.

El manual para activar la nueva interfaz es agregar una pequeña cookie, cosa que solo se puede hacer en los dos mejores navegadores disponibles (Mozilla Firefox y Google Chrome) o sus derivados.

En Mozilla Firefox hacemos lo siguiente:

Usuarios de Mozilla Firefox

Ubuntu o Windows: Ctrl+Shift+K
Mac: Cmd+Shift+K

Usuarios de Google Chrome

Ubuntu o Windows: Ctrl+Shift+J
Mac: Cmd+Shift+J

Y pegamos en el área que aparece (una línea que empieza por >)

document.cookie="VISITOR_INFO1_LIVE=ST1Ti53r4fU";

Esta línea agrega una cookie para ver la página como lo ve uno de los empleados a cargo del diseño. No sé cuanto dure el truco pero estaré pendiente.

Luego recargamos la página y estaremos usando la nueva interfaz, yo recargo con F5.

Fuente: The Verge
Leer más...