Automatisches "Read More"



Oder auch "Auto Read More". Im Internet gibt es viele englischsprachige Tutorials, wie man das auf seinem Blogger-Blog einbinden kann. Leider sehen die meisten dann so aus: Links klein ein Vorschaubild und rechts Text. Um die Bilder normal groß und den Text darunter zu haben, musste man bisher in allen Post manuell einen Jumplink setzen. Ich habe vor einiger Zeit herausgefunden, wie man das ganze automatisch machen kann, und nutze es schon eine Weile auf meinem Blog. Dafür habe ich den Code von BloggerSentral etwas umgeschrieben :)

Dieses Tutorial funktioniert am besten mit der Minima-Vorlage. Schreibt es, falls es nicht so sein sollte. :)

Wie funktioniert's?

1. Javascript einfügen.
Um das ganze möglich zu machen, brauchen wir Javascript. Geht auf eurem Dashboard zu Vorlage und öffnet dort das HTML. Sucht dort nach </head> und fügt darüber folgenden Javascript-Code ein:
<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes -mit Vorschaubild, no -ohne Vorschaubild
summary_noimg = 630; //Anzahl der Buchstaben im Vorschau ohne Bild
summary_img = 310; //Anzahl der Buchstaben im Vorschau mit Bild
img_thumb_width = 100;
</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(thumbnail_mode == "yes") {
 if(img.length>=1) {
   imgtag = '<span style="padding:0px 10px 5px 0px;margin:0 1em;"><img src="'+img[0].src+'" width="'+img_thumb_width+'%" /></span>';
  summ = summary_img;
 }
 }
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script End -->
Die markierten Zeilen könnt ihr im Nachhinein ändern. In der Erklärung steht, was diese Werte machen.

2. Im HTML abändern
Jetzt müssen wir im HTML noch etwas ändern, damit der Code oben etwas bewirken kann. Dafür sucht ihr "post-body entry-content" und beim zweiten Ergebnis solltet ihr eine Zeile darunter folgendes finden:

(Die Zahlen links und die erste Zeile können je nach Vorlage variieren.)

Ersetzt <data:post.body/> mit:
<!-- Auto read more Start -->
<!-- http://www.BloggerSentral.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Weiterlesen &#187;</a>
</b:if>
</b:if>
<!-- Auto read more End -->

3. Speichern und Blog neu laden. Und das war es auch schon. Am besten sieht das übrigens aus, wenn ihr die Bilder mindestens mit der gleichen Breite wie der Postbereich hochladet. Ich hoffe, dieses Tutorial kann euch helfen :)

Gutes Gelingen!

Ähnliche Posts


31 Kommentare

  1. hey liebes,
    habe damals gebloggt und wollte heute mal neu starten, leider ist jeder anfang schwer. deshalb würde es mich sehr freuen, wenn ich vielleicht eine kleine unterstützung bekommen könnte. eine kleine vorstellung wäre wirklich super, ansonsten kannst du gerne selbst mal vorbei schauen. zwar noch etwas leer, ist halt erst der neuanfang. hoffe es gefällt dir :)

    liebe grüße
    emine ♥

    http://eminevogue.blogspot.de/

    so ein schönes blogdesign übrigens :)

    AntwortenLöschen
  2. Danke für eure Hilfe hat super geklappt und war sehr gut erklärt.
    Weiter so!!!

    Liebe Grüße Yara:)

    AntwortenLöschen
  3. hmm bei mir klappt es nach dem Codeeinfügen nicht mehr...
    ich finde die Stelle einfach nicht...

    lg

    AntwortenLöschen
  4. Hey. :)
    Bei mir funktioniert das Ganze leider auch nicht. :(
    Woran kann das liegen?

    Liebe Grüße
    Selly

    www.sellyssecrets.blogspot.de

    AntwortenLöschen
  5. Bei mir hat es leider auch nicht funktioniert ! Schade…

    AntwortenLöschen
  6. Ich bin schon lange auf der Suche nach so einem Tutorial. Leider hat es aber auch bei mir nicht funktioniert :(

    AntwortenLöschen
  7. Super euer Tutorial! Hat sofort geklappt und läuft! :)
    Danke!

    AntwortenLöschen
  8. ahhhh wie toll ist das denn ...
    tausend dank :-*

    AntwortenLöschen
  9. Es klappt nicht :(

    www.yakatharina.blogspot.de

    AntwortenLöschen
  10. Den ersten Code einzufügen, klappt alles wunderbar, dieses "post-body entry-content" finde ich allerdings nicht. Ich weiß nicht woran es liegen könnte. In einem anderen Tutorial habe ich auch gelesen dass man alles gleich am Anfang machen soll, d.h. wenn man sich den Blog grade neu erstellt hat..
    Deshalb habe ich mir einen komplett neuen Blog erstellt, als 'Testblog' sozusagen. Und obwohl alles neu ist, und ich nur die Simple Vorlage benutze, klappt es trotzdem nicht :/
    Ich würde mich deshalb echt auf eine Antwort freuen.
    Liebe Grüße
    http://meintest-blog.blogspot.de/

    AntwortenLöschen
  11. Bei mir hat es leider nicht funktioniert :(
    Bis zum ersten Schritt hat alles funktioniert, aber dann habe ich dieses ' nicht mehr gefunden..
    Würde mich sehr über Hilfe freuen :*

    lisalovestheusa.blogspot.de

    AntwortenLöschen
  12. Sehr schade, bei mir funktioniert es auch nicht. Habe bei blogger das simplest Template.. Ich hoffe sehr, dass du dafür eine Lösung findest. :)

    LG

    www.fashionfika.com

    AntwortenLöschen
    Antworten
    1. ich habe auch das simple template, aber bei mir hat es funktioniert...allerdings habe ich den zweiten code selber gesucht....da er mir den auch nicht angezeigt hat, dann ging es

      Löschen
  13. juhuu, es hat sofort geklappt :D Vielleicht ändere ich nun noch meine alten Bilder. Durch die Vergrößerung sind sie nun etwas großpixelig geworden. Vielleicht aber auch nen kleinen Beitrag dazu schreiben, denn für mich war nun auch dieser optische Unterschied sehr hilfreich, da ich nun sehen kann, welche Bildgröße besser in dieses Format passt.
    Ich bin so froh, eure Seite gefunden zu haben!

    Liebe Grüße

    Nadine

    AntwortenLöschen
  14. Bei mir gehts auch nicht.. Dann wohl doch alles manuell ändern :(

    Lg Anna
    www.the-anna-diaries.de

    AntwortenLöschen
  15. Bei mir hat es geklappt aber meine Bilder werden ziemlich groß angezeigt.
    Was kann ich tun um die in der "Xtra Large" Größe zu bekommen statt der Originalgröße.

    xx Lori
    http://fabeau-trends.blogspot.de

    AntwortenLöschen
  16. Hatte zweimal bei mir und habe beide mit dem oben genannten Code ersetzt. Danach hat es funktioniert.
    Meine Bilder sind leider auch ÜBERGROß geworden, wie kann man das korrigieren?

    LG & DANKE
    5iveleven.blogspot.de/

    AntwortenLöschen
  17. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  18. Hallo :) vielen Dank für das Tutorial, hat mir sehr geholfen :D
    LG von dandelion

    AntwortenLöschen
  19. Bei mir hat's zunächst nicht geklappt, weil es die beiden Zeilen im HTML-Code so mehrfach gibt, es funktionierte dann, als ich data:post.body nicht beim ersten Suchergebnis, das ich für "post-body entry-content" bekam, sondern beim zweiten Ergebnis geändert habe. Vielleicht einfach mal suchen und testen, wo es bei euch klappt.

    Die Größe der Bilder lässt sich verändern, indem man im ersten Code, den man einfügt, die Zahl in der Zeile: "img_thumb_width = 100;" verändert ;)

    Danke Copypastelove, die Tutorials sind wirklich verständlich und auch für absolute Laien wie mich super anzuwenden.

    AntwortenLöschen
  20. Super, beim zweiten Anlauf hat es geklappt :) Wie kann ich den "Weiterlesen" Button eigentlich formatieren (z.B. fett)? Lg, Hati

    AntwortenLöschen
  21. hi :) ich hab hier schonmal kommentiert und es klappt nach wie vor toll auf meinem Blog :)
    Aber ich hab jetzt versucht, dass man das Thumbnail-Bild klickbar machen kann, also dass ich auch aufs Bild klicken kann, um zum Post zu gelangen (und nicht nur über den weiterlesen-Button)... jedenfalls hab ich das nicht hinbekommen. :( könnt ihr mir da vielleicht weiterhelfen? Liebe Grüße
    ( http://thisisdandelion.blogspot.co.at/ )

    AntwortenLöschen
  22. Hat super geklappt!! Danke dir für die tolle Erklärung.
    Bei mir hat sich allerdings die Schrift unter dem Vorschaubild geändert. Wo kann ich diese bearbeiten im Html? Also welche Bezeichnung hat das?
    Und wie kann ich den "Weiterlesen"-Button formatieren? :)

    AntwortenLöschen
  23. danke für die Anleitung, ging alles super.....habe den zweiten code per hand gesucht da er mir den auch nicht angezeigt hat. allerdings hätte ich jetzt gerne eine Leerzeile zwischen post und dem Weiterlesen und den Befehl
    zweimal nimmt er nicht???? hast du eine Idee

    lg Bella

    AntwortenLöschen
    Antworten
    1. hat sich erledigt, nach einigem probieren hat es geklappt...danke

      Löschen
  24. Halli Hallo,
    hat klasse funktioniert, lieben Dank. :-)

    AntwortenLöschen
  25. Super Tutorial, nur leider werden meine Bilder quadratisch und nicht im Originalformat angezeigt. Wo kann ich das abändern? Vielen Dank schon einmal.LG

    AntwortenLöschen
  26. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  27. Bei mir hats leider nicht funktionier, bzw. ist keine Veränderung sichtbar. Ich habe alles so wie beschrieben gemacht.
    Da viele sagen, dass sie den zweiten Code nicht finden: War bei auch erst so, ich habe aber dann folgendes gemacht:
    1. HTMLCode kopieren+ Auf Word einfügen
    2. Mit der Suchfunktion dort nach gesuchtem Begriff suchen
    3. Die ungefähre Position merken
    4. Bei Blogger auf der ungefähren Höhe (oben, unten, mitte,obereMitte, usw.) gucken

    Mein Blog

    LG GLimmer<3

    AntwortenLöschen
  28. Bei mir hat es geklappt - danke für die tolle Anleitung. Ich hätte gerne den Abstand zwischen dem Bild und dem Text etwas größer, da es bei mir sehr gequetscht aussieht. Kann man deinen Code noch entsprechend damit ergänzen? Über eine Antwort würde ich mich sehr freuen!
    Liebe Grüße
    Sali

    PS: Ein großes Lob auch für die anderen Tutorials - ich habe sehr viele für mich nutzen können!!!

    AntwortenLöschen
  29. Dankeschön :) hat gut funktioniert. Das einzige was komisch ist, ist das die Bilder auf der Startseite dadurch größer wurden und sich die Qualität dadurch verschlechtert hat. Wie kann ich das wieder rückgängig machen oder den Fehler beheben.

    Liebe Grüße
    https://p-lichtblicke.blogspot.de/

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

 
Lass dir dein Blogdesign von mir gestalten!