Αυτόματο Read More (2) Στις Αναρτήσεις, Χωρίς Να Χωρίζει Τις Στατικές Σελίδες Του Blogger !!!

Στο http://www.bloggertips.gr/2009/07/read-more-blog.html γράφω τον κλασσικό, χειροκίνητο τρόπο προσθήκης του "διαβάστε περισσότερα" στις αναρτήσεις μας.


Στο http://www.bloggertips.gr/2010/03/automatic-read-more-function-in-blogger.html γράφω τον αυτόματο τρόπο προσθήκης του "διαβάστε περισσότερα" στις αναρτήσεις μας, που έχει πρόβλημα όμως στις στατικές σελίδες του blogger.


Έχω γράψει επίσης στο http://www.bloggertips.gr/2011/03/read-more-button.html πως μπορούμε να βάλουμε εικόνα αντί για κείμενο στο "διαβάστε περισσότερα".

Σήμερα θα πω, πως βάζουμε ένα αυτόματο read more -όπως αυτό που έχω πει ήδη-, με τη μόνη διαφορά ότι αυτό το read more δεν χωρίζει τις στατικές σελίδες του blogger, αλλά μόνο τις αναρτήσεις. Έτσι θα έχετε και αυτόματο read more ΚΑΙ στατικές σελίδες στον blogger.

Με αυτή την ανάρτηση λοιπόν, νομίζω ότι κλείνει οριστικά για μένα το θέμα των "διαβάστε περισσότερα".

ΓΙΑ ΤΗΝ ΠΡΟΣΘΗΚΗ ΤΟΥ ΑΚΟΛΟΥΘΗΣΤΕ ΤΑ ΠΑΡΑΚΑΤΩ ΒΗΜΑΤΑ:

1. Σύνδεση> Πανόπτης> Σχεδίαση> Επεξεργασία html> Επέκταση προτύπων γραφικών στοιχείων
2. Με τη βοήθεια του 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>

Στον παραπάνω κώδικα μπορείτε να αλλάξετε τις εξής αριθμητικές μεταβλητές (σε pixels):

summary_noimg = 430; το ύψος της ανάρτησης ΧΩΡΙΣ την εικόνα
summary_img = 340; το ύψος της ανάρτησης ΜΕ την εικόνα
img_thumb_height = 100; το ύψος της εικόνας
img_thumb_width = 120; το πλάτος της εικόνας

Η επεξεργασία αυτών των μεταβλητών είναι παρόμοια με αυτήν στο http://www.bloggertips.gr/2010/03/automatic-read-more-function-in-blogger.html

3. Τώρα βρείτε το <data:post.body/> και αντικαταστήστε αυτόν τον κωδικό με τον παρακάτω:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>

<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>
</b:if>

Το read more μπορείτε να το αλλάξετε φυσικά.

4. Προεπισκόπηση, Αποθήκευση κι είστε έτοιμοι!

Άσχετο:

Κατά τη διάρκεια της συγγραφής της παραπάνω ανάρτησης, άκουγα το παρακάτω τραγούδι:

Πηγές: http://www.vietwebguide.com/2008/08/to-read-more-c-tip-mt-cch-t-ng-ver-20-h.html

Copyrights: http://www.bloggertips.gr/