Jaja, da bin ich wieder. Es ist Freitag. Es ist Zeit mit so Programmen zu spielen und im HTML rumzuwühlen, bis es weiß, wer hier der Boss ist!

In meiner letzten Wochenschau angekündigt – bzw. offensichtlich im Blog sichtbar – habe ich mal wieder etwas rumgebastelt. Schon lange, lange Zeit waren mir besonders die Ansichten von Label- bzw. Archiv-Suchergebnissen ein Dorn im Auge. Klickt man auf ein Label oder etwa einen Monat im Archiv, gibt es eine lange Latte an Posts…und seien wir ehrlich:

Wer scrollt sich und klickt sich da wirklich durch?

Meine Lösung war zuerst, nur die Posttitel als Ergebnisse anzeigen zu lassen, dh. eine richtige Liste, die man schnell überblicken kann. Das wäre eigentlich schon ganz in Ordnung – nur war mein Spürsinn jetzt geweckt 😉

Eine Ansicht mit Teilen des Textes und am besten noch ein Thumbnail des ersten Bildes wäre doch wirklich noch besser! Und ich wurde fündig. Ein Klick auf den Monat “März” im Archiv ergibt nun diese Ansicht:

Wie ich in der Wochenschau schon erwähnte, habe ich diese Ansicht nun auch mal auf der Startseite generell umgesetzt, mir gefällt’s ganz gut. Bekanntlich sind meine Posts ja alle relativ lang und so hat man einfach einen schnelleren Überblick. Find ich jetzt mal.

Hier soll’s jetzt aber nur darum gehen, wie man den automatischen Break Jump nur bei Archiv und Labels anwenden kann. Natürlich wird das Ganze dann wieder unter Blog Tipps permanent verlinkt 🙂

Nun denn, wie immer als allererstes – sichert eure aktuelle Vorlage!

Und ebenfalls wie immer “Expand Widget Templates” oben links klicken, bevor man Strg+F anwirft und nix von dem Gefragten findet 😉

Mit Strg+F also </head> suchen und darunter den folgenden Code einfügen:

<!– Auto read more script Start–>
<!–Begin kalterkaffee.at do not edit otherwise than stated–>
<script type=’text/javascript‘>
var thumbnail_mode = „yes“; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</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=“float:left; padding:0px 10px 5px 0px;“><img src=“‚+img[0].src+'“ width=“380px“/></span>‘;
summ = summary_img;
}
}
var summary = imgtag + ‚<div>‘ + removeHtmlTag(div.innerHTML,summ) + ‚</div>‘;
div.innerHTML = summary;
}
//]]>
</script>
<!– Auto read more script End –>

Nachdem dieser Code eingefügt ist, die Zeile <data:post.body/> finden und mit folgendem Code ersetzen –

Anm.: Diesen Code-Teil scheint es zweimal zu geben – der zweite, ohne <p></p>, ist derjenige, der ersetzt werden muss! – bei mir sieht das so aus:

<div class=’post-body entry-content‘ expr:id=’&quot;post-body-&quot; + data:post.id‘>
<data:post.body/>

<!– Auto read more Start–>
<!–Begin kalterkaffee.at do not edit otherwise than stated–>
<b:if cond=’data:blog.pageType == &quot;item&quot;‘>
<data:post.body/>
<b:else/>
<b:if cond=’data:blog.url == data:blog.homepageUrl‘>
<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>
</b:if>
<a class=’more‘ expr:href=’data:post.url‘>Weiterlesen…</a>
</b:if>
</b:if>
<!– Auto read more End –>

Und damit ist es auch schon vollbracht!

Ergötzt euch an eurem Werk, oder widmet euch noch kurz dem individuellen Anpassen:

  • thumbnail_mode – “yes” bedeutet man will ein Vorschaubild, alles andere als “yes” stellt auf Text-only Modus um.
  • summary_img – legt die Anzahl der Zeichen (inkl. Leerzeichen) fest, die man in der Zusammenfassung mit Thumbnail anzeigen möchte.
  • summary_noimg – legt die Anzahl der Zeichen (inkl. Leerzeichen) fest, die man in der Zusammenfassung ohne Thumbnail anzeigen möchte (für Posts ohne Bilder bspw.)
  • img_thumb_height und img_thumb_width – legt die Höhe und Breite des Thumnails fest (in Pixel) – edit: ein guter Hinweis aus den Kommentaren um eine etwaige Verzerrung zu verhindern wurde im Code umgesetzt! Bei imgtag = ‚<span style=“float:left; padding:0px 10px 5px 0px;“><img src=“‚+img[0].src+'“ width=“380px“/></span>‚;
    einfach die 380px durch eine Pixelbreite eurer Wahl ersetzen.
    Danke an Saphira für den hilfreichen Hinweis!
  • Man kann natürlich auch das Wort für den Break Jump ändern (Weiterlesen…).

Ich habe diesen Code von Blogger Sentral übernommen und für Archiv und Labels angepasst – der dort angegebene Code würde die Startseite wie bei mir in Snippets formatieren, was die meisten ja nicht wollen 😉

Tjo, das war’s auch schon :). Vielleicht hat euch das jetzt auch geholfen die Labelsuche auf Vordermann zu bringen, nech! Gerade die letzten Tage fand ich mich wieder einmal darin bestätigt, dass es ja immer ganz nett ist, wenn man seine Tipps und Erfahrungen auch weitergibt – Geheimniskrämerei ist mMn wider dem Grundgedanken des Internets (nicht zu erwähnen, dass jeder Suchmaschinen benutzen kann haha). Fragen könnte ihr mir wie immer in die Kommentare posten!

Eure HTML-tweaking Mutti,

You May Also Like

66 comments

Reply

Ich habs eingefügt, bekomme dann aber folgende Fehlermeldung:
Ihre Vorlage konnte nicht analysiert werden, da sie nicht korrekt formatiert ist. Stellen Sie sicher, dass alle XML-Elemente ordnungsgemäß geschlossen sind.
XML-Fehlermeldung: The string „–“ is not permitted within comments.

Reply

@DaniB001Mh, Moment, ich prüf das schnell!

Reply

@GodfrinaSo, gefunden – es gibt den Codeteil < data:post.body/ > wohl zweimal! Nur den zweiten ersetzen, der erste, mit < p > davor und danach ist Teil der Kommentarformatierung.

Editiere das schnell, danke für den Hinweis!

Reply

Ging mir leider genau so 🙁

Reply

@EsKa Siehe mein Edit bzw. in den Kommentaren ↑ 🙂

Reply

@Godfrina
Der obere Teil scheint das Problem zu sein, die Meldung kommt leider immer noch 🙁
Will es doch unbedingt zum laufen bekommen 🙂

Reply

@DaniB001Mh, hattest du die Vorlage wieder zurückgesetzt? – das ist seltsam, ich habe es gerade am Testblog neu gemacht und es klappte ohne Probleme.

Die Fehlermeldung von oben ließ ja darauf schließen, dass es an dem doppelten Teil lag.
Ist die Fehlermeldung die selbe?

Reply

@Godfrina
Füge ich nur den unteren Code ein nimmt er es, füge ich den oberen eine nicht 🙁
Keine Ahnung was da los ist, zur Not bleibts halt wie bisher. Kannst du ja nichts für 🙂

Reply

@DaniB001Äußerst merkwürdig! Kann mir jetzt gar nicht vorstellen, woran es liegen mag :/

Reply

Wow… Wie hast Du Dir das alles beigebracht? Ich hab mich die letzten zwei Wochen mühsam durch das WordPress Stylesheet probiert , – aber diese Feinheiten… Beeindruckend. Vielen Dank für Deine Tutorials! Ich finde es unglaublich hilfreich!

Reply

Bei mir gibt es ca. 10x.
Bin mir da nicht ganz sicher, an welcher Stelle ich ersetzen soll. Kannst du die Stelle vielleicht genauer beschreiben?

Ich finde es wirklich toll, dass du solche Tutorials machst. Durch dich ist mein Blog schon viel schöner geworden *schleim* xD

Reply

Ich glaube, ich habes es jetzt gefunden. Es ist die Zeile, die nicht von anderen <b:if cond=’data:blog.pageType… umschlossen wird.

Leider habe ich das Problem, dass die Größe der Vorschaubilder nicht variabel ist. Habe schon verschiedene Größen ausprobiert, aber es ändert sich nichts.

Reply

Puh, bei mir funktioniert es jetzt.

Einen kleinen Tip habe ich noch.
Wenn man
width=“‚+img_thumb_width+’px“ height=“‚+img_thumb_height+’px“

Durch z.B.

width=“200px“

ersetzt, dann bleiben die Fotos immer 200 Pixel breit und die Höhe wird je nach Foto angepasst.

(Die anderen Kommentare kannst du natürlich löschen. Sorry wegen dem Spam…)

Reply

@She-LynxHaha, vieles ist einfach nur „wissen was man sucht“ 😀
Ein bisschen learning by doing, ein bisschen reines Nerdtum haha – bitte gern, dafür sind die Posts gedacht 🙂

Reply

@Saphira ^^ Ich habe jetzt mal noch eine Zeile hinzugefügt, die vielleicht bei anderen auch so steht bzw. die Richtung angeben soll…danke für den Hinweis, dass es bei dir noch häufiger vorkommt! 😮

Reply

@SaphiraSuper Hinweis, gleich editiert, danke dir! 🙂

Reply

Ich schon wieder…

Ich habe ein kleines Problem „gefixt“. Bei mir stand auch auf den normalen Seiten (static_pages) das „Weiterlesen…“.
Wenn man das [/b:if], das sich vor dem Link mit dem Weiterlesen befindet, mit zu den beiden anderen [/b:if] darunter schreibt, scheint das Problem gelöst zu sein.
Ich kann aber nicht sagen, ob das Problem nur bei meinem Template oder meinem Blog so ist. Vom logischen her sollte das [/b:if] aber eigentlich sowieso zu den anderen beide gehören 😉

Ich versuche gerade Linkwithin von den Auto Jump Breaks zu entfernen.
Hast du Interesse daran (falls es mir gelingen sollte), dass ich das hier mit schreibe?

Reply

Hui, hier arbeiten in den Kommentaren ja wirklich Leute zusammen und mit! Wenn das mal nicht ein schöner Anblick ist! Das erfreut mein kleines Geekherz ja ungemein (wirklich.).

Super gemacht! Werd ich mir demnächst auch mal zu Gemüte führen!

Reply

Wow, das sind ja wirklich noch böhmische Dörfer für mich. Musste eben so lachen, als ich schnell den Code überscrollt habe und dachte *urrgh* und darunter dann stand „Und damit ist es auch schon vollbracht!“…

Ich habe diese Woche meinen Blog wieder reanimiert und gelobe Besserung, was das posten angeht. Werde mich sicherlich die Tage mal mit deinen ganzen hilfreichen Blogger-Tipps auseinandersetzten!

Liebe Grüße Kat by
Shades of Nature

Reply

Oh super Sache!
Mal gucken ob ich mich ran trau – html ist für mich wie im stehen Pipi machen 🙂

Reply

@SaphiraOh seltsam – dieser Code sollte ja spezifisch die statischen Seiten nicht betreffen 😮

Also – ich weise mal die Schuld von mir und sage du hast da nblöden Code nhenhe haha ;)) Aber ich find’s sehr klasse, dass du dich selber auf die Suche machst und probierst! Geek-high5! 😀
Und danke fürs Reinschreiben – vl. hat ja doch noch jemand das Problem, dann steht hier schon die Lösung 🙂
Also ja – gern – es kann ja jederzeit sein, dass noch jemand auf deine Probleme stößt! ^^

Reply

@Touching The RainbowGell! GELL! Ich bin ein bisserl stolz :‘) haha!

Reply

@Shades of NatureAch, wenn man den richtigen Code mal hat, ist alles ja nur copy/paste an die richtige Stelle 🙂

Liebe Grüße!

Reply

@AngiWenn man seine alter Vorlage brav speichert, ist ja alles leicht rückgängig zu machen 🙂

Reply

@Godfrina
Ich habe das jetzt auf meinem Blog extra gepostet, aber wenn du möchtest, kannst du das sehr gerne übernehmen. (Vielleicht auch für ein späteres Tutorial oder so…)

Reply

Fun Fact: Bei mir passiert gar nix. Also, wirklich überhaupt nix.
Ich vermute aber, daß das einfach an meinem Template liegt. Das in seiner Grundform alles andere als einfach und noch dazu wirklich steinalt ist.
Ich werd trotzdem mal ein bisschen dran rumbasteln, vielleicht gehts ja noch…

Reply

@Godfrina Ja, das mach ich auch immer. Aber ich trau ja dem ganzen Zeug immer net so :p

Reply

Sorry, wenn das jetzt ein wenig OT ist, aber ich hab da ein kleines Problem und die Hoffnung, dass du mir helfen kannst. hab seit kurzem ein smartphone (hui bin ich jetzt modern 🙂 ) und kann via blogger (auch als app) aber immer nur die letzten nachrichten lesen und im dashboard nicht runterscrollen… somit bleiben mir, gerade wenn ich länger in Berlin arbeiten bin, alle alten blogposts vorenthalten. hast du da viell. ne idee , was man da machen kann?
Liebst,
Melon

Reply

@DaniB001 Genau die Fehlermeldung hatte ich auch. Bei dem ersten Code sind in der letzten Zeile ganz rechts keine zwei Striche:
Dann kam keine Fehlermeldung mehr. 😀
LG

Reply

Oh, wie super! Bei mir hat es funktioniert!! Vielen Dank!
Allerdings hatte ich auch erst die Fehlermeldung wie DaniB001.
Die letzte Zeile des ersten Codes muss so aussehen:
Es fehlt nach End der zweite Strich 🙂
Jetzt hat es geklappt.
Weißt du auch, ob und wie ich das „link within“ beim archiv und den labels entfernen kann?
Alles Liebe!

Reply

@SaphiraJa, ich hab interesse 😀 Und danke, dass du das kleine Problem gefixt hast, das hab ich nämlich auch X_X mal gucken, ob ich das wegbekomme 🙂

Reply

@Silvaoh, leider ist der code jetzt weg… *hmpf* weißst du, welche zeile ich meine?

Reply

Jetzt funktioniert es auch bei mir 🙂 Allerdings muss ich bei mir das erste überschreiben, nur dann gehts 🙂
Danke an alle die geholfen haben.

Reply

@Touching The Rainbow Bei mir hat sich auch nichts getan…

Reply

@MissXoxolatEs kann durchaus sein, dass sich das Template sträubt – hast du auch schon davor Jump Breaks drin gehabt?

Reply

@MelonAlso ich benutze am Handy zum Lesen Bloglovin – du kannst auch alle deinen GFC Abos ganz leicht zu Bloglovin importieren ohne jeden zu klicken. Bei Interesse melde dich nochmal 😉

Reply

@Godfrina
ahja, danke, ich probiers mal aus und meld mich dann nochmal bei dir! danke 🙂

Liebst,
Melon

Reply

@Melon
danke! hat alles geklappt!

Liebst,
Melon

Reply

vielen dank für die ganzen super tipps, konnte einiges übernehmen, leider klappt das mit dem bildbreite anpassen noch nicht ganz bei mir, und ich weiß auch nicht was ich falsch mache, aber allzu schlimm ist das nicht.
lg!

Reply

@MelonOh super, freut mich! :))

Reply

@SilvaJa, hatte es schon gesehen – danke für den Hinweis.

Reply

@JuleHm, versuch mal die gesamte Zeile so reinzukopieren, und dann nur die Zahl zu ändern. War auch schon bei jemand anderen das Problem:

imgtag = ‚< span style=“float:left; padding:0px 10px 5px 0px;“ >< img src=“‚+img[0].src+'“ width=“380px“/ >‘;

(Die Leerzeichen am Anfang und am Ende bei den < > rauslöschen!)
Blogger ist in der HTML Vorlage oft seeehr bitchy wenn’s um die Anführungszeichen geht.

Reply

Wow, danke für die Anleitung.
Fand das auch immer ziemlich nervig.

Allerdings musste ich beim zweiten Part, das erste ersetzen und nicht das zweite, damit es bei mir funktioniert hat :).

Liebe Grüße, Jenny

Reply

@Godfrina Nein, davor hatte ich keine.
Mit dem Code von hier *klick* funktioniert es. Nur ist da das Vorschaubild dann so verzerrt und ich weiss nicht, wie ich das ändern kann.

Reply

Wow wow wow, ich habe deinen Tip gerade bei meinem Blog ausprobiert und nun sieht mein Archiv fan-tas-tisch aus! Vielen, vielen Dank! Ganz großartig, Deine Tutorials!

Reply

Hallo Godfrina, ich wollte nur mal schnell danke für die tolle Anleitung sagen! Hab für meine Archive und Labels jetzt auch die Auto Jump Breaks und bin total begeistert. Dank dir und den super Tipps in den Kommentaren, hat alles wunderbar funktioniert! LG <3

Reply

Ich finde die Anleitung super und hätte dieses feater auch sehr gerne, habe es auch breeits reinkopiert. Nur leider passiert nix. Ich habe bisher kein Jump break verwendet liegt es daran, müsste ich das nun bei jedem Post machen? Oder habe ich eine falsche Archiveinstellung?
Irgendwie komme ich nicht weiter, mein html ist doch zu schlecht. Ich würde mich freuen, wenn du mir weiterhelfen könntest.
danke und leiber Gruß aus Tirol
creat.ING[dh]

Reply

@JennySchön, dass du gleich rausgefunden hast, was zu tun ist 🙂

Reply

@katySuper, freut mich! :))

Reply

@Nathalie Klasse Sache, ich finde diese Ansicht, besonder bei Labelsuchen einfach viel viel praktischer – find’s toll, wenn’s auf anderen Blogs auch so ist höhö.

Reply

@creat.ING[dh]Nein, also, selbst wenn bereits ein Break Jump vorhanden wäre, würde dieser Code es „überschreiben“.
Ich kann jetzt ad-hoc gar nicht sagen, was nicht stimmen könnte – hast du eine Fehlermeldung bekommen?
Bzw. nachgeschaut, wie viele data:post.body Zeilen du hast?

Reply

Vielen Dank, das hat wunderbar geklappt. Obwohl ich vier Anläufe gebraucht habe – aber das lag vielleicht an der Uhrzeit… 😉

Reply

Bei mir hat sich leider gar nichts getan… Und ich weiß auch nicht, wie ich das alles wieder rückgängig mache. Ich hatte vorher auf Speichern geklickt, aber wie bekomme ich das wieder rückgängig? lg Lena

Reply

@Lena SchnittkerBist du dir sicher, wirklich alles genau befolgt zu haben? Alles nochmal durchgesehen? Eigentlich gibt es bei korrektem Arbeiten kein „geht nicht“.

Falls sich Codes gegenseitig blockieren sollten, gibt es keinen „zurück“ Button. Wenn es nicht aufscheint, kannst du es einfach im HTML lassen, oder gehst alles nochmal durch und löschst es.
Oder lädst das Backup hoch.

Reply

Ja, ich habe beide Codes durch die von dir angegebenen ersetzt. Weiß auch nicht… lg

Reply

wooooowww so viele kommentare! Super Layout hat dein Blog! 🙂

Reply

So was habe ich gesucht, da ich gerne nur eine snippet-Übersicht bei den Labels haben wollte 🙂
Das hat mir also wahnsinnig weitergeholfen!
Ich bin ja nun ein bisschen programmierbewandert, finde die step-by-step Anleitung aber easy to follow und denke, da sollte jeder mit klar kommen 😀
Dankeschön für das tolle Tutorial <3

Reply

Tolle Tutorials, danke! Allerdings hätte ich doch eine Frage. Anfangs meintest du ja auch, dass du an eine Liste der Posttitel als Suchergebnisse gedacht hast. Und genau das wäre meine Vorstellung für die perfekte Anzeige der Suchergebnisse, wenn möglich auch mit Thumbnail daneben/drüber/drunter. Google konnte mir da nicht weiterhelfen, mal ganz davon abgesehen, dass ich nicht genau weiß, nach was ich eigentlich suchen muss. Hast du vll. einen Tipp?

Reply

Vielen Dank für das gute Tutorial sehr schön erklärt 🙂 Ich finde es toll das hier alle so zusammen arbeiten ! TOP wenn es nur immer so wäre.

Bei mir hat es auf Anhieb funktioniert, habe aber auch schon ein paar Erfarungen mit html gemacht und weiß wo die Tücken sind.
Danke !

Alles Liebe – Lea

Reply

Bei mir wird kein Ergebnis für

gefunden. Woran kann das liegen?

Reply

@schaefchenSuch einfach mal nach „how to display only post titles on search blogger“, da gibt es zig Tutorials und Codes. Man muss nur darauf achten, ob es eben auch labels und Archiv beeinflusst 🙂

Reply

@Lea BauknechtFreut mich!

Jup, ich find’s selber doof, wenn Blogger auf „alte“ Beiträge nimmer antworten…ich seh ja den neuen Kommentar? Tsts 🙂

Reply

@IdaWofür? 🙂

Reply

Oh, wurde irgendwie nicht mit kopiert. 😀
Den zweiten Suchbefehl meine ich. Das mit dem

Reply

Oh man, ich bin so doof 😀
Das mit dem Data Post Body (du weißt schon, was ich meine ;)) wird in meinem HTML-Code nicht gefunden.
Das meinte ich. 😀

Reply

@IdaWenn du versuchst, Codeteile zu kopieren, musst du Leerzeichen einfügen, sonst erkennt Blogger es als Code, nicht als Text 😉

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge