Barra lateral con tres cajitas

Hoy he creado esta bitácora, con la plantilla inicial "Rounders 3", y la he modificado un poquito para que en la barra lateral tenga tres cajitas en vez de dos.
¿Y qué he modificado?

Es muy importante salvar la plantilla antes y después de cada cambio, así tenemos la posibilidad de ver las modificaciones con el comando 'diff':


$ diff -u lineadecomandos_plantilla-2009-04-27\ 2230.xml lineadecomandos_plantilla-2009-04-27\ 2334.xml


La pena es que incrustar etiquetas XML dentro del editor de Blogger produce basura.
Así que hay protegerlas para que no las interprete.
Una manera es hacer una sustitución global de todos los > por >,
y de todos los < por &lt;.


$ diff -u lineadecomandos_plantilla-2009-04-27\ 2230.xml lineadecomandos_plantilla-2009-04-27\ 2334.xml


--- lineadecomandos_plantilla-2009-04-27 2230.xml 2009-04-27 22:34:02.538687800 +0200
+++ lineadecomandos_plantilla-2009-04-27 2334.xml 2009-04-27 23:34:32.163687800 +0200
@@ -13,6 +13,7 @@
URL: www.stopdesign.com
Date: 27 Feb 2004
Updated by: Blogger Team
+Updated by Víctor Paesa, April 2009
----------------------------------------------- */

/* Variable definitions
@@ -27,20 +28,16 @@
type="color" default="#586" value="#558866"<
>Variable name="borderColor" description="Post Border Color" type="color"
default="#bbb" value="#bbbbbb"<
-
-
>Variable name="mainLinkColor" description="Link Color" type="color"
default="#456" value="#445566"<
>Variable name="mainVisitedLinkColor" description="Visited Link Color"
type="color" default="#234" value="#223344"<
-
>Variable name="titleBgColor" description="Page Header Background Color"
type="color" default="#357" value="#335577"<
>Variable name="titleTextColor" description="Blog Title Color"
type="color" default="#fff" value="#ffffff"<
-
- >Variable name="topSidebarHeaderColor"
- description="Top Sidebar Title Color"
+ >Variable name="sidebarHeaderColor"
+ description="Sidebar Title Color"
type="color" default="#fff" value="#ffffff"<
>Variable name="topSidebarBgColor"
description="Top Sidebar Background Color"
@@ -52,13 +49,21 @@
>Variable name="topSidebarVisitedLinkColor"
description="Top Sidebar Visited Link Color"
type="color" default="#fff" value="#ffffff"<
- >Variable name="bottomSidebarHeaderColor"
- description="Bottom Sidebar Title Color"
- type="color" default="#abc" value="#aabbcc"<
-
+ >Variable name="middleSidebarBgColor"
+ description="Middle Sidebar Background Color"
+ type="color" default="#586" value="#6f6f5f"<
+ >Variable name="middleSidebarLinkColor"
+ description="Middle Sidebar Link Color"
+ type="color" default="#99ddbb" value="#ffffff"<
+ >Variable name="middleSidebarVisitedLinkColor"
+ description="Middle Sidebar Visited Link Color"
+ type="color" default="#ffffff" value="#ffffff"<
+ >Variable name="bottomSidebarBgColor"
+ description="Bottom Sidebar Background Color"
+ type="color" default="#586" value="#aaccc0"<
>Variable name="bottomSidebarLinkColor"
description="Bottom Sidebar Link Color"
- type="color" default="#99ddbb" value="#99ddbb"<
+ type="color" default="#99ddbb" value="#ffffff"<
>Variable name="bottomSidebarVisitedLinkColor"
description="Bottom Sidebar Visited Link Color"
type="color" default="#ffffff" value="#ffffff"<
@@ -475,8 +480,8 @@

#sidebartop h2 {
line-height:1.5em;
- color:$topSidebarHeaderColor;
- border-bottom: 1px dotted $topSidebarHeaderColor;
+ color:$sidebarHeaderColor;
+ border-bottom: 1px dotted $sidebarHeaderColor;
font: $headerFont;
margin-bottom: 0.5em;
}
@@ -512,18 +517,6 @@
margin-top: 0.5em;
}

-#sidebarbottom-wrap1 {
- background:$titleBgColor url("http://www.blogblog.com/rounders3/corners_side_top.gif") no-repeat $startSide top;
- margin:0 0 15px;
- padding:10px 0 0;
- color: $titleTextColor;
-}
-
-#sidebarbottom-wrap2 {
- background:url("http://www1.blogblog.com/rounders3/corners_side_bot.gif") no-repeat $startSide bottom;
- padding:0 0 8px;
-}
-
.sidebar h2 {
margin-top:0;
margin-$endSide:0;
@@ -556,10 +549,34 @@
}

#sidebar h2 {
- color: $bottomSidebarHeaderColor;
- border-bottom: 1px dotted $bottomSidebarHeaderColor;
+ color: $sidebarHeaderColor;
+ border-bottom: 1px dotted $sidebarHeaderColor;
}

+#sidebarmiddle-wrap1 {
+ background:$middleSidebarBgColor url("http://www.blogblog.com/rounders3/corners_side_top.gif") no-repeat $startSide top;
+ margin:0 0 15px;
+ padding:10px 0 0;
+ color: $titleTextColor;
+}
+
+#sidebarmiddle-wrap2 {
+ background:url("http://www1.blogblog.com/rounders3/corners_side_bot.gif") no-repeat $startSide bottom;
+ padding:0 0 8px;
+}
+
+#sidebarbottom-wrap1 {
+ background:$bottomSidebarBgColor url("http://www.blogblog.com/rounders3/corners_side_top.gif") no-repeat $startSide top;
+ margin:0 0 15px;
+ padding:10px 0 0;
+ color: $titleTextColor;
+}
+
+#sidebarbottom-wrap2 {
+ background:url("http://www1.blogblog.com/rounders3/corners_side_bot.gif") no-repeat $startSide bottom;
+ padding:0 0 8px;
+}
+
/* Footer
----------------------------------------------- */
#footer-wrap1 {
@@ -1105,8 +1122,55 @@
>/b:section<
>/div<>/div<

+ >div id='sidebarmiddle-wrap1'<>div id='sidebarmiddle-wrap2'<
+ >b:section class='sidebar' id='sidebarmiddle' preferred='yes'<
+>b:widget id='Label1' 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<
+>/b:section<
+ >/div<>/div<
+
>div id='sidebarbottom-wrap1'<>div id='sidebarbottom-wrap2'<
- >b:section class='sidebar' id='sidebar' preferred='yes'/<
+ >b:section class='sidebar' id='sidebarbot' preferred='yes'<
+>b:widget id='LinkList1' locked='false' title='Enlaces' type='LinkList'<
+>b:includable id='main'<
+
+>b:if cond='data:title'<>h2<>data:title/<>/h2<>/b:if<
+ >div class='widget-content'<
+ >ul<
+ >b:loop values='data:links' var='link'<
+ >li<>a expr:href='data:link.target'<>data:link.name/<>/a<>/li<
+ >/b:loop<
+ >/ul<
+ >b:include name='quickedit'/<
+ >/div<
+>/b:includable<
+>/b:widget<
+>/b:section<
>/div<>/div<

>/div<