Αυτοματοποιημένο "Διαβάστε περισσότερα..." με μικρογραφία εικόνας.

Ακολουθήστε τα παρακάτω βήματα με τη σειρά.

1) Σύνδεση στον λογαριασμό σας στον blogger.com και πάτε στον πίνακα ελέγχου.

2) Επιλέξτε τη "Σχεδίαση"

3) "Επεξεργασία html"

4) "Λήψη πλήρους προτύπου" για κάθε ενδεχόμενο.

5) Τσεκάρετε το κουτάκι που λέει "Επέκταση προτύπων γραφικών στοιχείων"

6) Πατήστε ctrl + F ταυτόχρονα για να ανοίξει το παραθυράκι αναζήτησης στο πρόγραμμα περιήγησής μας.

7) Εκεί μέσα γράφετε το

</head>

7) Κατόπιν κάνετε επικόλληση τον παρακάτω κώδικα πριν το κλείσιμο του 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>

Σημείωση:

Τα παρακάτω νούμερα μπορείτε να τ' αλλάξετε & να το διαμορφώσετε όπως εσείς θέλετε.

α) summary_noimg = 430; is post cut height without image =περίληψη άρθρου
β) summary_img = 340; is post cut height with image = ύψος ανάρτησης μαζι με την εικόνα
γ) img_thumb_height = 100; is thumbnail image height = ύψος μικρογραφίας εικόνας
δ) img_thumb_width = 120; is thumbnail image width = πλάτος μικρογραφίας εικόνας.



8) Τώρα ψάχνετε να βρείτε το...

<data:post.body/>

9) Μόλις το βρείτε θα το αντικαταστήσετε με τον παρακάτω κώδικα.

<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> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

10) Στην περίπτωση που θα θέλετε να το τροποποιήσετε ή να προσθέσετε εικόνα θα πειραξετε το συγκεκριμένο κόματι του κώδικα.



π.χ. το read more μπορείτε να το μετατρέψετε σε ---> Διαβάστε περισσότερα....
ή αν θελετε να βάλετε εικόνα τότε θα προσθέσετε τον παρακάτω κώδικα στο συγκεκριμένο σημείο.

<img src='....YourImageURL....' alt='read more'/></a>

Τέλος κάνετε προεπισκόπηση & αν δε σας βγάλει κάποιο λάθος.... κατόπιν αποθήκευση

Καλή Επιτυχία!!!

Σχετικες Ανάρτησεις με τροποποιήσεις στο Read more....Δείτε εδω! & εδώ!