1. Se añade la librería de Javascript - Prototipe y Scriptculous.
JavaScript se carga una vez en la plantilla antes de </head> lo que muestra el código API de Google:
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.1.0");
google.load("scriptaculous", "1.8.3");
</script>
<!-- Prototype y Scriptaculous-->
Es necesario revisar las versiones son actualizadas en Google Apis. Aunque los efectos que estemos usando funcionaran es aconsejable actualizarlos.
Si ya está implementado por otros trucos se obvia el paso.
2. Diseño>Edición de HTML>expandimos artilugios
- Control+F y buscamos algo similar a...
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
3. Debajo añadimos:
<div id='masmenosArchivos'><a href='#' onclick='Effect.toggle("ArchiveList","slide"); return false'> [+/-] ARCHIVOS</a></div>
4. Debajo encontraremos:
<div id='ArchiveList'>
5. Se sustituye por:
<div id='ArchiveList' style='display:none;'>
6. Guardar.
7. Control+F y buscamos ]]></b:skin>
8. Antes de ]]></b:skin> se añaden los estilos para los códigos.
.BlogArchive #ArchiveList ul ul li {
margin : 0px !important;
padding: 5px 0px 0px 0px !important;
text-indent: -15px !important ;
}
#BlogArchive1 a {
font-weight:bold;
color: #000;
font-size: 12px;
text-decoration:none;
width: 100%;
}
#BlogArchive1 a:hover{
font-weight:bold;
color: #fff;
font-size: 12px;
text-decoration:none;
}
Notas:
- En "#BlogArchive1 a" modificamos el color del título;el tamaño de la fuente con font-size.
- En "#BlogArchive1 a:hover" tenemos el color del título al pasar el cursor por encima; también el tamaño de la fuente usada.
- Los enlaces de archivos se mostrarán tal y como tenemos configurado el color de enlaces.
- Siguiendo estos pasos nos aparecerá en la sidebar un texto de [+/-] ARCHIVOS que probablemente veamos repetido en la sidebar.
- No ocurre nada porque vamos a suprimir el primero: En plantilla de diseño o en la herramienta de archivos si estamos logueados podemos editar la etiqueta de archivos, eliminar el título... guardamos los cambios.
- Podemos sustituir el texto por cualquier otro o por una imagen, para ello buscamos el código del paso 3 y sustituimos el texto por cualquier otro o por una imagen:
<img src="url-imagen" />
Si deseamos que la imagen reúna los mismos estilos que el resto de los títulos:
Buscamos los estilos de los títulos de la sidebar, normalmente en sidebar h2 y copiamos los estilos (en color rojo)
.sidebar h2{
margin:0;
margin: 1.6em 0 .5em;
padding: 4px 5px;
color:#000;
font-size:12px;
font-weight:bold;
text-decoration:none;
}Nos situamos justo antes de </head> y añadimos lo siguiente:
<style type='text/css'>
#masmenosArchivos {
aquà pegamos los estilos de sidebar h2 marcado en color rojo justo encima y se pueden modificarlos estilos
#masmenosArchivos a {
color: #CCC;
}
#masmenosArchivos a:hover {
background: none;
color:#eee;
}
</style>
Fuente:Gema
