Facebook de Delasazores Twitter de Delasazores
Mostrar menú superior
Mostrar menú inferior
← Anterior Post Post Aleatorio Siguiente Post →
Cuarto post de ayuda. Podéis ver los anteriores aquí.
Ya hemos visto como crear un rectángulo que salga debajo de los post. En este tutorial veremos como cambiar los 2 últimos rectángulos para que muestren mejor la información.
(Nota: Antes de nada, revisad los errores comunes. Es importante.)
Ahora mismo el código que tenemos es así (lo explico brevemente, bloque a bloque y podéis copiar y pegar si queréis, ya que los comentarios están entre <!— y —>, que es la forma de HTML de indicar que son comentarios, valga la redundancia):
{block:Date} <a href="{Permalink}"> <div class="footer for_permalink">
<!-- Con <div class="footer for_permalink"> abre la etiqueta del primer rectángulo -->

<div class="date"> 
{block:Reblog} {lang:Reblogged TimeAgo from ReblogParentName} {block:RebloggedFromReblog}(<span style="text-transform:lowercase;">{lang:Originally from ReblogRootName}</span>){/block:RebloggedFromReblog} {/block:Reblog}

<!-- Si es un post reblogueado, con {lang:Reblogged TimeAgo from ReblogParentName} y {lang:Originally from ReblogRootName} muestra algo tal que así: "Reblogged 5 years ago from delasazores (originally from delasazores)" a la izquierda del rectángulo -->
{block:NotReblog} {lang:Posted TimeAgo from source} {/block:NotReblog} </div>
<!-- Si no es un post reblogueado, con {lang:Posted TimeAgo from source} muestra algo tal que así: "Publicado hace 5 años" a la izquierda del rectángulo -->
<div class="notes">{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount} {block:IfDisqusShortname}{block:NoteCount}•{/block:NoteCount} <a href="{Permalink}#disqus_thread">{lang:View comments}</a>{/block:IfDisqusShortname}</div>
<!-- Con {NoteCountWithLabel} y {lang:View comments}muestra el número de notas y comentarios (si está activado el Disqus) -->
<div class="clear"></div> </div> </a> {/block:Date}

<!-- Cierra el primer rectángulo -->
<div class="footer {block:ContentSource}with_source_url{/block:ContentSource}" style="display:block;">
<!-- Abre el segundo rectángulo -->
{block:IfShowTags} {block:HasTags}<div class="tags">{lang:Tagged}: {block:Tags}<a href="{TagURL}">{Tag}</a><span class="tag-commas">, </span>{/block:Tags}.</div>{/block:HasTags} {/block:IfShowTags}

<!-- Con {lang:Tagged}: <a href="{TagURL}">{Tag}</a> muestra las tags del post tal que así: "Etiquetado: Mareen Fischinger, New York City, Times Square." a la izquierda del rectángulo. -->
{block:ContentSource} <a href="{SourceURL}" class="source_url"> {lang:Source}: {block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo} {block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo} </a> {/block:ContentSource}

<!-- Con {lang:Source}: {SourceTitle} muestra la fuente del post tal que así: "Fuente: delasazores" a la derecha del rectángulo. -->
<div class="clear"></div> </div>
<!-- Cierra el segundo rectángulo -->

Esto se vería así:

Ahora vamos a cambiar este código por el siguiente (recuerdo que podéis copiar y pegar, ya que los comentarios están entre <!— y —> que es la forma de HTML de indicar que son comentarios), que también explicaré:
{block:Date} <div class="footer for_permalink"> <div class="date"> {block:Reblog} <a href="{Permalink}">{DayOfMonthWithZero}/{MonthNumberWithZero}/{Year} - {24HourWithZero}:{Minutes}</a>
<!-- Abre el primer rectángulo. Si el post es reblogueado, con <a href="{Permalink}">{DayOfMonthWithZero}/{MonthNumberWithZero}/{Year} - {24HourWithZero}:{Minutes}</a> indicas exactamente cuando fue reblogueado, tal que así: "29/12/2011 - 18:29". Además, es un vínculo al post. Se sitúa a la izquierda del rectángulo. -->
{/block:Reblog} {block:NotReblog} <a href="{Permalink}">{DayOfMonthWithZero}/{MonthNumberWithZero}/{Year} - {24HourWithZero}:{Minutes}</a>
<!-- Si el post es creado, indicas exactamente cuando fue, tal que así: "29/12/2011 - 18:29". Además, es un vínculo al post. Se sitúa a la izquierda del rectángulo. -->
{/block:NotReblog} 
</div> <div class="notes">{block:NoteCount}<a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount} {block:IfDisqusShortname}{block:NoteCount}•{/block:NoteCount} <a href="{Permalink}#disqus_thread">{lang:View comments}</a>{/block:IfDisqusShortname}</div>
<!-- Esto no varía. Con {NoteCountWithLabel} y {lang:View comments} muestra el número de notas y comentarios (si está activado el Disqus). Además, es un vínculo al post. Se sitúa a la derecha del rectángulo.-->

<div class="clear"></div> </div> {/block:Date}

<!-- Cierra el primer rectángulo --> <div class="footer {block:ContentSource}with_source_url{/block:ContentSource}" style=" display:none; {block:IfShowTags}{block:HasTags}display:block;{/block:HasTags}{/block:IfShowTags} {block:ContentSource}display:block;{/block:ContentSource} ">
<!-- Abre el segundo rectángulo -->
{block:IfShowTags} 
{block:HasTags}<div class="tags">{lang:Tagged}: {block:Tags}<a href="{TagURL}">{Tag}</a><span class="tag-commas">, </span>{/block:Tags}.</div>{/block:HasTags} {/block:IfShowTags}

<!-- Esto no varía nada. Con {lang:Tagged}: <a href="{TagURL}">{Tag}</a> muestra las tags del post tal que así: "Etiquetado: Mareen Fischinger, New York City, Times Square." a la izquierda del rectángulo. --> {block:ContentSource} <div style="float: right;">{block:Reblog}Vía: <a href="{ReblogParentURL}">{ReblogParentName}</a> • {/block:Reblog}{lang:Source}: <a href="{SourceURL}">{SourceTitle}</a></div> {/block:ContentSource}
<!-- Con Vía: <a href="{ReblogParentURL}">{ReblogParentName}</a> y {lang:Source}: <a href="{SourceURL}">{SourceTitle}</a> indicas a quien reblogueas el post (vía) y quien es la fuente (el creador del post). Se sitúan a la derecha del rectángulo. --><div class="clear"></div> </div>
<!-- Cierra el segundo rectángulo -->

El resultado sería:

Puedes ver las ayudas que vaya creando en http://delasazores.com/tagged/ayuda

Cuarto post de ayuda. Podéis ver los anteriores aquí.

Ya hemos visto como crear un rectángulo que salga debajo de los post. En este tutorial veremos como cambiar los 2 últimos rectángulos para que muestren mejor la información.

(Nota: Antes de nada, revisad los errores comunes. Es importante.)

Ahora mismo el código que tenemos es así (lo explico brevemente, bloque a bloque y podéis copiar y pegar si queréis, ya que los comentarios están entre <!— y —>, que es la forma de HTML de indicar que son comentarios, valga la redundancia):

{block:Date}
<a href="{Permalink}">
<div class="footer for_permalink">
<!-- Con <div class="footer for_permalink"> abre la etiqueta del primer rectángulo -->
<div class="date">
{block:Reblog}
{lang:Reblogged TimeAgo from ReblogParentName} {block:RebloggedFromReblog}(<span style="text-transform:lowercase;">{lang:Originally from ReblogRootName}</span>){/block:RebloggedFromReblog}
{/block:Reblog}
<!-- Si es un post reblogueado, con {lang:Reblogged TimeAgo from ReblogParentName} y {lang:Originally from ReblogRootName} muestra algo tal que así: "Reblogged 5 years ago from delasazores (originally from delasazores)" a la izquierda del rectángulo -->
{block:NotReblog}
{lang:Posted TimeAgo from source}
{/block:NotReblog}
</div>
<!-- Si no es un post reblogueado, con {lang:Posted TimeAgo from source} muestra algo tal que así: "Publicado hace 5 años" a la izquierda del rectángulo -->
<div class="notes">{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount} {block:IfDisqusShortname}{block:NoteCount}&bull;{/block:NoteCount} <a href="{Permalink}#disqus_thread">{lang:View comments}</a>{/block:IfDisqusShortname}</div>
<!-- Con {NoteCountWithLabel} y {lang:View comments}muestra el número de notas y comentarios (si está activado el Disqus) -->
<div class="clear"></div>
</div>
</a>
{/block:Date}
<!-- Cierra el primer rectángulo -->
<div class="footer {block:ContentSource}with_source_url{/block:ContentSource}" style="display:block;">
<!-- Abre el segundo rectángulo -->
{block:IfShowTags}
{block:HasTags}<div class="tags">{lang:Tagged}: {block:Tags}<a href="{TagURL}">{Tag}</a><span class="tag-commas">, </span>{/block:Tags}.</div>{/block:HasTags}
{/block:IfShowTags}
<!-- Con {lang:Tagged}: <a href="{TagURL}">{Tag}</a> muestra las tags del post tal que así: "Etiquetado: Mareen Fischinger, New York City, Times Square." a la izquierda del rectángulo. -->
{block:ContentSource}
<a href="{SourceURL}" class="source_url">
{lang:Source}:
{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}
</a>
{/block:ContentSource}
<!-- Con {lang:Source}: {SourceTitle} muestra la fuente del post tal que así: "Fuente: delasazores" a la derecha del rectángulo. -->
<div class="clear"></div>
</div>
<!-- Cierra el segundo rectángulo -->

Esto se vería así:

image

Ahora vamos a cambiar este código por el siguiente (recuerdo que podéis copiar y pegar, ya que los comentarios están entre <!— y —> que es la forma de HTML de indicar que son comentarios), que también explicaré:

{block:Date}
<div class="footer for_permalink">
<div class="date">
{block:Reblog}
<a href="{Permalink}">{DayOfMonthWithZero}/{MonthNumberWithZero}/{Year} - {24HourWithZero}:{Minutes}</a>
<!-- Abre el primer rectángulo. Si el post es reblogueado, con <a href="{Permalink}">{DayOfMonthWithZero}/{MonthNumberWithZero}/{Year} - {24HourWithZero}:{Minutes}</a> indicas exactamente cuando fue reblogueado, tal que así: "29/12/2011 - 18:29". Además, es un vínculo al post. Se sitúa a la izquierda del rectángulo. -->
{/block:Reblog}

{block:NotReblog}
<a href="{Permalink}">{DayOfMonthWithZero}/{MonthNumberWithZero}/{Year} - {24HourWithZero}:{Minutes}</a>
<!-- Si el post es creado, indicas exactamente cuando fue, tal que así: "29/12/2011 - 18:29". Además, es un vínculo al post. Se sitúa a la izquierda del rectángulo. -->
{/block:NotReblog}
</div>
<div class="notes">{block:NoteCount}<a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount} {block:IfDisqusShortname}{block:NoteCount}&bull;{/block:NoteCount} <a href="{Permalink}#disqus_thread">{lang:View comments}</a>{/block:IfDisqusShortname}</div>
<!-- Esto no varía. Con {NoteCountWithLabel} y {lang:View comments} muestra el número de notas y comentarios (si está activado el Disqus). Además, es un vínculo al post. Se sitúa a la derecha del rectángulo.-->

<div class="clear"></div>
</div>
{/block:Date}
<!-- Cierra el primer rectángulo -->

<div class="footer {block:ContentSource}with_source_url{/block:ContentSource}" style="
display:none;
{block:IfShowTags}{block:HasTags}display:block;{/block:HasTags}{/block:IfShowTags}
{block:ContentSource}display:block;{/block:ContentSource}
">
<!-- Abre el segundo rectángulo -->
{block:IfShowTags}
{block:HasTags}<div class="tags">{lang:Tagged}: {block:Tags}<a href="{TagURL}">{Tag}</a><span class="tag-commas">, </span>{/block:Tags}.</div>{/block:HasTags}
{/block:IfShowTags}
<!-- Esto no varía nada. Con {lang:Tagged}: <a href="{TagURL}">{Tag}</a> muestra las tags del post tal que así: "Etiquetado: Mareen Fischinger, New York City, Times Square." a la izquierda del rectángulo. -->
{block:ContentSource}
<div style="float: right;">{block:Reblog}Vía: <a href="{ReblogParentURL}">{ReblogParentName}</a> • {/block:Reblog}{lang:Source}: <a href="{SourceURL}">{SourceTitle}</a></div>
{/block:ContentSource}
<!-- Con Vía: <a href="{ReblogParentURL}">{ReblogParentName}</a> y {lang:Source}: <a href="{SourceURL}">{SourceTitle}</a> indicas a quien reblogueas el post (vía) y quien es la fuente (el creador del post). Se sitúan a la derecha del rectángulo. -->
<div class="clear"></div>
</div>
<!-- Cierra el segundo rectángulo -->

El resultado sería:

image

Puedes ver las ayudas que vaya creando en http://delasazores.com/tagged/ayuda

Pulsa aquí para mostrar más opciones de este post
Comentarios del blog proporcionados por Disqus
  1. delasazores ha publicado esto
Botón para subir al principio de la página de Cafetería de las Azores, Web de Humor, Tumblr en Español Huevo de Pascua