B I E N V E N I D O

S L E E P Y V I C T O R Y

De pronto has llegado aquí y te doy la bienvenida a mi blog. Aquí encontrarás parte de mi vida, recursos y tutoriales que de seguro serán de tu ayuda o podrán divertirte.

Cambiar Fecha y demás bajo el título

lunes, 12 de enero de 2015

¿como cambiar de lugar; fecha, título, comentarios o etiquetas? ¿como ubicarlos debajo del título?
¡Lo prometido es deuda! hola bellas criaturas y habitantes de la bloggosfera, ¡Victory Here! ¿como están? yo esto de maravilla. He venido de unas noches mágicas y vacacionales, asi que mejor no me podría sentir.
De acuerdo... al grano. El tutorial de hoy es sumamente sencillo. Les cuento que encontré uno que otros tutoriales y al final no podía hacer lo que quería, hasta que encontre esto y la verdad no tiene ciencia. Iniciemos...


ELEMENTOS BÁSICOS
Las divisiones del cuerpo de entrada en sí se clasifican dentro de nuestro código html de la siguiente forma:
1- Linea debajo del titulo de la entrada:
<div class='post-header-line-1'/>
2- Pie de entrada o Linea final de la entrada (donde esta ubicado actualmente los elementos a cambiar y que nos interesan el día de hoy):
<div class='post-footer-line post-footer-line-1'/>
<div class='post-footer-line post-footer-line-2'/>

CAMBIEMOS DE LUGAR
ok, ahora ya que estudiamos un poco la división de el cuerpo de entrada cambiaremos de lugar los elementos que nos interesen. 
Iniciemos con la Fecha, sigue mis pasos al pie de la letra y recuerda *Guarda un respaldo de tu plantilla antes de hacer cambios. 

1- Entra a "Editar Html" opción que encuentras a lado del boton " Personalizar " de la página principal de tu blog en blogger:

2- Al estar en el menú de edición Html seleccionaras "Plantilla de Formato":

3-  Haras click dentro del cajon de codigo y luego en tu teclado seleccionaras ctrl+f para activar la barra buscadora.
Dentro de la barra buscadora pegaras solo el inicio (seleccionado en negrita) del siguiente codigo:
<b:if cond='data:post.isDateStart'>&lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
Asegurate de que el codigo sea igual al que esta arriba.
4- Copia el código en un bloc de notas a parte y luego borralo de tu plantilla.
5- Lo siguiente que debes hacer es buscar la cabecera de la entrada (de la cual hablamos al introducción de este tutorial). Lo buscaras de la misma forma, dando ctrl+f pegaras: <div class='post-header-line-1'/> y Debajo de esta linea pegaras tu codigo.
*EN TU BARRA BUSCADORA DA ENTER DOS VECES, EN OCASIONES SE REPITE DOS VECES "div class='post-header-line-1'". PEGA TU CÓDIGO EN LA SEGUNDA.
6- Da click en vista previa y observa si se hizo el cambio que deseas.

CAMBIANDO ETIQUETAS Y COMENTARIOS
¡Este procedimiento es algo distinto al anterior! Por lo general la ubicación de etiquetas, comentarios, autor, links de compartir se hayan en el pie de entrada.  asi que harás o siguiente:

1- Da click sobre el cajo del codigo de tu página y aprieta las teclas ctrl+f para que aparezca tu barra buscadora en la cual pegaras lo siguiente:
<div class='post-footer'> (código de pie de entrada), habrán dos lineas: 
➜ <div class='post-footer-line post-footer-line-1'/>
➜ <div class='post-footer-line post-footer-line-2'/>
En las plantillas de blogger (más especificamente la clásica) siempre se hayan los elementos de comentarios y etiquetas bajo la segunda linea "line post-footer-line-2" 
*EN TU BARRA BUSCADORA DA ENTER DOS VECES, EN OCASIONES SE REPITE DOS VECES "div class='post-header-line-1'". PEGA TU CÓDIGO EN LA SEGUNDA.

2- Código de comentarios: 
<span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
              <b:include data='post' name='comment_count_picker'/>
            </b:if>
          </b:if>
        </b:if>
      </span>
3- Código de Etiquetas: 
<span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span>
Para re-ubicarlas bajo el título y justa a lado de los comentarios deberás hacer lo siguiente:
1- Copiar en un bloc de notas los codigos a cambiar y borrarlos de tu plantilla.
2- Pegarlos bajo la siguiente linea: <div class='post-header-line-1'/>  
Linea en donde pegaste anteriormente tus comentarios.
VOILA, todo estara ubicado debajo de tu titulo.
¿Te interesa centrarlo? de acuerdo te muestro como centrar todo el contenido bajo el titulo de la entrada es sumamente sencillo harás lo siguiente:
Encima del la linea: <div class='post-header-line-1'/> (bajo la cual hemos estado pegando nuestros codigos) se ubica otra:  <div class='post-header'> Encima de este colocaras <center> y al cierre de la etiqueta </center> un ejemplo de como te quedara:
<center>
<div class='post-header'>
    <div class='post-header-line-1'/>
<b:if cond='data:post.isDateStart'>&lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
<span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
              <b:include data='post' name='comment_count_picker'/>
            </b:if>
          </b:if>
        </b:if>
      </span>
<span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span>
    </div> </center>
PARA CENTRAR Y AJUSTAR CONTENIDO: 
entra en Personalizar y luego a la opción avanzado te desplazaras hasta la ultima opción de este menu y daras click en "AÑADIR CSS" para centrar el titulo debes pegar el siguiente código:
.post-title { text-align: center; } 
Para ocultar el pie de la pagina haras lo mismo solo que agregaras el siguiente codigo:
.post-footer {display: none;}

¡Listo! todo esta ubicado ahora bajo el título. Si tienes alguna duda especifica, deja un comentario o si quieres una respuesta más rápida dirijete a la pestaña: contactame ubicada en la barra principal de este blog. ¡Hasta la próxima!  Espero te haya funcionado. 

7 comentarios :

  1. Muy muy útil, muchas gracias por compartir.
    Bsitos.

    ResponderEliminar
  2. Están muy bien este tipo de tutoriales para la gente que anda un poco pez en html, y es un poco patosa, por suerte ese tema yo lo llevo bien (por clases) pero no me gusta tocar mucho la plantilla ni nada, me gustan las cosas sencillitas :)
    Aún así, está genial explicado con el antes, el después, y todas las capturas paso a paso, así da gusto.

    Te sigo desde el tag del grupo de facebook Be Bloggera Blogs "Mujeres Bloggeras de Habla Hispana" espero verte por mi blog.

    Un besazo <3

    ResponderEliminar
  3. Estos tutoriales simepre van bien! gracias!!!

    ResponderEliminar
  4. Hola, guapa. Estoy encantada de anunciarte que en mi blog te he dejado un premio: http://elmeuraconetmirinconcito.blogspot.de/2015/01/premio-best-blog.html
    ¡¡Muchas felicidades y sigue así!!

    ResponderEliminar
  5. Hola! Muchisìmas gracias por el tutorial :D
    Solo tengo un problema, el pie de página se sigue viendo aún después de haber puesto .post-footer {display: none;}

    ¿Tienes idea de por qué?

    ResponderEliminar
  6. Gracias por el tuto, lo imtentare haber si me sale porque la verad estoy en cero con esto de los codigos un saludo linda

    ResponderEliminar
  7. Demasiado util todo lo que has puesto, creo que lo haré ahora mismo. Muchas gracias linda <3
    ¡Saludos!

    demasiadascosasdechicas.blogspot.com

    ResponderEliminar

Not another by Mayra Victoria || diseño © Sleepy Victory derechos reservados 2016