Mostrando entradas con la etiqueta agregar sidebar plantilla herbert. Mostrar todas las entradas
Mostrando entradas con la etiqueta agregar sidebar plantilla herbert. Mostrar todas las entradas

9.3.10

Agregar una sidebar - Plantilla herbert


La plantilla que vamos a modificar es la Herbert, que podemos identificar en el encabezamiento del código, así:

  <head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[/*
* Blogger Template Style
* Herbert
*
* by Jason Sutter
* Updated by Blogger Team
*/

Los blogs con plantilla Herbert tienen una sidebar derecha. Vamos a agregar una sidebar izquierda:

Vamos a Edicitar HTML :

Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ►
  1. Localizamos el siguiente código poniendo, dentro del rectángulo de búsqueda (Search), una línea del mismo:

    @media all {
      div#main-wrapper {
        float: $startSide;
        width: 66%;
        padding-top: 0;
        padding-$endSide: 1em;
        padding-bottom: 0px;
        padding-$startSide: 1em;
        word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
       overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
      }

    y cambiamos el Width (ancho), de 66% a 48%

  2. Más abajo en:

      div#sidebar {
        width: 30%;
        float: $endSide;
        word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
        overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
      }

    cambiamos el Width de 30% a 24%.

  3. Debajo del anterior segmento de código, justo debajo de la primera llave de cierre ( } ) pegamos éste:

    div#newsidebar-wrapper {
    margin: 10px;
    padding: 10px;
    text-align: $startSide;
    }

    div#newsidebar {
    width: 24%;
    float: $startSide;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }
  4. Más abajo buscamos este segmento:

      div#sidebar-wrapper {
        padding-top: 20px;
        padding-$endSide: 1em;
        padding-bottom: 0;
        padding-$startSide: 1em;
        text-align: $startSide;
      }
    }

    y, debajo de la primera llave de cerramiento ( } ), pegamos esto:

    div#newsidebar-wrapper {
    padding-top: 20px;
    padding-$endSide: 1em;
    padding-bottom: 0;
    padding-$startSide: 1em;
    text-align: $startSide;
    }

  5. Siguiendo más hacia abajo localizamos este segmento de código:

    #sidebar h2 {
      margin: 0px;
      color: $sidebarTitleColor;
      font: $sidebarTitleFont;
      padding: 0px;
      border: none;
    }

    debajo del cual pegamos esto:

    #newsidebar h2 {
    margin: 0px;
    color: $sidebarTitleColor;
    font: $sidebarTitleFont;
    background: $descriptionBgColor;
    padding: 0px;
    border: none;
    }
    La línea backgrounod la hemos añadido para ponerle color al fondo de los títulos de los elementos. Si queremos el mismo efecto en la otra sidebar la añadimos en el código de arriba.


  6. Debajo encontramos estos tres segmentos:

    #sidebar .widget {
      margin-top: 0px;
      margin-$endSide: 0px;
      margin-bottom: 33px;
      margin-$startSide: 0px;
      padding: 0;
    }

    #sidebar ul {
      list-style-type: none;
      font-size: 95%;
      margin-top: 0;
    }

    #sidebar li {
      margin: 0px;
      padding: 0px;
      list-style-type: none;
      font-size: 105%;
    }

    Los copiamos y los pegamos enseguida cambiando sidebar por newsidebar.

    Si queremos enmarcar los elementos individualmente, en #sidebar .widget y en #newsidebar .widget añadimos esta línea:

    border: solid 1px $borderColor;

    pudiendo cambiar el grosor, y el estilo de la línea.

  7. Por último bajamos a la zona de HTML, copiamos el código de la sidebar, que es éste:

          <div id='sidebar-wrapper'>
            <b:section class='sidebar' id='sidebar' preferred='yes'>
    <b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
    <b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
    <b:widget id='HTML1' locked='false' title='' type='HTML'/>
    <b:widget id='HTML2' locked='false' title='' type='HTML'/>
    <b:widget id='Profile1' locked='false' title='Perfil' type='Profile'/>
    </b:section>
          </div>

    y lo pegamos encima de esta línea:

    <div id='main-wrapper'>

    Una vez pegado le hacemos las siguientes modificaciones:

    • Borramos todos los b:widget (los que están resaltados); el del prefil (Profile) lo dejamos para que la sidebar no nos quede en blanco y podamos distinguirla.

    • cambiamos los dos id='sidebar' por id='newsidebar'.

  8. Para que el b:widget del perfil no nos quede repetido, lo que nos produciría un error, debemos borrarlo del código de la primera Sidebar, o sea que de ese código borramos esta línea:

    <b:widget id='Profile1' locked='false' title='Perfil' type='Profile'/>

  9. Finalmente: Vista previa y Guardar plantilla.
Yendo a Página principal ► Diseño ► Diseño podemos añadir y organizar elementos en cada Sidebar
Índice: Agregar una sidebar
Para plantillas Herbert
Para plantillas Minima
Para plantillas Denim
Para plantillas Rounders
Para plantilla Simple
Para plantilla Picture Window
Para plantilla Travel
Para plantilla Awesome
Agregar sidebar doble
9 comentarios
Etiquetas: , , , , , , ,
Suscribirse a: Entradas ( Atom )