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 -->Die markierten Zeilen könnt ihr im Nachhinein ändern. In der Erklärung steht, was diese Werte machen.
<script type='text/javascript'>
var thumbnail_mode = "yes"; //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 -->
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 == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'>Weiterlesen »</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!
hey liebes,
AntwortenLöschenhabe 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 :)
Danke für eure Hilfe hat super geklappt und war sehr gut erklärt.
AntwortenLöschenWeiter so!!!
Liebe Grüße Yara:)
hmm bei mir klappt es nach dem Codeeinfügen nicht mehr...
AntwortenLöschenich finde die Stelle einfach nicht...
lg
Hey. :)
AntwortenLöschenBei mir funktioniert das Ganze leider auch nicht. :(
Woran kann das liegen?
Liebe Grüße
Selly
www.sellyssecrets.blogspot.de
Bei mir hat es leider auch nicht funktioniert ! Schade…
AntwortenLöschenIch bin schon lange auf der Suche nach so einem Tutorial. Leider hat es aber auch bei mir nicht funktioniert :(
AntwortenLöschenSuper euer Tutorial! Hat sofort geklappt und läuft! :)
AntwortenLöschenDanke!
ahhhh wie toll ist das denn ...
AntwortenLöschentausend dank :-*
Es klappt nicht :(
AntwortenLöschenwww.yakatharina.blogspot.de
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..
AntwortenLöschenDeshalb 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/
Bei mir hat es leider nicht funktioniert :(
AntwortenLöschenBis zum ersten Schritt hat alles funktioniert, aber dann habe ich dieses ' nicht mehr gefunden..
Würde mich sehr über Hilfe freuen :*
lisalovestheusa.blogspot.de
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. :)
AntwortenLöschenLG
www.fashionfika.com
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öschenjuhuu, 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.
AntwortenLöschenIch bin so froh, eure Seite gefunden zu haben!
Liebe Grüße
Nadine
Bei mir gehts auch nicht.. Dann wohl doch alles manuell ändern :(
AntwortenLöschenLg Anna
www.the-anna-diaries.de
Bei mir hat es geklappt aber meine Bilder werden ziemlich groß angezeigt.
AntwortenLöschenWas kann ich tun um die in der "Xtra Large" Größe zu bekommen statt der Originalgröße.
xx Lori
http://fabeau-trends.blogspot.de
Hatte zweimal bei mir und habe beide mit dem oben genannten Code ersetzt. Danach hat es funktioniert.
AntwortenLöschenMeine Bilder sind leider auch ÜBERGROß geworden, wie kann man das korrigieren?
LG & DANKE
5iveleven.blogspot.de/
Dieser Kommentar wurde vom Autor entfernt.
AntwortenLöschenHallo :) vielen Dank für das Tutorial, hat mir sehr geholfen :D
AntwortenLöschenLG von dandelion
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.
AntwortenLöschenDie 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.
Super, beim zweiten Anlauf hat es geklappt :) Wie kann ich den "Weiterlesen" Button eigentlich formatieren (z.B. fett)? Lg, Hati
AntwortenLöschenhi :) ich hab hier schonmal kommentiert und es klappt nach wie vor toll auf meinem Blog :)
AntwortenLöschenAber 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/ )
Hat super geklappt!! Danke dir für die tolle Erklärung.
AntwortenLöschenBei 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? :)
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
AntwortenLöschenzweimal nimmt er nicht???? hast du eine Idee
lg Bella
hat sich erledigt, nach einigem probieren hat es geklappt...danke
LöschenHalli Hallo,
AntwortenLöschenhat klasse funktioniert, lieben Dank. :-)
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öschenDieser Kommentar wurde vom Autor entfernt.
AntwortenLöschenBei mir hats leider nicht funktionier, bzw. ist keine Veränderung sichtbar. Ich habe alles so wie beschrieben gemacht.
AntwortenLöschenDa 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
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!
AntwortenLöschenLiebe Grüße
Sali
PS: Ein großes Lob auch für die anderen Tutorials - ich habe sehr viele für mich nutzen können!!!
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.
AntwortenLöschenLiebe Grüße
https://p-lichtblicke.blogspot.de/