25 Ιουνίου 2009



35 Πώς βάζουμε το Read more στο blog μας (Update 2011)

Yπάρχουν εκει έξω, άπειρα ‘Read More’ Scripts για το Blogger. Δεν δημιουργούν όμως όλα τους αυτόματα το ‘Read More’ μαζί με thumbnails απο την κάθε ανάρτηση.
Αυτό ο τύπος Script, είναι αυτός που επέλεξα για το δικό μου Blog και που θα σας δείξω σήμερα πώς να τον εγκαταστήσετε κι εσείς, όσοι το επιθυμείτε, στο blog σας.

Εγκατάσταση και Προσαρμογή

1. ΚΑΝΤΕ ΟΠΩΣΔΗΠΟΤΕ (ΚΑΙ ΑΜΕΣΩΣ ΤΩΡΑ ΠΟΥ ΔΙΑΒΑΖΕΤΕ ΑΥΤΕΣ ΤΙς ΓΡΑΜΜΕΣ) BACKUP ΤΟ ΠΡΟΤΥΠΟ ΣΑΣ.

2. Πατήστε Ctrl και F ταυτόχρονα, για να ανοίξει το 'ψαχτήρι' σας κάτω στην μπάρα.

Θα χρησιμοποιήσουμε δύο βασικούς HTML κώδικες, και έναν μικρότερο, και που θα προσθέσουμε στο template μας, ώστε το ‘Read More’ Script να λειτουργήσει κανονικά. Θα τα προσθέσουμε πατώντας το το ‘Edit HTML’ στην "Διάταξη" του Blogger, και με μαρκαρισμένο το "Επέκταση προτύπων γραφικών στοιχείων".
— Ο πρώτος κώδικας που χρειάζεται να τοποθετήσουμε, είναι το ίδιο το script, και θα το τοποθετήσουμε "ΠΡΙΝ" το </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.
— Ο δεύτερος τώρα κώδικας που θα προσθέσουμε, θα αντικαταστήσει το προκαθορισμένο post body μας. Ψάξτε και βρείτε λοιπόν αυτό το tag: <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 »" που βλέπετε μέσα στον κώδικα, είναι η λέξη-Link που θα εμφανίζεται κάτω απο κάθε σας ανάρτηση, για να πατήσει κάποιος επάνω και να δεί ολόκληρη την ανάρτηση για να την διαβάσει.
Το ‘Read More’ είναι η πιο συνηθισμένη φράση, αλά μπορούμε ελεύθερα να την αλάξουμε όπως θέλουμε, για παράδειγμα να την αλάξουμε σε ‘View full post,’ ή σε ‘More,’ ή οποιοδήποτε άλλο Text, ακόμη και στα ελληνικά.
Μπορούμε μάλιστα να χρησιμοποιήσουμε κάποιο εικονίδιο αντί για text.
-
Τέλος, απομένει αυτό το τελευταίο βήμα. Το μόνο που χρειάζεται, είναι να προσθέσουμε τον παρακάτω κώδικα CSS, πρίν απο το </b:skin> όπως ακριβώς τον βλέπετε:




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



Κάντε "ΠΡΟΕΠΙΣΚΟΠΙΣΗ" και αν δεν δείτε κανένα λάθος, και είναι όπως το θέλετε, πατήστε "ΑΠΟΘΗΚΕΥΣΗ".
..αυτό ήταν όλο, enjoy!



"Εάν σε ενδιαφέρουν οι αναρτήσεις μου, έχε υπ' όψη πως μπορείς να εγγραφείς στο RSS feed του Blog. Μπορείς επίσης να κάνεις εγγραφή με email, λαμβάνοντας απ ευθείας κάθε μου ανάρτηση στα Εισερχόμενά σου, κάνοντας εγγραφή στο Newsletter μου
Σε ευχαριστώ που με διαβάζεις,"

Νικόλας




Print this post



Related Posts :



35 σχόλια:

Atlas music είπε... Best Blogger Tips

Τέλειο ….!!!!!!!!


Admin είπε... Best Blogger Tips

ΝΙΚΟΛΑ ΤΕΛΕΙΟ ΑΛΛΑ ΠΩΣ ΚΑΝΟΝΙΖΟΥΜΕ ΕΜΕΙΣ ΤΟ ΜΕΓΕΘΟΣ ΤΗΣ ΦΩΤΟ;;ΑΝΤΙ ΓΙΑ 120*120...
ΕΥΧΑΡΙΣΤΟΥΜΕ CITYPRESS-GR.BLOG


AATON είπε... Best Blogger Tips

Άλλαξε το 120 χ 120 σε ότι εσύ θέλεις, (π.χ. 150χ150, ή 125χ 155, πειραματίσου και διάλλεξε, συνηστώ μόνο να μην την κάνεις πολύ μεγάλη)


christy and the city είπε... Best Blogger Tips

να ρωτησω κατι?
το εχω αναγκη πως μπορω να μεγαλωσω τις στηλες μου?
να φαινονται πιο μεγαλες?
συγκεκριμενα την στηλη των αναρτησεων υπαρχει καποιος κωδικος και για εκει???

θα περιμενω απαντηση!
ευχαριστω προκαταβολικα


NANTIA-BAD RELIGION 7 είπε... Best Blogger Tips

Όποια ανάρτηση και να κάνεις Νίκο μου,είναι χρήσιμη,όπως και η βοήθειά σου επίσης.
Πρός ένδειξη ευγνωμοσύνης για ό,τι έχεις προσφέρει μέχρι τώρα,πέρασε αν θέλεις να παραλάβεις το βραβείο σου.Είναι το ελάχιστο σαν ευγνωμοσύνη πρός το έργο σου που μπορώ να προσφέρω αυτή τη στιγμή.
Με τιμή...


Dorothea είπε... Best Blogger Tips

Νίκο σ’ευχαριστώ!!! Την περίμενα αυτή την ανάρτηση πως και τι! Να’σαι καλά και καλό Σ/Κ να’χετε!


Ανεμοδούρα είπε... Best Blogger Tips

Χρησιμότατο όπως πάντα Νίκο και αναλυτικά δοσμένο.

Καλό Σ/Κ και να περνάς καλά :))


STAKAS είπε... Best Blogger Tips

Πραγματικά οι πιο χρήσιμες πληροφορίες να σαι καλα φίλε!!


kostas messinis είπε... Best Blogger Tips

αν καποιο blog ειναι στο pathfinder που θα βαλω το δευτερω μερως του κοδικα


bollywood-greece είπε... Best Blogger Tips

Πως γίνεται το κείμενο να στοιχιζεται με την εικόνα στο read more.. Σε μένα εμφανίζεται πάνω η εικονα και κατω το κείμενο και μόνο στο οταν ανοίγει το το ποστ σε περισσότερα εμφανίζει στοιχισμένη εικονα και κείμενο..


AATON είπε... Best Blogger Tips

Θα απαντήσω επιλεκτικά για να μην μπερδευτούμε.

*** christy and the city, Γίνεται απο τον CSS κώδικα του προτύπου σου, αλα δεν θα σου συνιστούσα να τον πειράξεις μόνη σου, εκτός αν κατέχεις απο αυτά. Για να μεγαλώσεις την στήλη των αναρτήσεων, πρέπει να μικραίνεις ανάλογα τις άλλες στήλες της μπάρας. Το μήκος του ιστολογίου σου, ότι κι αν κάνεις, πρέπει στο τέλος να έχει πάντα το ίδιο πλάτος. Πρέπει να κάνεις λοιπόν απλούς μαθηματικούς υπολογισμούς, ώστε το σύνολο πάντοτε να έχει το ίδιο πλάτος σε pixels.

*** kostas messinis, καλέ μου φίλε, αν σου πώ ότι απο Pathfinder δεν έχω την παραμικρή ιδέα, θα μου θυμώσεις;

*** bollywood-greece, και σε μένα το ίδιο δείχνει, είναι ζήτημα CSS ρυθμίσεων. Θέλει όμως τόσο ψάξιμο, που δεν υπόσχομαι τόσο γρήγορα κάποια απάντηση, σε βεβαιώνω όμως πως όντως θα το ψάξω, έχεις τον λόγο μου.

Ευχαριστώ όλους σας για τα σχόλιά σας, Χρόνια σας πολλά.


troleatzis είπε... Best Blogger Tips

Νικο καλησπερα .Εχω κολησει ασχημα καιθελω βοηθεια. Δεν μορω να βαλω α γραμματα δεξια της φωτογραφιας.Μετα την αποθηκευση μου βγαζει "no-float" ;
Αν θελεις ριξε μια ματια www.troleatzis.com και πες μου.
Σεευχαριστω εκ των προτερων.


AATON είπε... Best Blogger Tips

Θα το κοιτάξω, κι εμένα έτσι τα έβγαζε, και έκανα μόνος αλλαγές. Θα έχεις σύντομα απάντηση


Μακεδόνας είπε... Best Blogger Tips

Νικο σε χαιρετω.Με εβαλε ο troleatzis να παρακολουθω ποτε θα μας βρεις λυση.Παντως πρεπει να εχεις ριξει πολυ δουλεια για το δικο σου.Συνεχισε, για να διευκολυνεις εμας τους ασχετους.Εμεις απο τη μερια μας σε ευχαριστουμε.


troleatzis είπε... Best Blogger Tips

Νικο σε ευχαριστω που επισκευθηκες τη σελιδα μας.
Ειναι ειδικου περιεχομενου και προσπαθουμε να εντοπισουμε και αν γινεται να λυσουμε καποια προβληματα της καθημερινοτητας.
Μας εχεις βοηθησει πολυ στο στησιμο του blog και αν μπορουσες να με βοηθησεις και στο παραπανω προβλημα με τη θεση της εικονας στο read more τι να πω ,οταν ερθεις ελλαδα μια μερα ρεζερβε ενα τρολλευ για ξεναγηση της Αθηνας.


ypoga είπε... Best Blogger Tips

αατον και συγγνωμη για τον υπερβάλον θαυμασμο αλλα εισαι και ΓΑΜΩ με το . ευχαριστώ και παλι


Κώστας M. είπε... Best Blogger Tips

Καλησπέρα Νίκο,
τα κολπάκια σου πολύ χρήσιμα...
Θέλω να ρωτήσω το εξής: ο συγκεκριμένος κώδικας σταμάτησε να είναι χρησιμοποιήσιμος; γιατι τον έχω βάλει στο blog αλλά δεν δουλεύει πλέον.


chris είπε... Best Blogger Tips

εγω μολις τον εβαλα και λειτουργει μια χαρα


Ανώνυμος είπε... Best Blogger Tips

Τέλειο! Μόλις το εφάρμοσα κ το έφτιαξα στα μέτρα μου! Ευχαριστώ!!! (vickyha)


panserraikos5 είπε... Best Blogger Tips

TA ΚΑΝΩ ΕΤΣΙ ΑΚΡΙΒΩΣ ΡΕ ΣΕΙΣ ΚΑΙ ΜΟΥ ΒΓΑΖΕΙ : Δεν ήταν δυνατή η ανάλυση του προτύπου σας, επειδή δεν είναι σωστά μορφοποιημένο. Βεβαιωθείτε ότι όλα τα στοιχεία XML είναι σωστά κλεισμένα.
Μήνυμα σφάλματος XML: The element type "b:skin" must be terminated by the matching end-tag "".


panserraikos5 είπε... Best Blogger Tips

ΚΑΙ ΕΠΕΙΔΗ ΤΑ ΕΚΑΝΑ ΞΕΧΩΡΙΣΤΑ ΤΑ ΒΗΜΑΤΑ,ΤΟ ΠΡΟΒΛΗΜΑ ΜΟΥ ΕΙΝΑΙ ΣΤΟΝ ΠΡΩΤΟ ΚΩΔΙΚΑ!


AATON είπε... Best Blogger Tips

Αυτόν άλλαξε φίλε μου, τους άλλους άφησέ τους όπως είναι.


caeser είπε... Best Blogger Tips

Νικόλα,
κατ' αρχήν συγχαρητήρια για τα ενδιαφέροντα tips&tricks που βάζεις στο blog σου και βοηθάνε πολύ κόσμο!

Θα ήθελα να σου πω για ένα προβληματάκι που αντιμετωπίζω και αν μπορείς να βοηθήσεις θα με κάνεις ακόμα πιό χαρούμενο blogger! :-)

Έκανα ακριβώς αυτά που περιγράφεις σε αυτό το post, με πολύ προσοχή, και το αποτέλεσμα στην προεπισκόπιση έδειξε ότι όλα τα posts μου στην αρχική σελίδα βγαίνουν μια χαρά, εκτός απο το τελευταία δημοσιευμένο (το πρώτο στη σελίδα δηλαδή), που στην θέση που έπρεπε να βγαίνει το κείμενο, γράφει, "Normal 0 false false false EL X-NONE X-NONE..."

Έχεις καμιά ιδέα για αυτό το πρόβλημα?


AATON είπε... Best Blogger Tips

Μήπως το κείμενο το αντέγραψες απο το Word? Αν ναι, ίσως κάπου υπάρχουν τίποτε κώδικες σαν αυτούς που μου δείχνεις.
Αν πάλι όχι, τότε κάτι με τον κώδικα του προτύπου σου μήπως, κάτι όμως που δεν μπορώ να δω, παρά μόνο σαν διαχειριστής.


caeser είπε... Best Blogger Tips

Χμμμ... ίσως να έχεις δίκιο! Το κείμενο το έβαλα στο word για ορθογραφικό έλεγχο και το τελικό copy στο blog έγινε απο εκεί. Ίσως να φταίει αυτό! Θα το ξαναδοκιμάσω!
Σ'ευχαριστώ πολύ για τη βοήθεια!


Notis είπε... Best Blogger Tips

Να ρωτήσω κάτι;;; εμένα μου παρουσίασε ένα πρόβλημα... με το read more... στην δεύτερη σελίδα και πέρα των αναρτήσεων τα δείχνει ολόκληρα χωρίς περικοπή. τι φταίει;;;


Ανώνυμος είπε... Best Blogger Tips

yaso file evxaristo gia to post to read more ... apla
exo ena mikro provlima exo kanei oles autes tis odigies otan paw na kano post ta vgazei ola sto read more kanonika vgazi kati stin arxiki selida ego thelo kapia pragmata na ta vgazei stin arxiki oxi ola sto read more exo dokimasei ta panta mipos iparxei kati sto blog to empodizei help me please 2719180@gmail.com


AATON είπε... Best Blogger Tips

Ανώνυμος, αυτό το Script δείχνει το Read More σε όλες τις αναρτήσεις ανεξαιρέτως.
Αυτό που εσυ ζητάς, γίνεται μόνο αν χρησιμοποιήσεις το More στον κειμενογράφο, χωρίς να εγκαταστήσεις τον κώδικα που δίνω εδω.


johntsip17 είπε... Best Blogger Tips

πολύ καλό ,ομως μου βγάζει 3 αναρτήσεις αν και το εχω ρυθμίσει στις 10 καμιά βοήθεια


Μας Βρήκες είπε... Best Blogger Tips

Φίλε είσαι καταπληκτικός!!
Νάσε καλά και ευχαριστώ πάρα πολύ!


zklimadiris είπε... Best Blogger Tips

γεια σου ρε νικολα με τα ωραια σου!!!!πολυ καλο φιλε δουλευει αψογα παντου..!!!καλη σου μερα..


Ανώνυμος είπε... Best Blogger Tips

ευχαριστώ πολύ, δουλεύει άψογα , τέλεια δουλειά!!!


Αnastasia είπε... Best Blogger Tips

Είσαι τέλειος!! Ευχαριστώ πολύ!! :))


EV. G είπε... Best Blogger Tips

Γειά σας!!
Έβαλα το read more και ευχαριστώ πολύ για τη βοήθεια και όντως το βγάζει μια χαρά στα posts. Το θέμα όμως είναι πως το βγάζει και σε pages που έχω δημιουργήσει ενώ δεν θα ήθελα.
Και όχι μόνο το βγάζει, αλλά εκεί δεν δουλεύει κιόλας. Γιατί;
Ευχαριστώ πολύ!!


Ioannis Alamanos είπε... Best Blogger Tips

Καλησπέρα και ελπίζω να μην ενοχλώ..Μήπως γνωρίζουμε γιατί εξαφανίστηκε το data post body και με τι έχει αν έχει αντικατασταθεί;Σε ευχαριστώ.Είμαι σε απόγνωση γιατί εν μπορώ να παραμετροποιήσω το μπλογκ μου


Δημοσίευση σχολίου

Πες πως δεν έχεις χρόνο να σχολιάσεις.. να 'χεις πάρει όμως σοβαρό ύφος, καλά;

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.

Next Next Next