Store Tecnologia Movil: gadgets

Mostrando entradas con la etiqueta gadgets. Mostrar todas las entradas

Arrowdirect

linksynergy, Arrowdirect, Store, PRODUCTOS, gadgets,

MobStub,

linksynergy, Store, PRODUCTOS, MobStub, gadgets,

Legend3D, Inc., rifftrax

linksynergy, Legend3D, RiffTrax, Store, gadgets,Potter Halfblood,

Fotolia LLC

linksynergy, Store, PRODUCTOS, Fotolia LLC, aplicaciones, gadgets,

Tabview para agrupar varios gadgets en uno solo

Los tabviews son elementos que nos permiten agrupar en un solo contenedor varios gadgets y que pueden seleccionarse por medio de pestañas.

Su función principal es ahorrarnos espacio en el blog para evitar tener dispersos gadgets de la misma categoría y así poder agrupar en uno solo varios gadgets. Hay varios métodos para crear tabviews, algunos requieren jQuery, otros Mootools, o cualquier otro script.

Para agregarlo a tu blog entra en Diseño | Edición de HTML y antes de ]]>

</b:skin>

pega los estilos:

/* Tabview
----------------------------------------------- */
.tabviewcont{
margin:15px 0;
padding:0;
clear:both;
}

.tabviewnav {
margin:0;
padding:3px 0; /* Si usas plantilla del Diseñador cambia el 0 por 15px */
font-size:12px; /* Tamaño de la fuente en las pestañas */
font-weight:bold;
}
.tabviewnav li {
list-style:none;
margin:0;
display:inline;
}
.tabviewnav li a {
padding:3px 6px;
margin-right:1px;
background:#0B243B; /* Color de las pestañas */
border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
text-decoration:none;
color:#fff;
}
.tabviewnav li a:hover {
color:#fff;
background:#084B8A; /* Color de la pestaña al pasar el cursor */
text-decoration:none;
}
.tabviewnav li.tabviewactive a,
.tabviewnav li.tabviewactive a:hover {
background:#084B8A; /* Color de la pestaña activa */
color:#fff;
}
.tabviewcont .tabviewtab {
padding:5px;
border:1px solid #ccc; /* Borde del contenedor general */
background:#fff; /* Color de fondo del gadget */
}
.tabviewcont .tabviewtab h2,
.tabviewcont .tabviewtabhide {
display:none;
}
.tabviewtab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabviewtab .widget-content li {
border-bottom:1px solid #ccc;
margin:0 5px;
padding:2px 0 5px 0;
}

Ahora antes de </head> pega este script:

<script type='text/javascript'>
// Tabview para agrupar gadgets

//<![CDATA[
document.write('<style type="text/css">.tabview{display:none;}<\/style>');function tabviewObj(argsObj){var arg;this.div=null;this.classMain="tabview";this.classMainLive="tabviewcont";this.classTab="tabviewtab";this.classTabDefault="tabviewtabdefault";this.classNav="tabviewnav";this.classTabHide="tabviewtabhide";this.classNavActive="tabviewactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabviewid>nav<tabnumberone>';for(arg in argsObj){this[arg]=argsObj[arg]}this.REclassMain=new RegExp('\\b'+this.classMain+'\\b','gi');this.REclassMainLive=new RegExp('\\b'+this.classMainLive+'\\b','gi');this.REclassTab=new RegExp('\\b'+this.classTab+'\\b','gi');this.REclassTabDefault=new RegExp('\\b'+this.classTabDefault+'\\b','gi');this.REclassTabHide=new RegExp('\\b'+this.classTabHide+'\\b','gi');this.tabs=new Array();if(this.div){this.init(this.div);this.div=null}}tabviewObj.prototype.init=function(e){var childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;if(!document.getElementsByTagName){return false}if(e.id){this.id=e.id}this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1}}}DOM_ul=document.createElement("ul");DOM_ul.className=this.classNav;for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;if(this.removeTitle){t.div.title=''}if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];if(headingElement){t.headingText=headingElement.innerHTML;if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi," ");t.headingText=t.headingText.replace(/<[^>]+>/g,"")}break}}}if(!t.headingText){t.headingText=i+1}DOM_li=document.createElement("li");t.li=DOM_li;DOM_a=document.createElement("a");DOM_a.appendChild(document.createTextNode(t.headingText));DOM_a.href="javascript:void(null);";DOM_a.title=t.headingText;DOM_a.onclick=this.navClick;DOM_a.tabview=this;DOM_a.tabviewIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabviewid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);aId=aId.replace(/<tabnumberone>/gi,i+1);aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9\-]/gi,''));DOM_a.id=aId}DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li)}e.insertBefore(DOM_ul,e.firstChild);e.className=e.className.replace(this.REclassMain,this.classMainLive);this.tabShow(defaultTab);if(typeof this.onLoad=='function'){this.onLoad({tabview:this})}return this};tabviewObj.prototype.navClick=function(event){var rVal,a,self,tabviewIndex,onClickArgs;a=this;if(!a.tabview){return false}self=a.tabview;tabviewIndex=a.tabviewIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabview':self,'index':tabviewIndex,'event':event};if(!event){onClickArgs.event=window.event}rVal=self.onClick(onClickArgs);if(rVal===false){return false}}self.tabShow(tabviewIndex);return false};tabviewObj.prototype.tabHideAll=function(){var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i)}};tabviewObj.prototype.tabHide=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}div=this.tabs[tabviewIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide}this.navClearActive(tabviewIndex);return this};tabviewObj.prototype.tabShow=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}this.tabHideAll();div=this.tabs[tabviewIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabviewIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabview':this,'index':tabviewIndex})}return this};tabviewObj.prototype.navSetActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className=this.classNavActive;return this};tabviewObj.prototype.navClearActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className='';return this};function tabviewAutomatic(tabviewArgs){var tempObj,divs,i;if(!tabviewArgs){tabviewArgs={}}tempObj=new tabviewObj(tabviewArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabviewArgs.div=divs[i];divs[i].tabview=new tabviewObj(tabviewArgs)}}return this}function tabviewAutomaticOnLoad(tabviewArgs){var oldOnLoad;if(!tabviewArgs){tabviewArgs={}}oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabviewAutomatic(tabviewArgs)}}else{window.onload=function(){oldOnLoad();tabviewAutomatic(tabviewArgs)}}}if(typeof tabviewOptions=='undefined'){tabviewAutomaticOnLoad()}else{if(!tabviewOptions['manualStartup']){tabviewAutomaticOnLoad(tabviewOptions)}}
//]]>
</script>

Por último busca esta línea:

<div class='column-right-inner'>

O si usas una plantilla antigua de Blogger busca esta línea:

<div id='sidebar-wrapper'>

Pega debajo de cualquiera de esas dos líneas lo siguiente:

<div class='tabview'>
<b:section class='tabviewtab' id='Pestaña1' maxwidgets='1'/>
<b:section class='tabviewtab' id='Pestaña2' maxwidgets='1'/>
<b:section class='tabviewtab' id='Pestaña3' maxwidgets='1'/>
</div>

Guarda los cambios, y entra en Diseño | Elementos de la página, ahí verás las nuevas áreas para agregar los gadgets, los identificarás porque tienen mayor separación que los demás.

Sólo tienes que dar click en Añadir un gadget para agregar el gadget a la pestaña que le corresponde, o bien, arrastrar un gadget que ya tengas a esa sección.

Si quieres agregar más pestañas sólo añade antes del último </div> una línea como esta:

<b:section class='tabviewtab' id='Pestaña4' maxwidgets='1'/>

Toma en cuenta que cada línea que agregues deberá tener un ID diferente, por ejemplo Pestaña5,Pestaña6, etc.

Puedes agregar varios tabviews, sólo repite el último paso y recuerda cambiar de igual forma el nombre de los IDs.

Si deseas agregarlo en una entrada para mostrar un contenido entonces el código que deberás añadir en tu post será este:

<div class='tabview'>
<div class='tabviewtab' id='Pestaña1' title='Título de la pestaña'>
... Aquí el contenido ...
</div>
<div class='tabviewtab' id='Pestaña2' title='Título de la pestaña'>
... Aquí el contenido ...
</div>
<div class='tabviewtab' id='Pestaña3' title='Título de la pestaña'>
... Aquí el contenido ...
</div>
</div>

Ahí agrega el contenido que quieras donde se indica y el título de la pestaña, y de igual forma puedes añadir más pestañas antes del último </div> añadiendo un fragmento como este:

<div class='tabviewtab' id='Pestaña4' title='Título de la pestaña'>
... Aquí el contenido ...
</div>

Recuerda que, si tu sidebar es muy angosta no conviene que pongas muchas pestañas, o que los títulos de las pestañas sean muy largos, de lo contrario las pestañas se encimarán.

También debes tomar en cuenta que este gadget no acelera la velocidad de carga del blog, es únicamente para agrupar gadgets en uno solo, incluso -dependiendo de cada blog- podría tardar un poco en cargar el tabview.

Carrusel de imágenes con Scriptaculous

Este es un carrusel de imágenes de Brian R. Miedlar que muestra las imágenes con un efecto de deslizamiento y regresa al inicio una vez llegado a la última imagen.

Está hecho con Scriptaculous así que quienes usen jQuery ya saben que deberán aplicar un hack para que ambos scripts funcionen.

Puedes ver un ejemplo funcionando en este blog de pruebas.

Para poner este carrusel de imágenes en tu blog primero necesitas descargar este archivo, descomprimirlo, y subir los archivos a un hosting.

Luego, entra en la Edición HTML de tu plantilla y agrega antes de </head> esto:

<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>


<script language='javascript' src='URL del archivo os.js' type='text/javascript'/>
<script language='javascript' src='URL del archivo carousel.js' type='text/javascript'/>
<script language='javascript' src='URL del archivo application.js' type='text/javascript'/>

Si ya tienes Scriptaculous y Prototype no hace falta que agregues el código gris, pero el resto sí.

Ahí coloca donde se indica en color rojo las URLs de los archivos que subiste previamente.

Ahora antes de ]]></b:skin> pega los estilos.

.carousel {
position:relative;
clear:both;
left:20px; /* Distancia desde la izquierda */
margin-top:10px;
margin-bottom:20px; /* Margen inferior */
border:2px solid #D8D8D8; /* Borde del carrusel */
background-color:#F2F2F2; /* Color de fondo */
}
.carousel .navButton {cursor:pointer; display:block; text-indent:-9999px; background-repeat:none; z-index:10;}
.carousel .container { position:absolute; overflow:hidden; }
.carousel .items { position:absolute; }

#Carousel2 {
height:88px; /* Alto del contenedor */
width:685px; /* Ancho del contenedor */
}
#Carousel2 .container {
left:26px;
top:12px;
width:630px; /* Ancho del contenedor de las imágenes */
height:100px; /* Alto del contenedor de las imágenes */
}
#Carousel2 .items { top:0; left:2px;
width:1700px; /* Ancho total de todas las minaturas */
}
#Carousel2 .item { height:70px; width:70px; float:left; clear:right; }
#Carousel2 .item .icon img { position:relative; left:0px; width:65px !important; height:65px; cursor:pointer;}
#Carousel2 .navButton { position:absolute; bottom:0px; width:24px; height:87px; }
#Carousel2 .navButton.previous { left:0px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGVx1_YRdagIV2RFBm8nJT34y8sMyNqUINHMkgGWkeQUzvHPwpHmnbOXVOjDBASHJqvWsVVckK2x9MA7TvQaRF9WZ1UK5nC5Y5vMYaEtqW-_qF2XihmsBycrTuuqqqk24xCJeGSEAL8iU/s87/button-left.png); }
#Carousel2 .navButton.next { right:2px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi09G6jISlT4x0VJo2agH1NOnNiq0aAdoOeIjq21NCinDZIUFhvWf-nFqBF2883Uo5TjAqzCiYOmGF2EJusTul1pvdBqije5ZdzSHB3bbrw6MN22tbFjFpSKsc9dwGH3QBQ7e_s1_i-nhI/s87/button-right.png); }
#Carousel2 .item .key { display:none;}
#Carousel2 .item .picture { display:none;}

<div id="Carousel2" class="carousel">
<div class="button navButton previous" style="display:none;">Atrás</div>
<div class="button navButton next" style="display:none;">Adelante</div>
<div class="container">
<div class="items">

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>

</div>
</div>
</div>

Ahí agrega las URLs de los enlaces y las URLs de las imágenes. La URL del enlace es opcional por si deseas que la imagen enlace a alguna entrada.

En el segundo código he puesto en color verde algunos estilos que puedes personalizar tales como el color del borde y el color de fondo. Las flechas son imágenes así que si quieres cambiarles su color o usar otras, tendrás que cambiar las dos URLs que se encuentran en ese código.

El tamaño.

El ancho del carrusel yo lo he puesto de 685px, así que debajo de la cabecera podría quedar muy bien.

Si quieres cambiar la longitud entonces tendrás que cambiar el /* Ancho del contenedor */ (que es el tamaño de todo el carrusel), el /* Ancho del contenedor de las imágenes */ (que es el área donde se muestran las miniaturas), y el /* Ancho total de las miniaturas */ que es el ancho real que ocupan todas las miniaturas juntas.

Si agregas más imágenes o si quitas algunas, también tendrás que modificar el ancho total de las miniaturas, de lo contrario se mostrarán algunas imágenes debajo de otras.

Para añadir más imágenes agrega antes de los </div> en color azul un pedazo de código como este:

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>

Para alinear el gadget sólo cambia la distancia desde la izquierda (en color verde) por otro valor, uno más grande hará que se recorra hacia la derecha.

El carrusel muestra grupos de 5 imágenes en cada avance o retroceso, si deseas modificar este valor deberás editar el archivo application.js y ahí dentro buscar esta parte:

setSize: 5,

Ese 5 es el número de imágenes que se muestran en cada avance, sólo cámbialo por el que quieras.

A modo de consejo: como los scripts son tres pueden ser lentos en cargar así que se recomiendaalojar los scripts en la plantilla.

Y ahora sí, es todo.

Enmarcar entradas y gadgets

Algunas veces las plantillas suelen ser muy "planas" y nos hacen sentir como que los gadgets o las entradas se pierden entre ellos mismos pues no se distingue dónde empiezan y dónde acaban.

Así que una opción para delimitar los espacios de éstos es enmarcar las entradas y gadgets del blog y así definir cada uno con un borde. Por supuesto que podemos elegir si se lo aplicamos sólo a las entradas, o únicamente a los gadgets.

Haremos que las entradas se vean más o menos así.

Y los gadgets así.

Veamos pues cómo enmarcar entradas y gadgets tanto en las plantillas "nuevas" como en las "antiguas" de Blogger. Para cualquiera de las dos entra en Diseño | Edición de HTML, y ahora...

Para plantillas hechas con el Diseñador de plantillas de Blogger

Antes de ]]></b:skin> agrega esto:

.post-outer {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:15px;
margin: 20px 0;
}

.column-right-outer .widget, .column-left-outer .widget {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:10px;
margin: 10px 0;
}

.footer-inner .widget {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:10px;
margin: 10px 0;
}

El tamaño, tipo y color del borde se modifica en border: 1px solid #000;

También puedes elegir que los bordes sean redondeados, sólo cambia los valores en color azul por unos más altos, por ejemplo 10px entre más alto sea el valor más redondeadas serán las esquinas.

El primer bloque corresponde a los bordes de las entradas, el segundo bloque a los bordes de los gadgets de la sidebar, y el tercer bloque a los gadgets del footer. Si no quieres aplicar el enmarcado a una de estas áreas sólo elimina el que le corresponde.

En el caso de algunos diseños de las plantillas Awesome Inc y Ethereal en lugar del primer bloque, el que utilizaremos será este:

.date-outer {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:15px;
margin: 40px 0;
}

Para las Plantillas antiguas de Blogger

Antes de ]]></b:skin> agrega esto:

.post {
border:1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
}
.main .post {margin:20px 0; padding:15px;}

.sidebar .widget {
border:1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
margin:15px 0;
padding: 10px;
}

.footer .widget {
border:1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
margin:15px 0;
padding: 10px;
}

De igual forma el primer bloque es para las entradas, el segundo para la sidebar, y el tercero para el footer.

Ya sea que uses una plantilla del Diseñador, o una plantilla antigua, quizá tengas que modificar la separación del borde pues en algunos casos podrá quedar muy pegado al contenido. Esa separación se modifica en el padding que aparece en los estilos.

Y en el caso de la distancia entre gadgets y gadget o entrada y entrada, esa se controla en el margin, el primer valor es el margen superior e inferior, y el segundo valor es el margen izquierdo y derecho.

Estos métodos son únicamente para plantillas oficiales de Blogger, para cualquier otra plantilla personalizada les recomiendo contacten al autor de su plantilla para preguntar sobre el procedimiento.

Poner separadores en los gadgets

Hace algún tiempo vimos cómo poner separadores en las entradas, y desde esa vez muchos han preguntado cómo poner separadores en los gadgets de la sidebar.

La verdad es que es un procedimiento sumamente sencillo que no deberá quitarnos ni 3 minutos de tiempo.

Haremos algo similar como lo que hicimos para enmarcar entradas y gadgets sólo que aquí tendremos la opción de incluir una imagen como separador y así delimitar de forma estética el final de cada gadget.

Si usamos bordes tendremos un resultado como este.

Y si usamos imágenes podrá verse más o menos así.

Veremos cómo hacerlo para las plantillas antiguas de Blogger, y las hechas con el Diseñador de plantillas de Blogger. En cualquier de los dos casos entra en Diseño | Edición de HTML y luego...

Para plantillas hechas con el Diseñador de plantillas de Blogger

Si quieres que el separador sea un borde agrega antes de ]]></b:skin> lo siguiente:

.column-right-outer .widget, .column-left-outer .widget {
border-bottom:4px solid #000;
padding-bottom:20px;
}

Si quieres que el separador sea una imagen entonces en lugar de lo anterior agrega esto:

.column-right-outer .widget, .column-left-outer .widget {
background: url(URL de la imagen)no-repeat 50% 100%;
padding-bottom:70px;
border:0;
}

Para las Plantillas antiguas de Blogger

De igual manera agrega antes de ]]></b:skin> lo siguiente si quieres que el separador sea un borde:

.sidebar .widget {
border-bottom:4px solid #000;
padding-bottom:20px;
}

O bien, si quieres que el separador de los gadgets sea una imagen entonces lo que deberás agregar será esto:

.sidebar .widget {
background: url(URL de la imagen)no-repeat 50% 100%;
padding-bottom:70px;
border:0;
}

Agrega la URL de la imagen del separador donde se indica si es que te decidiste por el separador con imágenes. Si la imagen fuera muy alta cambia donde dice padding-bottom:70px; por una valor más grande hasta que la imagen se muestre por completo.

En el caso de los separadores con bordes puedes modificar el grosor, tipo y color del borde, eso se hace donde dice border-bottom:4px solid #000;

4px es el grosor, solid es el tipo de borde, puedes cambiarlo por dotted, dashed, double, groove, ridge, outset, o inset, y #000 es el color del borde.

En donde dice padding-bottom:20px; podemos controlar la distancia entre cada gadget.

Como dije antes, es un procedimiento bastante simple que quizá la parte más difícil será decidirnos por un estilo que nos guste.