Blog de Lujo: octubre 2009

Evitar las copias o plagios en tu blog. Consejos y listado de webs

LuJo

Existen páginas que protegen e informan de las webs que copian las entradas integramente.
Sobre los derechos de autor hay mucho escrito y también depende de la legislación de cada país.
En cuanto a novelas, poemas, ensayos...no hay nada más efectivo que registrarlos por vía ordinaria administrativa en la Sociedad General de Autores.

Aprovecho con esta entrada para responder a algunas consultas que se me realizan. Reitero, una vez más, que estoy muy lejos de los cánones de blog de ayuda y sólo plasmo aquello que he aprendido como apunte personal; si a otra persona le sirve, ¡genial!.

*¿Qué es el Feed? es un enlace para aquellos que no tengan muy claro el concepto.

La red proporciona sistemas que funcionan y pueden servir de guía para evitar plagios. La elección dependerá de cada blog, según las necesidades que éste tenga o el tipo de web que se está creando.

Advierto que el tema "plagiar" está muy discutido y existen multitud de opiniones al respecto. En este caso sólo informaré de lo que conozco y algunas webs usan.

► Webs que vigilan las páginas que nos copian:

CopyScape Se trata de colocar un enlace en nuestro blog con uno de los gadgets que proporciona. Al pinchar en él se coloca la URL para que investigue sobre las posibles copias.

CopyrightSpot Es similar al anterior pero en mi opinión el diseño es un poco más sofisticado.

CopyGator Es más especial. Vigila y funciona a través de la información que los feeds se envían unos a otros. Para acceder a sus servicios hay que añadir la dirección del feed.

Quem me ama? Funciona sólo para las webs dentro de Blogger, pero es muy efectivo. Los datos que proporcionan están muy trabajados y sorprenden.

De las webs anteriores se pueden obtener distintos gadgets para colocarlos en el blog. Son fórmulas de disuadir para que no tengan "tentaciones".

► Webs que protegen los derechos de la obra del autor en un blog:

■ Creative Commons Es una licencia muy discutida por un montón de bloggers. Hay mucha controversia sobre ella, pero es una de las pocas herramientas que existen para proteger la propiedad intelectual por la red de obras que son propias (poemas, relatos cortos,....)
El registro en esta web se realiza de acuerdo a las posibilidades que marca cada país.

Por experiencia propia me he dado cuenta que es más sencillo hacer una licencia en España que p.ej. en Argentina. Colocan las instrucciones en inglés y "esconden" el icono para hacerse con el código HTLM que se coloca en el respectivo gadget de nuestro blog.

En esta página podemos decidir en que formas queremos que se difunda el contenido de un blog. Se dan muchas opciones, sólo se trata de elegir aquella que más se adapte a las exigencias del adminstrador del mismo.

■ Safe Creative: Registro de Propiedad intelectual Permite registrar cada una de las obras que se ponen en marcha vía web. Todas o un número determinado.

Sólo hay que abrir una cuenta y seguir las instrucciones que te dan. Es decisión de cada cual imponer las normas y lo que se debe hacer con sus escritos.
Las instrucciones están en español, inglés....Funciona como si abriéramos una cuenta más de correo, sólo hay que seguir las instrucciones que va marcando. Esta web permite registrar las obras on-line.
Posiblemente sea la más completa aunque la adición del resto de opciones da más protección.

■ IBSN (Internet Blog Serial Number) Son códigos numéricos de identificación. Formado por diez cifras identifica los blogs (weblogs o cuadernos de bitácora) de Internet.
Esta idea nació como respuesta a la negativa de la administración de asignar números ISSN a las bitácoras. De ahí la unión de los Bloggers y que la mayoria se agrupen con dichos códigos. Digamos que sirve de protección, pero relativamente.

■ My free Copyright es una web un poco menos completa que Safe Creative. Te puedes registrar a través de una cuenta y funciona a través de tu dirección feed. Es curiosa y muestra las posibles copias. Sólo la indico como curiosidad.

■ FairShare Es un servicio online (muy utilizado) que ayuda a encontrar los contenidos basados en el feed. Es muy recomendable.

- Para registrarnos hay que ingresar en FairShare.cc y copiar la URL de nuestro feed en la caja de texto y click en Next.

- Se elige la licencia que más se adapte a las necesidades de cada usuario:

- Se crea una cuenta y se hace el registro pertinente:

- Se pincha en el icono de color naranja y se elige la primera opción:

- A contiuación recibiremos un correo para activar la cuenta. Una vez realizado, después de unas 8 horas, se recibirán notificaciones vía feed de copias realizadas en las distintas webs (nombre de la web, palabras copiadas, título del post...).

► Fórmula que puede ser de utilidad para evitar "copias" o que se utiliza por "motivos varios" a elección del administrador del blog:

Decidir como se desea mostrar a través de los lectores de feed la información de los posts.

Para manipularlo basta con seguir las instrucciones que se muestran en las siguientes fotos:
Configuración - Feed del sitio - Permitir feeds del sitio y elegir aquella que mejor se adapte a cada cual.

Aquí se muestran las elecciones que da Blogger:

► Existen multitud de scripts a colocar en la plantilla del blog que permiten desde evitar "copiar/pegar texto e imágenes" hasta seleccionar partes del mismo que no se desean difundir.

Para usarlas hay que tener en cuenta que no siempre funcionan en todos los navegadores. Su uso hará que se denoten incompatibilidades con librerías de scripts que se usan para decorar o dar más facilicidad de conducción dentro de la web: scripts JQuery y la librería sriptaculous.
Tener en cuenta estos detalles ayudan a tomar una decisión. La que cada administrador del blog precise.

► Blogger y su política de privacidad que apunta en un comentario un empleado de Google en el Foro Ayuda de Blogger

Fotografías, escritos, poemas, posts de un blog, etc. son materiales en los que muchos invertimos tiempo y esfuerzo. Muchos de ellos son reflexiones de un momento y muchos otros son obras de arte fruto del esfuerzo y la dedicación del autor. Todos ellos son únicos hasta el momento en el que son copiados. Cosa que pasa más a menudo de lo que desearíamos y cosa que se convierte en un dolor de cabeza para el autor.

Desde Blogger y desde Google en general nos tomamos este tema muy seriamente, y para ello tenemos mecanismos para evitar que dichas situaciones ocurran. Cualquier material fruto de tu creación está inmediatamente protegido por leyes de protección de los derechos del autor. En el caso específico de Blogger seguimos la ley DMCA estadounidense. En el caso que te encuentres en una situación de violación de tus derechos de autor, te recomendamos que sigas las siguientes instrucciones:

1. En el caso que te hayan copiado tu material en un blog de Blogger, puedes informarte en la página "Blogger DMCA" http://www.google.es/blogger_dmca.html. En dicha página encontrarás un formulario para realizar la reclamación pertinente.

2. En el caso que tu material de Blogger haya sido copiado en una propiedad web externa a Blogger, no hay ningún mecanismo que desde Blogger/Google podamos usar con lo que nuestra recomendación es que te pongas en contacto con el propietario de dicha propiedad web o con las autoridades pertinentes.

Os animo a reclamar vuestros derechos cuando sea necesario, al mismo tiempo que espero que no os desaniméis en crear todo este fantástico contenido que nos enriquece como personas cada día.

Atentamente,

Gerard

Muchas veces es cuestión de probar y decidir que es lo que más conviene a cada cual.

Actualización: (1 septiembre 2010)

■ Plagiarism Detect

Existen dos opciones: alta con una cuenta gratuita y otra fórmula de pago que mejora el servicio original.
Para su uso óptimo con la fórmula gratis se selecciona un texto con un máximo de 100 palabras; aquello básico para hacerse una idea de quien copia.

Si se opta por la opción de pago, se pueden subir artículos/posts/entradas en su totalidad o la plantilla para buscar muchos más buscadores recibiendo los resultados vía mail.

■ DOC Cop

Es la herramienta más completa y sencilla en su uso. Se pueden subir documentos de hasta 100.000 palabras y hasta webs enteras.
Lo esencial es abrir una cuenta para que después la información sea recibida vía mail tanto en formato .doc, .html o .docx. (Sus informes son detallados.)

■ Search engine SPAM detector
Herramienta de rastreo de todas las páginas que componen el sitio Web en busca de lo que los motores de búsqueda consideran spam.

Evitar las copias o plagios en tu blog. Consejos y listado de webs

Bloquear selección de textos en Blog. Evitar copiar.

Bloquear Arrastrar y soltar el contenido del blog.

Bloquear CTRL + C en Blog. Evitar Copiar.

Bloquear teclado PC en blog o web. Evitar copiar.

Eliminar menú botón derecho del ratón en blog o web. Evitar copias

Copiar texto e imágenes de páginas protegidas
No copiar post o entradas en blog o web. Evitar copias

► Escribir un e-mail a Blogger:

Si el contenido que te copian está alojado en un blog de Blogger suele funcionar usar el formulario de Ayuda Google.

(Por ahora dejo aquí este tema; un apunte más)

Añadir colores, modificar tamaño y propiedades del texto son unas de las opciones que hay si optas por colocar en tu blog el Buscador que proporciona Blogger como gadget "Cuadro de Búsqueda".

En una entrada anterior expliqué de forma sencilla como eliminar la publicidad de Google en el buscador.

Siguiendo con esa entrada añado nuevos elementos para personalizarlo, hacer que haga juego con la decoración del blog y contestar a LadyMarian.

0. Guardar siempre plantilla. ¡¡¡Nunca aventurarse a cambiar elementos sin una copia previa!!!!!

1. Escritorio - Diseño - Elementos de página - Añadir un gadget y lo seleccionamos:

2. Decidimos donde cada cual quiere buscar la información:

3. Ya añadido el gadget a nuestra plantilla queda algo similar a:

4. Ir a Diseno - Edición HTML - Tildar "Expandir plantillas de Artilugios"

5. Apretamos a la vez las teclas Ctrl+F y buscamos el código:

6. Una vez encontrado, ( ¡¡¡¡ojo!!!!!! se coloca ANTES), debemos copiar el siguiente código:

a) Si sólo quieres eliminar la frase ”con la tecnología de Google” coloca sólo


.gsc-branding-text, .gsc-branding-img-noclear {

display:none;

}

b) Si además quieres cambiar las propiedades del botón "Buscar", añade al código anterior lo siguiente:


input.gsc-search-button {

color: #FFF;



border: 1px solid #ff0084;

}

* Aquí varias el color, el fondo y el borde del botón.

* También es posible modificar las propiedades del texto añadiendo nuevos códigos (pej: font-weight:bold; font-size: 13px. Colocar una imagen de fondo (background: url [aquí-tu-imagen] no-repeat), añandiendo otros atributos como “height” y “width” (un botón debe tener aproximadamente 60×20 píxeles).

* Para hacer más ancho el botón se puede añadir las opciones "padding" tal y como se muestra en el ejemplo:

input.gsc-search-button { padding-top:10px; padding-bottom: 10px; }

c) Si quieres transformar la caja del buscador se añade:

input.gsc-input { color: #ff0084; }

* Aquí puedes cambiar el color del texto, y también el fondo, pero no el borde.

* Si deseas agrandar el ancho del buscador el código sería:

input.gsc-input { padding-top:7px; padding-bottom: 7px; }

Ejemplo: Mi buscador, situado en la columna de la derecha, tiene el siguiente código...

.gsc-branding-text { display:none; } .gsc-branding-img-noclear { display:none; } input.gsc-search-button { color: #B40404; font-weight:bold; font-size: 13px; border:2px ridge #8A0808; padding-top: 1px; padding-bottom: 1px; } input.gsc-input { padding-top: 7px; padding-bottom: 7px; color: #000000; font-size: 17px; font-weight:bold; background: #F35D5D; }

■ Web donde consultar el cuadro de colores para los fondos y bordes de tu buscador.

Recordar que en este truco, (y siempre), se pueden hacer tantas "Vistas Previas" como se deseen mientras decidimos colores, tamaño...
Una vez dado con aquello que nos guste sólo restará "Guardar plantilla".

Fuente: Claudia

(Un apunte personal más para no olvidar)

********Ampliación para modificar el buscador:

- Este blog: es el buscador interno
- Acceso desde aquí: busca en las entradas visibles, enlaces dentro de esas entradas, - listas de sitios o listas de enlaces
- Internet: es un buscador genérico
- Listas de blogs y enlaces: agrega la posibilidad de buscar en todos los sitios agregados al blogroll

Una vez que definimos esto, lo agregamos y lo ubicamos donde queremos que se muestre.

Por defecto, leerá los datos de nuestra plantilla y se adaptará a las características gráficas de nuestro sitio. Veremos el cuadro de búsqueda y nada más. De manera automática, se añadirá un DIV oculto sobre el área de posts que es donde se mostrarán los resultados:


<div id="uds-searchControl">

  .......

</div>

Si vamos a la plantilla y expandimos los artilugios veremos el código comenzando con algo así:


<b:widget id='CustomSearch1' locked='false' title='' type='CustomSearch'>

<b:includable id='main'>

  <!-- el título igual que cualquier otro widget -->

  .......

  <!-- el código en si mismo -->

  <div class='widget-content' style='width:95%'>

    <div expr:id='data:widget.instanceId + "_form"'>

      <span class='cse-status'><data:loadingMsg/></span>

    </div>

  </div>



  <!-- y aquí comienza lo interesante -->

  <!-- override gsearch.css -->

  <style type='text/css'>

    #uds-searchControl .gs-result .gs-title, #uds-searchControl .gs-result .gs-title *, #uds-searchControl .gsc-results .gsc-trailing-more-results,

#uds-searchControl .gsc-results .gsc-trailing-more-results * {color:<data:linkColor/>;}

    #uds-searchControl .gs-result .gs-title a:visited, #uds-searchControl .gs-result .gs-title a:visited * {color:<data:visitedLinkColor/>;}

    #uds-searchControl .gs-relativePublishedDate, #uds-searchControl .gs-publishedDate {color: <data:dateColor/>;}

    #uds-searchControl .gs-result a.gs-visibleUrl, #uds-searchControl .gs-result .gs-visibleUrl {color: <data:urlColor/>;}

    #uds-searchControl .gsc-results {border-color: <data:borderColor/>; background-color: <data:backgroundColor/>;}

    #uds-searchControl .gsc-tabhActive {border-color: <data:borderColor/>; border-top-color: <data:activeBorderColor/>; background-color: <data:backgroundColor/>; color: <data:textColor/>;}

    #uds-searchControl .gsc-tabhInactive {border-color: <data:borderColor/>; background-color: transparent; color: <data:linkColor/>;}

    #uds-searchClearResults {border-color: <data:borderColor/>;}

    #uds-searchClearResults:hover {border-color: <data:activeBorderColor/>;}

    #uds-searchControl .gsc-cursor-page {color: <data:linkColor/>;}

    #uds-searchControl .gsc-cursor-current-page {color: <data:textColor/>;}

  </style>



  <!-- el ícono para editar el elemento -->

  <b:include name='quickedit'/>

</b:includable>

</b:widget>

En esa parte de STYLE, Blogger dice "override gsearch.css" y eso es lo importante y lo que lo hace distinto a tantos otros gadgets. Las características gráficas son genéricas y se cargan desde una hoja de estilo externa (gsearch.css). Para que se adapte a nuestro sitio, Blogger sobrescribe algunas propiedades y por eso lo hace allí, justo después de cargar el gadget.

Por defecto, sólo cambia algunos datos para igualar los colores de nuestra plantilla pero, nada impide agregar o modificar más definiciones.

- Lo más sencillo se explicó al inicio y era:


input.gsc-input {

  /* es el cuadro donde se ingresa el texto a buscar */

}

input.gsc-search-button {

  /* es el botón "Buscar" */

}

.gsc-branding-text {

  /* es el texto inferior "con la tecnología de"  */

}

.gsc-branding-img-noclear {

  /* es la imagen con el logo de Google*/

}

- Configurar el cuadro de resultados:

El bloque total, el rectángulo oculto donde se muestran los resultados del buscador se llama uds-searchControl así que podemos usarlo si es necesario modificar su ancho y sus márgenes:


#uds-searchControl { }

En la parte superior se muestran las solapas con las opciones que hayamos seleccionado y ese rectángulo podemos modificarlo mediante:


#uds-searchControl .gsc-tabsArea { }

Las solapas. Hay de dos tipos y en ambas podríamos establecer bordes, color y fuente de los textos, colores de fondo,...


#uds-searchControl .gsc-tabhInactive { /* son las solapas inactivas */ }

#uds-searchControl .gsc-tabhActive { /* es la solapa activa */ }

A la derecha de estas se muestra un botón que permite volver a ocultar los resultados y tiene dos definiciones:


#uds-searchClearResults { }

div.gsc-clear-button { }

Todo lo demás se encuentra dentro de un rectángulo que tiene un borde visible y un padding que separa el contenido de esos bordes:


#uds-searchControl .gsc-results { }

Los resultados en si mismos tienen cuatro definiciones a las que podemos agregarles fondos, cambiar colores y fuentes...:


#uds-searchControl .gs-result .gs-title,

#uds-searchControl .gs-result .gs-title *,

#uds-searchControl .gs-result .gs-title a:visited,

#uds-searchControl .gs-result .gs-title a:visited * { /* es el título de cada una */}



#uds-searchControl .gs-relativePublishedDate, #uds-searchControl .gs-publishedDate { /* es la fecha */}



#uds-searchControl .gs-result a.gs-visibleUrl, #uds-searchControl .gs-result .gs-visibleUrl { /* es enlace inferior */}



#uds-searchControl .gs-result .gs-snippet { /* es el resumen de las entradas encontradas */}

En esta última, se resalatan las palabras buscadas, eso se hace con una etiqueta B así que podríamos agregar algo así si quisiéramos que resaltarán de otro modo:


#uds-searchControl .gs-result .gs-snippet b { }

En la parte inferior, lo que veremos es un área de paginación llamada:


.gsc-results .gsc-cursor-box { }

En ese área, las páginas se muestran como enlaces numerados definidos por:


#uds-searchControl .gsc-results .gsc-cursor-box .gsc-cursor-page { }

y la página actual está resaltada:


#uds-searchControl .gsc-results .gsc-cursor-box .gsc-cursor-current-page { }

a la derecha, el enlace "más resultados" nos abrirá el buscador de normal:


#uds-searchControl .gsc-results .gsc-cursor-box .gsc-trailing-more-results { }

Fuente directa:VG

► Buscador interno simple:


<div align="center"><form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/><input id="search-btn" value="Buscar" type="submit"/></form></div>

Diseño ~> Elementos de la página ~> Añadir Gadget ~> HTML/JavaScript y pegar el siguiente código:

Donde 150 es la anchura de la barra de búsqueda que se puede modificar así como el color.

► Supongamos que el buscador no aparece, en su lugar aparece "Cargando..." :

Motivos:
1. Fallo en la plantilla de algún elemento fundamental.
2. Se borra algo mientras cambiamos la plantilla.
Aclarar que Blogger añade códigos, líneas a su libre albedrío.

Si no existe la línea y el buscador no carga la solución es insertarla después de <head>


<b:include data='blog' name='all-head-content'/>

Se acabó.

Breadcrums: seguir el camino en tu blog.

⇓

Para no perderte en un blog mientras navegas por él, esta fórmula es de mucha utilidad. Se trata de hacer algo similar a lo que ves en la imagen siguiente:

Según este método siempre sabrás dónte estás, y como volver atrás o ir hacia otro lado.

(Recuerdo que previamente habrá de estar eliminado el recuadro "Mostrar entradas con la etiqueta..." tal y como se indica en una entrada anterior.)

■El método a seguir es:

1. Ir a Diseno - Edición HTML - Tildar "Expandir plantillas de Artilugios"

2. Buscar la línea con Ctrl+F:

<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>

3. Unas líneas más abajo (con paciencia) aparece:


<b:includable id='main' var='top'>

4. Encima de la linea anterior añadimos este código:

<b:includable id='breadcrumbs' var='post'>



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

<p class='breadcrumbs'>

<span class='post-labels'>

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

Te encuentras en:

<a expr:href='data:blog.homepageUrl' rel='tag'>Inicio</a> >

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == "true"'>

<a expr:href='data:label.url' rel='tag'> <data:label.name/></a>

</b:if>

</b:loop>

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

> <b><data:post.title/></b>

</b:if>

</b:if>

</span>

</p>

</b:if>



</b:includable>

5. Buscamos la siguiente línea en la plantilla (unas líneas más abajo del código que acabamos de incluir):


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

Pegamos el siguiente código encima de la línea anterior:


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

Al final se coloca un código CSS para darle un poco de forma y color. Siempre antes de ]]></b:skin>

(el que está en mi blog)


.breadcrumbs {

border-bottom:1px dotted #000;

margin:2em 0 0.5em;

padding:0 0 0.5em;

}

6. Hacemos "Vista Previa".

7. Guardar plantilla.

(Fórmula antigua de Hoctro's y que todavía funciona bien. Es muy útil)

(Otro apunte más para no olvidarlo)

La frase "Te encuentras en:" o cualquiera similar irá en negrita si se coloca entre <b></b>

Los códigos del tipo < o > pueden ser sustituidos por otros caracteres básicos de HTLM

Eliminar "Mostrando entradas con la etiqueta". Consejo

⇓

Crear, Personalizar el espacio bajo la cabecera (Crosscol). Consejos

⇓

Crear un espacio debajo de la cabecera es sencillo dependiendo del código que tengamos en nuestra Plantilla o Template.
La zona inferior del header podemos colocarla para en el futuro poner imágenes, un menú, etiquetas o mil cosas más que se te ocurran.

Añado esta imagen para que se vea más claramente que se trata de "crear" un nuevo espacio, y no es aquel que podemos obtener en el cuerpo de las "Entradas del blog".

(Recuerda que se puede colocar otro espacio en la parte superior de la cabecera de forma sencilla)

El código que debiera estar en tu plantilla es el siguiente...

1. La clave está en encontar con Ctrl+F


<div id='content-wrapper'>

2. Justo debajo aparece (si la plantilla es de Blogger y dependiendo del Template)


<div id='crosscol-wrapper' style='text-align:center'>

<b:section class='crosscol' id='crosscol' showaddelement='no'/>

</div>

En este caso el menú no está habilitado para añadir el espacio. Para hacer que esté accesible y funcione como un espacio más al que añadir gadgets, sólo hay que modificar showaddelement='no' por showaddelement='yes'

Quedará de esta forma:


<div id='crosscol-wrapper' style='text-align:center'>

<b:section class='crosscol' id='crosscol' showaddelement='yes'/>

</div>

► Atención:

En muchos Templates estas líneas no aparecen. En mi caso, me he encontrado con alguno y sólo he añadido el código anterior bajo la línea <div id='crosscol-wrapper' style='text-align:center'>
(En los dos casos que he probado ha funcionado sin problemas la adición extra de los códigos).

► La siguiente pregunta es:

Una vez añadido este elemento, ¿cómo lo puedo personalizar?

Ahí está la habilidad que cada uno tenga y el uso que se le vaya a dar en el futuro.

Se le pueden añadir bordes, fondos, textos, márgenes, imágenes.....Básicamente se suelen añadir cosas de estilo con CSS antes de ]]></b:skin>

En mi caso uso el siguiente:


#crosscol-wrapper{

background-color: #bfe6ff;

margin-top:5px;

border:6px dotted #66B5FF;

padding:2px;

}

Si hubiera que añadir una imagen al fondo, otra fórmula sería:


#crosscol-wrapper{

background:#FFF;url(url-de-la-imagen);

margin-top:5px;

border:2px solid #a6c4e1;

padding:2px;

}

■ "background-color" es el color de fondo de tu crosscol; "border" expresa el tamaño del borde, el tipo de líneas que usas y el color de éste.

■ Web para cosultar códigos de colores.

► Como anotación personal:

Otra fórmula para Personalizar el crosscol es darle los mismos estilos que tiene la sidebar /* Sidebar Content
----------------------------------------------- */


/* 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;

}

■ Se trata sólo de sustituir la palabra sidebar por crosscol para que tenga las mismas características que tu columna. Y añadirse como un elemento más antes de


]]></b:skin>


/* Crosscol----------------------------------------------- */





.crosscol  {

color: $sidebartextcolor;

line-height: 1.5em;

}



.crosscol  ul {

list-style:none;

margin:0 0 0;

padding:0 0 0;

}

.crosscol  li {

margin:0;

padding-top:0;

padding-$endSide:0;

padding-bottom:.25em;

padding-$startSide:15px;

text-indent:-15px;

line-height:1.5em;

}



.crosscol  .widget, .main .widget {

border-bottom:1px dotted $bordercolor;

margin:0 0 1.5em;

padding:0 0 1.5em;

}



.main .Blog {

border-bottom-width: 0;

}

Con la última parte de la personalización del crosscol, sólo muestro que hay varias formas de hacerlo:

1. Aplicando un código CSS donde se le indica el color de fondo, bordes...
2. Dándole las mismas características que tendría tu columna o sidebar (color, títulos, formato...)

Sólo es una guía para demostrar que se pueden hacer un montón de combinaciones.

(Un apunte más para no olvidar)

Añadir espacio sobre la cabecera (header) con gadgets en blog

⇓

Buscamos que nos quede de esta forma en la zona de Diseño/Elementos de página:

El tema de añadir espacios en tu plantilla dependerá de su forma interna y diseño. No hay que perder de vista que en muchos Templates, por el diseño de la cabecera, sería una pérdida de tiempo añadirlo.
En temas de "añadir espacios" lo mejor es estar seguro del resultado que quieres obtener y qué uso le quieres dar a esa zona.

(Recuerda que se puede colocar otro espacio en la parte inferior de la cabecera "Crosscol" de forma sencilla)

1. Diseño - Edición HTML

2. Apretamos a la vez las teclas Ctrl+F para que nos aparezca el "bendito buscador de palabras"
y buscamos el código:

<div id='header-wrapper'>

3. Nos encontraremos con algo similar a:


<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='NOMBRE DE TU BLOG (cabecera)' type='Header'/>

</b:section>

</div>

4. Se trata de modificar el 1 por un 2, y no por yes.

5. Hacemos "Vista Previa" para saber si lo acepta. (I) (por pura precaución)

6. Guardar plantilla. (II)

(Apunte)

► Otras opciones:

El header es una sección que se pueden crear donde sea. Sólo hay que agregar los atributos ID y CLASS para poder establecer sus propiedades con CSS:


<b:section class='unaClase' id='unNombre' showaddelement='yes'>

</b:section>

Por defecto, el header tiene una serie de propiedades; dos de ellas fundamentales:


#header-wrapper {

margin: 0 auto;

width: valorpx;

...

}

#header {

...

}

#header-wrapper es el rectángulo total, el que dividiremos en dos partes, allí deberemos mirar el valor de la propiedad width que nos dice el ancho total disponible.

#header es un bloque interior, el que contiene la imagen o los textos y, por defecto, ocupa el mismo espacio que el bloque contenedor. Se disminuirá a una medida arbitraria, menor que el total y lo haremos flotar a la izquierda; además, agregaremos un segundo bloque que tendrá las mismas propiedades que el anterior pero, con una medida diferente y flotará a la derecha:


#header {

float: left;

width: 600px;

[... otras propiedades ...]

}

#header-derecho {

float: right;

width: 200px;

[... otras propiedades ...]

}

SIN expandir los artilugios buscamos el código:


<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

 <b:widget id='Header1' locked='true' title='nombre (cabecera)' type='Header'/>

</b:section>

</div>

Y lo modificamos, agregándole la nueva sección:


<div id='header-wrapper'>

  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

    <b:widget id='Header1' locked='true' title='nombre (cabecera)' type='Header'/>

  </b:section>

  <b:section class='header' id='header-derecho' showaddelement='yes'>

  </b:section>

</div>

Si guardamos la plantilla, veremos que esta nueva sección ya está habilitada en la solapa Elementos de la página en la derecha (encima zona sidebar) para agregar cualquier cosa.