• Lo primero: Parte CSS

#sidebar-wrapper {
width: 220px;
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 */
}

Width (ancho) Esta parte es muy importante ya que aquí le daremos el tamaño al sidebar.

• Segundo: Parte CSS

/* Sidebar Content

----------------------------------------------- */

.sidebar { 

  color: $sidebartextcolor;

  line-height: 1.5em;

 }



.sidebar ul {

  list-style:none;

  margin:0 0 0;

  padding:0 0 0;

}

.sidebar li {

  margin:0;

  padding-top:0;

  padding-$endSide:0;

  padding-bottom:.25em;

  padding-$startSide:15px;

  text-indent:-15px;

  line-height:1.5em;

  }



.sidebar .widget, .main .widget { 

  border-bottom:1px dotted $bordercolor;

  margin:0 0 1.5em;

  padding:0 0 1.5em;

 }



.main .Blog { 

  border-bottom-width: 0;

}

Aquí haremos cambios en de estilo en el sidebar, como por ejemplo: cambiarle el color, colocarle margenes y el estilo de las lista en el sidebar. Es algo muy fácil de modificar te invito a visitar estos tutoriales, para así entender más de sobre los CSS.

• Tercero: Parte HTML

<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' type='BlogArchive'/>

</b:section>

Por lo general así encontraras estas secciones donde cada sección comenzara por la etiqueta <b:section> y terminara con la etiqueta </b:section> y dentro de la sección veremos las etiquetas widget (artilugios) que son lo elementos que le agregas al blog.

• id - (obligatorio) un nombre exclusivo, que consta únicamente de letras y números.
• class - (opcional) algunos nombres de clase habituales son "navbar", "header", "main", "sidebar" y "footer." Si cambias las plantillas más adelante, estos nombres ayudarán a Blogger a determinar la mejor forma de transferir el contenido. Sin embargo, puedes utilizar otros nombres si lo prefieres.
• maxwidgets- (opcional) el número máximo de artilugios que se pueden permitir en esta sección. Si no se especifica límite, significa que no existe.
• showaddelement - (opcional) puede ser "yes" o "no", donde "yes" es la opción predeterminada. Determina si la pestaña "Elementos de página" mostrará el vínculo "Añadir un elemento de página" en esta sección.
• growth - (opcional) puede ser "horizontal" o "vertical", donde "vertical" es la opción predeterminada. Establece si los artilugios de esta sección se ordenan uno al lado de otro o uno encima del otro.

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>

<b:widget id='BlogArchive1' locked='false' title='Archivo' type='BlogArchive'/>

• id - (obligatorio) consta únicamente de letras y números, y cada uno de los ID de la plantilla deben ser exclusivos. El ID de un artilugio sólo se puede modificar eliminando el artilugio en cuestión y creando uno nuevo.
• type - (obligatorio) indica el tipo de artilugio, el cual debe ser uno de los tipos válidos de la lista que se especifica más abajo.
• locked - (opcional) puede ser "yes" o "no", donde "no" es la opción predeterminada. Un artilugio con este atributo no se puede mover ni suprimir de la pestaña "Elementos de página".
• title - (opcional) el título que se muestra del artilugio. Si no se especifica ninguno, se empleará un título predeterminado, como "List1".
• pageType - (opcional) puede ser "all", "archive", "main" o "item", donde "all" es la opción predeterminada. El artilugio se mostrará únicamente en las páginas del blog que se hayan establecido para ello. (Todos los artilugios se muestran en la pestaña "Elementos de página", independientemente de su atributo pageType).

<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' type='BlogArchive'/>

</b:section>
</div>

• BlogArchive
• Blog
• Feed
• Header
• HTML
• SingleImage
• LinkList
• List
• Logo
• BlogProfile
• Navbar
• VideoBar
• NewsBar

Referencia en Ayuda de Blogger

• Lo primero:

<script type='text/javascript'>
// <![CDATA[
//ENTRADAS EN DESPLEGABLE POR ETIQUETAS
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}

function showFullPost(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "readmore")
spans[i].style.display = 'none';
}
}

function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}


function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'none';
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
found = 1;
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}

function commentDisplay(json) {
for (var i = 0; i < numcomments; i++) {
var entry = json.feed.entry[i];
var alturl;

if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
alturl = alturl.replace("#", "#comment-");

if (entry.content) {
comment = entry.content.$t;
} else if (entry.summary) {
comment = entry.summary.$t;
}

var re = /<S[^>]*>/g;
comment = comment.replace(re, "");
document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> commented:<br/>');
if (comment.length < numchars)
document.write(comment + '<br/><br/>');
else
document.write(comment.substring(0, numchars) + '...<br/><br/>');
}
document.write('Widget sponsored by:<br/><a href="http://bvibes.com"><img src="http://fbvibes.com/templates/yget/images/vibes_logo.png"/></a><br/>');
}
//]]>
</script>

• Segundo:

El código a continuación fue tomado de Gem@ Blog

<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr><td width='40px'>
<a expr:onclick='&quot;javascript:toggleIt(&quot;&quot; + data:post.id + &quot;&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Desplegar esta entrada'>[+/-]</a></td>
<td><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3></td></tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>


<b:includable id='main' var='top'>
<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>

<b:include data='post' name='post'/>

</b:if>

• Para verlo en funcionamiento presiona clic sobre una de las etiquetas o presionas donde dice entradas antiguas o siguiente.
• Referencia Gem@ Blog
• Cualquier cosa, no dudes en preguntarme.

<div class='post-footer-line post-footer-line-1'>
<div class='post-footer-line post-footer-line-2'>
<div class='post-footer-line post-footer-line-3'>

<span class='post-author vcard'>

<b:if cond='data:top.showAuthor'>

<data:top.authorLabel/>

<span class='fn'><data:post.author/></span>

</b:if>

</span>

<span class='post-timestamp'>

<b:if cond='data:top.showTimestamp'>

<b:if cond='data:post.url'>

<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>

<abbr class='published' expr:title='data:post.timestampISO8601'>

<data:post.timestamp/></abbr></a>

</b:if>

</b:if>

</span>

<span class='post-comment-link'>

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.allowComments'>

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>

<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>

</b:if>

</b:if>

</span>

<!-- backlinks -->

<span class='post-backlinks post-comment-link'>

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.showBacklinks'>

<a class='comment-link' expr:href='data:post.url + "#links"'>

<data:top.backlinkLabel/></a>

</b:if>

</b:if>

</span>

<span class='post-icons'>

<!-- email post links -->

<b:if cond='data:post.emailPostUrl'>

<span class='item-action'>

<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>

<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/> </a>

</span>

</b:if>

<!-- quickedit pencil -->

<b:include data='post' name='postQuickEdit'/>

<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 != "true"'>,</b:if>

</b:loop>

</b:if>

</span>

• Recuerda que puedes poner esto según el orden que te guste por lo general es: Autor, fecha de la publicación, comentarios, sobre para enviar la entradas y etiquetas.
• Para cumplir si se puede decir con un orden estándar, Esta linea (<div class='post-footer-line post-footer-line-1'>) van a ir el autor de la entrada, fecha de la entrada, comentarios, y el sobre para envió de la entrada. Claro que lo puedes ordenar a tu gusto.
• En la siguiente línea (<div class='post-footer-line post-footer-line-2'>) colocas las etiquetas.
• Eulalia de Tuneando el Blog tiene algo referente a este tema.

<div class='post-footer-line post-footer-line-1'>

<!-- Autor -->

<span class='post-author vcard'>

<b:if cond='data:top.showAuthor'>

<data:top.authorLabel/>

<span class='fn'><data:post.author/></span>

</b:if>

</span>

<!-- Fecha de publicación -->

<span class='post-timestamp'>

<b:if cond='data:top.showTimestamp'>

<b:if cond='data:post.url'>

<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>

<abbr class='published' expr:title='data:post.timestampISO8601'>

<data:post.timestamp/></abbr></a>

</b:if>

</b:if>

</span>

<!-- Comentarios -->

<span class='post-comment-link'>

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.allowComments'>

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>

<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>

</b:if>

</b:if>

</span>

<!-- Sobre-->

<span class='post-icons'>

<!-- email post links -->

<b:if cond='data:post.emailPostUrl'>

<span class='item-action'>

<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>

<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/> </a>

</span>

</b:if>
</div>

<div class='post-footer-line post-footer-line-2'>
<!-- 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 != "true"'>,</b:if>

</b:loop>

</b:if>

</span>

</div>

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

<object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >

<param name="bgcolor" value="#ffffff" />

<param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'>

• Se puede ver en vista previa el widget en funcionamiento
• Después de la instalación puedes ir a Diseño - Elementos de Páginas y cambias la posición de widget
• Y si quieres algo diferente, Vagabundia nos muestra otra forma de navegar con etiquetas
• Este Widget es original de Amanda de Blogger Buster
• Hay que recordar que este es el código alternativo, quiere decir que se modifico el código original que se dio al principio por su mala visualización, por lo tanto este no debe tener ningún problema en visualizarse en IE. Este fue el primero y este fue el segundo(El que publique aquí). Pero hice mis pruebas y fueron negativa solo sirvio una solo vez, luego borre el historial y volvio a servir. Esto servira el 100% utilizando Firefox

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important} 

<script type='text/javascript'>

// Label Cloud User Variables

var lcBlogURL = 'http://YOURBLOG.blogspot.com';

var maxFontSize = 20;

var maxColor = [0,0,255];

var minFontSize = 10;

var minColor = [0,0,0];

var lcShowCount = false;


</script>

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)

}
return v
}

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>