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

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKTrWdQ5L8IWrnJiMvrbdD9yI7TVAnqIos_W7TkgJUSOcxoDxbIvvNxygjiT5ETRUdCJgfATRlmxf3w9OQGX5XkpTwF4yoWsUeTJB1EJJcwcDYAn-e_5_XDgJmmyCff8Pa-sJyq6o0aN70/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...

Indice del blog por Autores

3 comentarios
Hace una semana publique el indice o sitemap de nuestro blog con el que ordenábamos el contenido con orden alfabético de las etiquetas y donde se agregaba una etiqueta Nuevo a las entradas más nuevas.

Hoy les entrego un nuevo indice, en este caso se ordenan los contenidos según el autor, se puede usar como gadget, en una página nueva o en la entrada que queramos.

La idea me la dio uno de los blog a los que sigo para buscar contenido nuevo pero no me gusto la forma en la que se presenta la información porque carece de clases y de etiquetas y por lo tanto se complica el agregar estilo a la forma en la que se muestran las entradas de cada autor.

Por lo anterior me decidí a modificar el código de mi indice y lograr los mismos resultados pero con las opción de agregar css.

El indice tiene dos estados para cada autor, uno es abierto donde se muestran las contribuciones y el otro es cerrado para aprovechar el espacio vertical y ocultar lo que no queremos ver.

Estado cerrado

Estado abierto
Por defecto el contenido de los autores estará cerrado por lo que el código es excelente como gadget de cualquier blog con múltiples autores.

Para usarlo agregamos un gadget de contenido HTML/JavaScript o creamos una página o una nueva página y activamos "Edición HTML" y pegamos el siguiente código si lo queremos usar sin los css pre configurados.
<style type='text/css'>
.Visible {display: block;}
.Oculto {display:none;}
</style>
<script type="text/javascript" src="http://sites.google.com/site/rincondelrecursoweb/home/author1.0.js" ></script>
<script src="http://rinconubuntero.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
Por lo que se vera como así.


Para usar el css configurado pegamos el siguiente código
<link rel="stylesheet" href="indice.css" type="text/css" media="screen" />
<style type='text/css'>
.Visible {display: block;}
.Oculto {display:none;}
</style>
<script type="text/javascript" src="http://sites.google.com/site/rincondelrecursoweb/home/author1.0.js" ></script>
<script src="http://rinconubuntero.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
Y el resultado será el siguiente
En cualquiera de los casos cambiamos el texto en rojo (http://rinconubuntero.blogspot.com) por la dirección de nuestro blog, se guardan o se publica la entrada y el trabajo esta hecho.
Leer más...

Nuevas herramientas para desarrollo Web

0 comentarios
En estás ultimas horas agregue al blog dos herramientas muy importantes para el diseño web adecuado, el generador de metatags enfocado a la mejoramiento del nuestro posicionamiento y el generador Limsum para hacer las pruebas de nuestras web como probar como se ve el contenido, alineación o reconocimiento de caracteres especiales. Prueben cada uno y hagan sus valoraciones, estaré atento a las correcciones y mejoras que sean propuestas.
Leer más...

Indice o Mapa del Sitio automático

1 comentarios

Muchos blogs están implementando los mapas del sitio o los indices para mostrar todas las publicaciones, esto tiene ventajas porque muestra de forma amable los títulos de las entradas manteniendo toda la información ordenada y explicita.

Ahora les voy a dar los pasos para que puedan usar el mismo indice que yo utilizó y darle unas pautas para lograr la personalización para que lo puedan adaptar a sus necesidades.

  1. Se dirigen a Creación de entradas, seleccionan Editar páginas y crean una nueva página.
  2. Hacen clic en Edición de HTML y agregan lo siguiente
  3. <link href="http://sites.google.com/site/rincondelrecursoweb/home/indice.css" media="screen" rel="stylesheet" type="text/css"></link> <script src="http://sites.google.com/site/rincondelrecursoweb/home/indice.js"> </script> 
    <script src="http://ELNOMBREDESUBLOG.blogspot.com/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"> </script> 
  4. Deben cambiar el texto ELNOMBREDESUBLOG por la dirección de su blog
  5. Publican la nueva pagina y el indice se cargara automaticamente llenándose con las etiquetas y títulos de todas las entradas.

Para hacer cualquier cambio o ajuste de presentación para sus propios blog agregan esto después de
<link href="http://sites.google.com/site/rincondelrecursoweb/home/indice.css" media="screen" rel="stylesheet" type="text/css"></link>
<style type="text/css">
.gfg-root { /*Box containing index*/
/*Para cambiar la forma en la que se ve la caja*/
}
.gfg-title { /*Title of the box*/
}
.gfg-title a {
}
.gfg-subtitle { /*The Labels of blog*/
/*Esta es la forma en las que se ven las etiquetas*/
}
.gfg-subtitle a {
/*Color de la etiqueta*/
}
.gfg-entry { /*Inner box*/
/*Diseño de la caja en la que van los titulos*/
}
.gfg-list a{
/*Color y estilo del título de las entradas*/
}
.gfg-listentry {
/*Alineación de los títulos*/
}
.gfg-listentry-odd {
/*Color de fondo del primer titulo*/
}
.gfg-listentry-even {
/*Color de fondo del título siguiente*/
}
</style>
Es necesario saber un poquito sobre css pero en la web existen lugares que nos pueden dar solución a nuestras preguntas sobre ese tema.
Leer más...

Traductor para blogger usando JQuery que no cambia el estilo de nuestro blog

1 comentarios
Todos queremos que nuestro blog sea más internacional y que si tenemos la oportunidad de obtener visitantes de otras lenguas poderlos convencer de quedarse un rato más y volver.
A continuación voy a mostrarles como agregar una bonita caja de banderas para que pueden traducir el blog sin cambiar el estilo de este.

  1. En nuestra sidebar agregamos un nuevo gadget de tipo codigo HTML/Javascript
  2. Le damos un titulo como "En su Idioma" u otro que indique que es un bloque traductor.
  3. Agregamos el siguiente contenido.
  4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://jquery-translate.googlecode.com/files/jquery.translate-1.4.7-debug-all.js"></script>
    <script type='text/javascript'>
    //<![CDATA[
    function doTranslate(lang_pair) {
    
    if(lang_pair.value)lang_pair=lang_pair.value;var
    lang=lang_pair.split('|')[1];if(lang=='pt')lang='pt-PT';
    jQuery.cookie('glang', lang);
    jQuery(function($){$('body').translate('es', lang, {toggle:true});})
    }
    //]]>
    </script>
    <script type='text/javascript'>
    //<![CDATA[
    function DoTo(Idioma) {
    
    if(Idioma==1) doTranslate('es|es');
    if(Idioma==2) doTranslate('es|en');
    if(Idioma==3) doTranslate('es|pt');
    if(Idioma==4) doTranslate('es|fr');
    if(Idioma==5) doTranslate('es|it');
    if(Idioma==6) doTranslate('es|de');
    
    }
    //]]>
    </script>
    <script type="text/javascript" src="http://jq-ingrid.googlecode.com/svn-history/r6/trunk/js/jquery.cookie.js"></script>
    
    <div class="languages">
    <table border="0">
    <tr>
    <td><a href="javascript:DoTo(1)" title="Español"><img alt="Español" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMZd-KfGhZdyhaCC6hHc9U2PMBgd_Vqi5LmuGzUjMveMaTwhYFlRiFKLs0bItIimeQIE_yh6HFgP867T7MEQzztSlY9fy722WsJXJIoPy9LEQ4b2iUGdgTHUXSezNX9kF2SU7gq1BfUcNd/s1600/es.png" width="30"/></a></td>
    <td><a href="javascript:DoTo(2)" title="English"><img alt="Inglés" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPlyafMz2EUeAtF3V_MFS-o2B1Gbm9klp8CChiNOyAEf2VqsZ9bryjCwAjY2qvtt8IeucT-J0T6gfqpkwGuk2g2II-rT5s3ty6y0IQM8uhZtXQLByAWUGGsDsyg_aV1niaO1_TEKifGysY/s1600/uk.png" width="30"/></a> </td>
    <td><a href="javascript:DoTo(3)" title="Português"><img alt="Portugués" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG5VFkbgBpUBi6Koygk-kkaohF4-lwYtzL3lqCWvJUpUNZRc5O34K8wuZHTQJSnMWGYmW2293tnnSt6VR6QwK6O_xg-TVbMbxbglicxO7A2LtXPHv8pvJL8T8mXQeGW93FsdPBQRDHPTYY/s1600/pt.png" width="30"/></a> </td>
    <td><a href="javascript:DoTo(4)" title="Française"><img alt="Francés" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwFjnSLtNbXFvmKStxxyIgLlGWIoA2oESTmkKEmBcZln_46vyVtNabewFXrY4mgwwnGVBlQOCOrfrwMZupZXjvt7bDbpTnv2VzntX7Ge4F4ub2qzFXdrpUgpPK94zUvnemYXQ3jPrmNYQ8/s1600/fr.png" width="30"/></a> </td>
    <td><a href="javascript:DoTo(5)" title="Italiano"><img alt="Italiano" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn1k5fbZhULImIrLqsXpY_FrK-ZnewOOwMrYsbSIU3gy6c9_P-KretDKLm1WFWckZsGRL4q9l_g3eY39JhFsDq6u-xHruCqCoMtEesqxyfgMDOJXhqqRVQdQTb_UlmPYwcr2e3Bv8WOU_a/s1600/it.png" width="30"/></a> </td>
    <td><a href="javascript:DoTo(6)" title="Deutsch"><img alt="Alemán" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuFcMh0vEXjp5f-ZmAIQyv1tkVakWhT6_J9mLyRb6uHDDCz9FfEB1W-JF_8FZGCquOv9fUb_ZYt0H59bnnoc26lq8iOGFPondZguHbj-4oK9CdYfSRBDXVDvFIlQqbM1KyxqEPYmvsZLQL/s1600/de.png" width="30"/></a> </td>
    </tr>
    </table>
    </div>
    
Esta es mi propia opción y como esta acá no lo van a encontrar en otra parte y como es codigo HTML pueden usarla en cualquier web ubicando el código el en área que desea la herramienta, espero la disfruten y compartan sin olvidad recomendar la fuente.
Español Inglés Portugués Francés Italiano
Alemán
Leer más...