sabato 18 ottobre 2008

Blogger Hack: Creare anteprima post - Spezzare un post

A volte post troppo lunghi possono rendere la "Home Page" del vostro blog troppo disordianta, una cosa che potete fare è spezzare il vostro Post, cosi da visualizzare subito un anteprima (incipit) e edi visualizzare il resto dell articolo conu un semplice click.
Il risultato sarà come quello che vedete nella mia HomePage.
Vediamo come:
Prima di iniziare, come al solito, fate una copia del vostro attuale codice cliccando su Layout -> Modifica HTML -> Scarica modello completo.
Fatto questo andate in Personalizza -> Layout -> Modifica HTML cliccate su "Espandi i modelli widget" e con la funzione trova (CTRL+F) cercate questo codice
</head>

e subito prima incollateci tutto il codice qua sotto:
<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}


function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
spans[i].style.display = 'none';
}
}

</script>
</b:if>

Ok, ora cercate questa riga
<b:includable id='post' var='post'>

questa è un po difficile, ora dovrete aggiungere tutte le parti mancanti in rosso
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

<div class='post-header-line-1'/>

<div class='post-body'>

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

<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Continua a leggere...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Chiudi finestra...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>


<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Perfetto, ora salvate.
Manca un ultima modifica per completare l'opera, andate in Impostazioni -> Formattazione -> (scorrete la pagina fino al fondo e troverete) Modello post -> dentro il rettangolo mettete
metti quello che vuoi appaia in home
<span id="fullpost">
Il resto lo nascondi qui :)
</span>

Salvate ed il gioco è fatto :)
P.S.Per postare al meglio dovete scrivere il post usando Modifica Html anzichè Scrivi

Fonte: Cosedalmiomondo

1 commento:

Post "forse" correlati