Para utlizar no seu blog, siga estes passos:
Cole este código antes de ]]></b:skin>
.maintext {padding:1em; border:1px solid #ddd; margin:0 20px 10px 0;}
.maintext p {padding:5px 0 0 0; margin:0;}
.maintext p.bold {font-weight:bold;}
.maintext h2 {margin:0; padding:0;}
.switch {display:block; font-size:1px; width:16px; height:16px; background:url(icone.gif); cursor:pointer;}
.off {background:url(icone.gif);}
.hide {display:none;}
.show {position:absolute; display:block; width:550px; background:#fff; border:1px solid #000; padding:10px; margin-top:5px; z-index:500;}
.show img {float:left; padding:0 10px 10px 0;}
Sendo que onde está icone.gif, substitua pelo link da imagem a ser utilizada, onde está 550px, especifique a largura desejada para a caixa com o restante da postagem e onde está :#fff, a cor da caixa.
2- Cole este script antes de </head> e salve as modificações.
<script>
onload = function() {
var e, i = 0;
while (e = document.getElementsByTagName ('B') [i++]) {
if (e.className == 'switch') {
e.onclick = function () {
this.className = this.className == 'switch' ? 'switch off' : 'switch';
this.nextSibling.className = this.className == 'switch' ? 'hide' : 'show';
}
}
}
}
</script>
3- Vá para Configurações->Formatação e, no final da página, em Modelo de Postagem, cole este código e salve:
<div class="maintext">
Resumo do texto aqui
<b class="switch"></b><div class="hide">
Restante do texto aqui
</div>
</div>
E é isso. Todas as vezes que você iniciar uma postagem (no modo Editar HTML) o código aparecerá e basta você dividir o texto conforme está indicado.
Obs:Eu não conseguí fazer com que funcione para postagens já publicadas