Αυτόματα το Διαβάστε περισσότερα / Auto Read more και με εικόνα

Μπαίνει αυτόματα και φωτογραφία... Ένα πολύ καλό και πολύ χρήσιμο κολπάκι πλήρως ρυθμιζόμενο και τσεκαρισμένο.

Πηγαίνουμε στη σελίδα του blog, πατάμε πρότυπο και μετά επεξεργασία HTML και μας βάζει στον κώδικα της σελίδας.

Στη συνέχεια, πηγαίνουμε με το ποντίκι, με τον κέρσορα δηλαδη στον κόδικα και κλικάρουμε εκέι μέσα μια φορά, να πάει εκεί ο κέρσορας δηλαδή.

Μετά πατάμε ctrl+f και μας ανοίγει το παραθυράκι search επάνω δεξιά όπως βλέπουμε στην εικόνα.
Στο παράθυρο του search βάζουμε <data:post.body/> και πατάμε enter.
Θα μας πάει εκεί που είναι αυτό.
ΑΥΤΟ ΘΑ ΤΟ ΣΒΗΣΟΥΜΕ / ΑΝΤΙΚΑΤΑΣΤΗΣΟΥΜΕ με τον κώδικα που έχω ακριβώς από κάτω.
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
 <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

ΠΡΟΣΟΧΗ : το <data:post.body/> υπάρχει περίπτωση να υπάρχει 2 φορές μέσα στον κώδικα.
Θα το αντικαταστήσουμε και τις δυο φορές με τον κώδικα που είδαμε πιο πάνω.

Φτάνουμε στο τέλος.
Τώρα ξαναπατάμε ctrl+f  να ανοίξει το search αν δεν είναι ανοικτό δηλαδή και βάζουμε </head>

Όπως βλέπετε στην εικόνα, το </head> (το </head> είναι μόνο ένα) ακριβώς από πάνω βάζουμε τον κώδικα που σας έχω από κάτω.
<script type='text/javascript'>
posts_no_thumb_sum = 500;
posts_thumb_sum = 300;
img_thumb_height = 200;
img_thumb_width = 300;
</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, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}

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

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
 .readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>

Πατάμε αποθήκευση και τέλος. Αυτό ήταν. To blog μας απέκτησε αυτόματο read more τοποθετόντας την εικόνα της αναρτήσεις δεξιά σαν thumbnail.

ΡΥΘΜΙΣΕΙΣ 
posts_no_thumb_sum = 500; Το 500 εδώ είναι πόσοι χαρακτήρες θα γραφτούν αν ΔΕΝ υπάρχει φωτογραφία στο άρθρο μας. Βάλτε ότι θέλετε, εγώ το έχω 500
posts_thumb_sum = 300; Το 300 εδώ είναι πόσοι χαρακτήρες θα γραφτούν δεξιά από την φωτογραφία στο άρθρο μας. Βάλτε ότι θέλετε, εγώ το έχω 300
img_thumb_height = 200; Το 200 εδώ είναι το ύψος τις φωτογραφίας. Βάλτε ότι θέλετε, εγώ το έχω 200
img_thumb_width = 300; Το 300 εδώ είναι το πλάτος τις φωτογραφίας. Βάλτε ότι θέλετε, εγώ το έχω 300

Αυτό χρησιμοποιώ και εγώ στη σελίδα που βρίσκεστε με αυτές τις ρυθμίσεις.

http://helpblogwidget.blogspot.gr/