Expandir/Contraer

Texto que se muestra o se oculta
Para hacer un menú de expandir y contraer, el cual el texto se muestre o se oculte, iremos a nuestra plantilla y buscaremos la etiqueta -/head-, y justo antes insertaremos el siguiente código:
<script src='http://blogdecesar.googlepages.com/switchcontent.js' type='text/javascript'/>

<script src='http://blogdecesar.googlepages.com/switchicon.js' type='text/javascript'>

</script>



<style type='text/css'>



.iconspan{

float: right;

margin: 3px;

cursor:hand;

cursor:pointer;

font-weight: bold;

}



/*Aca color de fondo, letra y bordes: */



.eg-bar{

background-color: #C3000D;

color: #FFFF99;

font-weight: bold;

border-top: 2px solid #FDCD09;;

border-left: 2px solid #430802;;

border-right: 2px solid #430802;;



padding: 3px;

}



</style>


el siguiente paso es ir a añadir un elemento de página -HTML-Javascript-e insertar este otro código. En este caso esto quedará visible en nuestra sidebar o barra lateral; en el caso que se quiera poner en un post, este último código tendría que ir a una entrada:
<table border="0" cellspacing="0" cellpadding="0" style="width: 400px;">



<tr><td class="eg-bar">

<span id="faqtable1-title" class="iconspan"><img src="http://godlike.cl/up/im/33/minus.gif"/></span>

TITULO

</td></tr>

<tr><td>

<div id="faqtable1" class="icongroup2">

CONTENIDO

<tr><td class="eg-bar">



<span id="faqtable2-title" class="iconspan"><img src="http://godlike.cl/up/im/33/minus.gif"/></span>

TITULO

</td></tr>

<tr><td>

<div id="faqtable2" class="icongroup2">

CONTENIDO

</div></td></tr>

<tr><td class="eg-bar">



<span id="faqtable3-title" class="iconspan"><img src="http://godlike.cl/up/im/33/minus.gif"/></span>

TITULO

</td></tr>

<tr><td>

<div id="faqtable3" class="icongroup2">

CONTENIDO

</div></td></tr>



</table>



<script type="text/javascript">

var faqtable=new switchicon("icongroup2", "div") //Limit scanning of switch contents to just "div" elements

faqtable.setHeader('<img src="http://godlike.cl/up/im/33/minus.gif"/>', '<img src="http://godlike.cl/up/im/33/plus.gif"/>')

faqtable.collapsePrevious(false)

faqtable.setPersist(true, 7)

faqtable.init()

</script>

Títulos Expandibles en Etiquetas

Para que las entradas o post aparezcan normales, pero al entrar en -Etiquetas-, los post estén ocultos y que estos mismos se pueden expandir cuando nosotros queramos, tendremos que añadir los siguientes códigos.
Pimero entramos en la plantilla edición HTML, y antes de -/head-, añadimos esto:

<script src='http://www.anniyalogam.com/widgets/hackosphere.js' type='text/javascript'></script>

<script type='text/javascript'>

function toggleIt(id) {

post = document.getElementById(id);

if (post.style.display != 'none') {

post.style.display = 'none';

} else {

post.style.display = '';

}

}

</script>




Seguidamente tendremos que buscar el texto que les muestro escrito en negro y añadir justo encima la parte de código que está en rojo:

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

<div class='post uncustomized-post-template'>

<table><tr>

<td width='40px'>

<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</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 != "item"'>

<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>



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

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

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

</b:if>

</b:if>

</b:loop>

</div>

Drop Caps

El Drop Caps consiste basicamente en hacer aparecer la primera letra de los Posts en un tamaño mayor al del resto del texto; al estilo revista o periódico.
Para implantarlo basta añadir el siguiente código en tu plantilla -HTML-, antes de :
]]></b:skin>.:


Código:

.dropcaps {

float:left;

color:#1B703A;

font-size:100px;

line-height:80px;

padding-top:1px;

padding-right:5px;

}


Luego cada vez que quieras que aparezca el -Drop Caps-, pega el siguiente código en la entrada correspondiente..., solamente cambia la letra -D-, por la que quieras:

<span class="dropcaps">D</span>

Imagen transparente

Convertir una imagen al pasar con el puntero. Gracias al estupando blog de -Cesar-.
-http://webjcp.blogspot.com-
que nos facilita el siguiente código para implantar en nuestra página:

<img

onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100"

onmouseout="this.style.MozOpacity=0.4;this.filters.alpha.opacity=40" alt="imagen transparente"

style="-moz-opacity:0.4;filter:alpha(opacity=40)" src="http://img329.imageshack.us/img329/771/webjcpow1.jpg"/>

Ejemplo:

Mostrar/Ocultar(+/-)

Este es una herramienta bastante util a la vez que queda muy bien en cualquier parte del blog, ya que su principal característica es que muestra y oculta, textos, imagenes, links, posts, y cualquier cosa que se nos ocurra y que queramos tener oculto, bien sea por su tamaño o por cualquier otra circunstancia. Para su implantación tenemos qye añadir el siguiente código:
Primeramente añadiremos lo siguiente dentro de la plantilla, en el CSS:

.commenthidden {display:none}

.commentshown {display:inline}


Segundo colocamos este script justo antes de -/head-

<script type="text/Javascript">

function togglecomments (postid) {

var whichpost = document.getElementById(postid);

if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }

} </script>


Tercero, donde queramos situar el efecto añadiremos lo siguiente:

<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')">+/- Título</a><br />

<div class="commenthidden" id="UniqueName"></div>




La parte a ocultar hay que ponerla justo antes del -/div-, de la tercera parte.
También podemos poner el título que más nos guste a continuación de los signos +/-.
Asímismo si quisieramos añadir más segmentos dentro de la misma aplicación solamente tendríamos que ir añadiendo la parte de la fase tercera, pero habría que cambiar la parte que dice UNIQUENAME, por otro nombre diferente, por cada módulo que añadamos.