Automatic Read More Function in Blogger Posts - Αυτόματο "Διαβάστε περισσότερα..." (UPDATE 2011)

Γεια σας.

Το πιο σημαντικό και διαχρονικό blogger trick είναι ο διαχωρισμός των αναρτήσεων με τη λειτουργία του "Read More".Δηλαδή στην αρχική σελίδα να μην φαίνεται όλη η ανάρτηση αλλά ένα μέρος της και για να εμφανιστεί το υπόλοιπο θα πρέπει ο ενδιαφερόμενος να πατήσει το Read more.
Όποιος θέλει να δει πως θα βάλει το απλό read more στο blog του ας κοιτάξει στο http://johnpatrablog.blogspot.com/2009/07/read-more-blog.html.
Σήμερα θα μιλήσουμε για ένα άλλο θέμα.
Παρακάτω θα βρείτε την απάντηση στην ερώτηση:
"Πώς θα κόβονται οι αναρτήσεις μου αυτόματα?"
Ναι υπάρχει κι αυτή η δυνατότητα.
Προσφέρει 2 πλεονεκτήματα και ένα μειονέκτημα.
Πλεονεκτήματα:
1)Δεν χρειάζεται να κόβεις τις αναρτήσεις σου "χειρονακτικά" αλλά κόβονται αυτόματα.(δηλαδή τα <span class="fullpost">
</span> είναι άχρηστα'δεν θα τα βάζετε εσείς αλλά προστίθονται αυτόματα)
2)Ρυθμίζεις στους πόσους χαρακτήρες θέλεις να κόβονται κι έτσι όλες οι αναρτήσεις σου είναι ομοιόμορφες.(όπως σε μένα)
Μειονεκτήματα:
1)Στο απλό read more καθορίζεις ο ίδιος μέχρι πιο σημείο θα είναι στην αρχική σελίδα η αναρτηση σου.Στο αυτόματο καθορίζεται αυτόματα.

Πάμε τώρα να δούμε πως θα το βάλετε αυτό.

Κάνουμε log in στον blogger account μας,πάμε διάταξη και μετά επεξεργασία html.
Πατάμε "Επέκταση προτύπων γραφικών στοιχείων"
Με τη βοήθεια του ctrl+F βρίσκουμε το

</head>

Αμέσως από πάνω του βάζουμε τον παρακάτω κώδικα:

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


//]]>
</script>

Εδώ όπως θα δείτε, μπορούμε (και πρέπει ίσως ) να χρησιμοποιήσουμε 'μεταβλητές' παραμέτρους στον παραπάνω κώδικα. Εδώ σας εξηγώ ποιές και τι κάνει η κάθε μία:

var thumbnail_mode = "float" ; — Με αυτήν την μεταβλητή, αποφασίζετε εάν το εικονίδιο που θα εμφανίζεται στην ανάρτησή σας, θα κάνει "float" αριστερά (float), ή θα εμφανίζεται απλά 'άτακτα΄ στην ανάρτηση (οπότε αλάξτε το και κάντε το: no-float).
summary_noimg = 250; — Προσδιορίζει πόσοι χαρακτήρες θα εμφανίζονται σε μια ανάρτηση, η οποία δεν έχει εικόνα (no images/thumbnail) Στην περίπτωσή μας, είναι 250.
summary_img = 250; — Προσδιορίζει πόσοι χαρακτήρες θα εμφανίζονται σε μια ανάρτηση, η οποία έχει εικόνα (with images/thumbnail) Στην περίπτωσή μας, είναι 250 και πάλι.
img_thumb_height = 120; — Εικονίδια (Thumbnails) Ύψος (height) σε pixels.
img_thumb_width = 120; — Εικονίδια (Thumbnails) Πλάτος (with) σε pixels.

Ακόμα δε τελειωσαμε.

Βρείτε τον παρακάτω κωδικό:

<data:post.body/>

Αντικαταστήστε τον παραπάνω κωδικό με τον κάτω:

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary-" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary-<data:post.id/>");</script>
<a class='readmore' expr:href='data:post.url'>Read more »</a>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Το "Read more »" μπορείτε να το αλλάξετε με κείμενο της αρεσκείας σας.


Βρείτε τώρα το </b:skin> και πριν από αυτό επικολλήστε το παρακάτω:

a.readmore {
/* CSS properties go here */
}

Αποθηκεύστε το πρότυπο σας και είστε έτοιμοι!

Πηγές: Κωδικοί και μέρος της ανάρτησης από http://nikos63.blogspot.com/

Copyrights: http://bloggertips.gr/