8 Μαΐ 2008

Blogger Tip: Expandable Posts

Για να δημιουργήσετε expandable post στο blogger (.blogspot.com) ακολουθήστε τα παρακάτω βήματα:

1. Πανόπτης -> Διάταξη -> Επεξεργασία HTML

2. Λήψη πλήρους προτύπου (σημαντικό - για επαναφορά του template σε περίπωση αποτυχίας)

3. Κλικ στο "Επέκταση προτύπων γραφικών στοιχείων"

4. Βρείτε μέσα στην HTML,τον κώδικα </head>

5. Ακριβώς πριν από αυτό το tag </head>, αντιγράψτε τον παρακάτω κώδικα
<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>

6. Βρείτε τον κώδικα <data:post.body/> .body id="a8wr27">

7. Αντικαταστήστε τον με τον παρακάτω κώδικα:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>

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


<span id='showlink'>
<a expr:href='data:post.url'>Read More...</a>
</span>
<script type='text/javascript'>
checkFull(&quot;post-&quot; + &quot;<data:post.id/>&quot;);
</script>
</b:if>


8. Αν χρησιμοποιείτε a standard blogger template, μπορεί να χρειαστεί να κάνετε το παρακάτω βήμα:
Βρείτε τον κώδικα <div class='post-body'> και αλλάξτε τον με αυτόν:
<div class='post-body' expr:id='"post-" + data:post.id'>

9. Τέλος, πηγαίνετε στις Ρυθμίσεις -> Διαμόρφωση -> Πρότυπο ανάρτησης, και προσθέστε τον παρακάτω κώδικα:
Type Your Post Summary Here
<span id="fullpost">
The Remainder of Your Post Goes Here
</span>
Κάθε φορά που γράφετε ένα post, αντικαταστήστε το "Type Your Post Summary Here" 
με όσο κείμενο θέλετε να φαίνεται περιληπτικά,
και αντικαταστήστε το
"Τhe Remainder of Your Post Goes Here"
με το υπόλοιπο τμήμα του Post που θα εμφανίζεται ως ανάπτυγμα.

[Πηγή]

Δεν υπάρχουν σχόλια: