Listas de Widgets Blogger

[Kaxsp]

Veréis, me descargé una plantilla para blogger, y he estado editando cosas y tal para mejorarla, pero hay una cosa con la que no consigo avanzar. Resulta que la barra lateral se debería ver así:



Pero resulta que se ve así:



y lo que es el archivo del blog, se ve aún peor:




Aquí pongo el trozo de CSS del blog, a ver si conseguís adivinar algo...

Código:

#sidebar {
width:200px;
float:right;
font-size:12px;
color:#999;
margin: 10px 00px 0px 0px;
font-family:century gothic,Verdana,sans-serif;

}

#sidebar ul {
margin:0;
padding:0;
list-style-type:none;
}

#sidebar  h2 {
font-size:18px;
height:25px;
font-weight:bold;
padding:3px 0px 0px 5px;
background:#323232;
Margin: 10px 0 0 0;
color:#fff;
font-variant:small-caps;
}

#sidebar li a {
display:block;
line-height:160%;
padding:4px 0 4px 0;
color:#222;
background:#5a5a5a;
border-bottom:1px solid #464646;
}

#sidebar li a:hover {
text-decoration:none;
background-color:#ae0000;
color:#fff;

}

#sidebar ul li a {
background:#none;
padding-left:10px;
}
#sidebar table {
	width:100%;
	text-align:center;
	background-color:#464646;
	}

		#sidebar .widget-content {
			padding: 5px 10px 10px 10px;
		}

Saludos y gracias de antemano!

[kseso?]

Kaspx pon también el trozo de html de esa lista. Y si la tienes en red, un enlace seguro que vendría mejor.

El indentado parece que fuese una acumulación de padding izquierdos.

Un saludo

[Kaxsp]

La web es www.kazjako.net

De HTML, lo básico:

Código:

<div id='sidebar'>

<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Slideshow1' locked='false' title='Presentación' type='Slideshow'/>
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
<b:widget id='Label2' locked='false' title='Etiquetas' type='Label'/>
<b:widget id='Label1' locked='false' title='Categorías' type='Label'/>
</b:section>

</div>

Aquí la sección Categorías, la que se ve bien:

Código:

			            <DIV class='sidebar'>
			              <UL class='sidebar'>
								<b:loop values='data:labels' var='label'>
									<LI class='cat-item'>
										<A expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
											<data:label.name/> (<data:label.count/>)
										</A>
									</LI>
								</b:loop>
			              </UL>
							<b:include name='quickedit'/>						  
			            </DIV><!-- clear -->

Aquí las otras dos:

Código:

<b:includable id='menu' var='data'>
  <select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
    <option value=''><data:title/></option>
    <b:loop values='data:data' var='i'>
      <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
    </b:loop>
  </select>
</b:includable>
<b:includable id='interval' var='intervalData'>
  <b:loop values='data:intervalData' var='i'>
      <ul>
        <li expr:class='&quot;archivedate &quot; + data:i.expclass'>
          <b:include data='i' name='toggle'/>
          <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
            <span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
          <b:if cond='data:i.data'>
            <b:include data='i.data' name='interval'/>
          </b:if>
          <b:if cond='data:i.posts'>
            <b:include data='i.posts' name='posts'/>
          </b:if>
        </li>
      </ul>
  </b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
  <b:if cond='data:interval.toggleId'>
  <b:if cond='data:interval.expclass == &quot;expanded&quot;'>
    <a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; +       &quot;&amp;dir=close&amp;toggle=&quot; + data:interval.toggleId +       &quot;&amp;toggleopen=&quot; + data:toggleopen'>
        <span class='zippy toggle-open'>▼ </span>
    </a>
  <b:else/>
    <a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; +         &quot;&amp;dir=open&amp;toggle=&quot; + data:interval.toggleId +         &quot;&amp;toggleopen=&quot; + data:toggleopen'>
          <span class='zippy'>
            <b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
              ◄
            <b:else/>
              ►
            </b:if>
          </span>
    </a>
  </b:if>
 </b:if>
</b:includable>
<b:includable id='posts' var='posts'>
  <ul class='posts'>
    <b:loop values='data:posts' var='i'>
      <li><a expr:href='data:i.url'><data:i.title/></a></li>
    </b:loop>
  </ul>
</b:includable>
</b:widget>
<b:widget id='Label2' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
        <b:else/>
          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
        </b:if>
        <span dir='ltr'>(<data:label.count/>)</span>
      </li>
    </b:loop>
    </ul>

    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Yo creo que es cosa del CSS, pero no sé... La sección Categorías es la que te viene default del blog, y es la única que se ve como debería.

Saludos y gracias por las respuestas.

[kseso?]

Prueba estos cambios:

#sidebar h2 {/*www.kazjako.net (línea 250)*/margin:10px 5px 0 0;} para tener un pequeño margen izq

#sidebar .widget-content {/*www.kazjako.net (línea 282)*/padding:5px 0 10px 0;} para alinear el fondo
.BlogArchive #ArchiveList ul li {/*36250363...undle.css (línea 1)*/ padding-right:5px; borrar "text-indent:-15px

.BlogArchive #ArchiveList ul ul li {/*36250363...undle.css (línea 1)*/margin-right:-5px;
}
.BlogArchive #ArchiveList ul.posts li {/*36250363...undle.css (línea 1)borrar text-indent*/ }

Después ya dices.
Un saludo

[Kaxsp]

Creo que no ha cambiado nada de nada, pero a lo mejor me he equivocado yo al copiar el código. Ahí va:

Código:

/* The Sidebar */

#sidebar {
width:200px;
float:right;
font-size:12px;
color:#999;
margin: 10px 00px 0px 0px;
font-family:century gothic,Verdana,sans-serif;

}

#sidebar ul {
margin:0;
padding:0;
list-style-type:none;
}

#sidebar  h2 {
font-size:18px;
height:25px;
font-weight:bold;
padding:3px 0px 0px 5px;
background:#323232;
margin:10px 5px 0 0;
color:#fff;
font-variant:small-caps;
}

#sidebar li a {
display:block;
line-height:160%;
padding:4px 0 4px 0;
color:#222;
background:#5a5a5a;
border-bottom:1px solid #464646;
}

#sidebar li a:hover {
text-decoration:none;
background-color:#ae0000;
color:#fff;

}

#sidebar ul li a {
background:#none;
padding-left:10px;
}


#sidebar table {
	width:100%;
	text-align:center;
	background-color:#464646;
	}

		#sidebar .widget-content {

.BlogArchive #ArchiveList ul li {padding-right:5px; };

.BlogArchive #ArchiveList ul ul li {margin-right:-5px };

			padding:5px 0 10px 0;


		}

y de verdad, muchas gracias por las respuestas.

[Kaxsp]

Alguien me ayuda? por fa...

[kseso?]

Creo que te falta por hacer algo de lo comentado en la respuesta anterior:

#sidebar .widget-content : lo tienes sin el margen derecho para alinear con h2
.BlogArchive #ArchiveList ul li : le tienes un padding-left y el tex-indent.
.BlogArchive #ArchiveList ul ul li : quita el padding-left
.BlogArchive #ArchiveList ul.posts li : quita también el padding-left

.BlogArchive #ArchiveList ul : quita también el padding-left (o ¿es marging-left lo que tienes?)

Haz eso y cuentas

[Lucin]

Hola,

¿De dónde se puede sacar esa o cualquier plantilla de blogger para crear categorías?

Me vendría genial. Hace días que busco en blooger y no he encontrado nada (tipo como las de Wordpress)

¿Quizás haya alguna palabra para buscarlas dentro de blogger?