Blogger-Tipp #6: Auto Jump Break for Archive & Labels

Freitag, März 09, 2012

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 Might Also Like

66 comments

  1. 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.

    AntwortenLöschen
  2. @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!

    AntwortenLöschen
  3. @EsKa Siehe mein Edit bzw. in den Kommentaren ↑ :)

    AntwortenLöschen
  4. @Godfrina
    Der obere Teil scheint das Problem zu sein, die Meldung kommt leider immer noch :(
    Will es doch unbedingt zum laufen bekommen :)

    AntwortenLöschen
  5. @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?

    AntwortenLöschen
  6. @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 :)

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

    AntwortenLöschen
  8. 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!

    AntwortenLöschen
  9. 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

    AntwortenLöschen
  10. 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.

    AntwortenLöschen
  11. 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...)

    AntwortenLöschen
  12. @She-LynxHaha, vieles ist einfach nur "wissen was man sucht" :D
    Ein bisschen learning by doing, ein bisschen reines Nerdtum haha - bitte gern, dafür sind die Posts gedacht :)

    AntwortenLöschen
  13. @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! :o

    AntwortenLöschen
  14. @SaphiraSuper Hinweis, gleich editiert, danke dir! :)

    AntwortenLöschen
  15. 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?

    AntwortenLöschen
  16. 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!

    AntwortenLöschen
  17. 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

    AntwortenLöschen
  18. Oh super Sache!
    Mal gucken ob ich mich ran trau - html ist für mich wie im stehen Pipi machen :)

    AntwortenLöschen
  19. @SaphiraOh seltsam - dieser Code sollte ja spezifisch die statischen Seiten nicht betreffen :o

    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! :D
    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! ^^

    AntwortenLöschen
  20. @Touching The RainbowGell! GELL! Ich bin ein bisserl stolz :') haha!

    AntwortenLöschen
  21. @Shades of NatureAch, wenn man den richtigen Code mal hat, ist alles ja nur copy/paste an die richtige Stelle :)

    Liebe Grüße!

    AntwortenLöschen
  22. @AngiWenn man seine alter Vorlage brav speichert, ist ja alles leicht rückgängig zu machen :)

    AntwortenLöschen
  23. @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...)

    AntwortenLöschen
  24. 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...

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

    AntwortenLöschen
  26. 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

    AntwortenLöschen
  27. @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. :D
    LG

    AntwortenLöschen
  28. 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!

    AntwortenLöschen
  29. @SaphiraJa, ich hab interesse :D Und danke, dass du das kleine Problem gefixt hast, das hab ich nämlich auch X_X mal gucken, ob ich das wegbekomme :)

    AntwortenLöschen
  30. @Silvaoh, leider ist der code jetzt weg... *hmpf* weißst du, welche zeile ich meine?

    AntwortenLöschen
  31. Jetzt funktioniert es auch bei mir :) Allerdings muss ich bei mir das erste überschreiben, nur dann gehts :)
    Danke an alle die geholfen haben.

    AntwortenLöschen
  32. @MissXoxolatEs kann durchaus sein, dass sich das Template sträubt - hast du auch schon davor Jump Breaks drin gehabt?

    AntwortenLöschen
  33. @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 ;)

    AntwortenLöschen
  34. @Godfrina
    ahja, danke, ich probiers mal aus und meld mich dann nochmal bei dir! danke :)

    Liebst,
    Melon

    AntwortenLöschen
  35. @Melon
    danke! hat alles geklappt!

    Liebst,
    Melon

    AntwortenLöschen
  36. 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!

    AntwortenLöschen
  37. @SilvaJa, hatte es schon gesehen - danke für den Hinweis.

    AntwortenLöschen
  38. @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.

    AntwortenLöschen
  39. 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

    AntwortenLöschen
  40. @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.

    AntwortenLöschen
  41. 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!

    AntwortenLöschen
  42. 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

    AntwortenLöschen
  43. 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]

    AntwortenLöschen
  44. @JennySchön, dass du gleich rausgefunden hast, was zu tun ist :)

    AntwortenLöschen
  45. @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ö.

    AntwortenLöschen
  46. @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?

    AntwortenLöschen
  47. Vielen Dank, das hat wunderbar geklappt. Obwohl ich vier Anläufe gebraucht habe - aber das lag vielleicht an der Uhrzeit... ;)

    AntwortenLöschen
  48. 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

    AntwortenLöschen
  49. @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.

    AntwortenLöschen
  50. Ja, ich habe beide Codes durch die von dir angegebenen ersetzt. Weiß auch nicht... lg

    AntwortenLöschen
  51. wooooowww so viele kommentare! Super Layout hat dein Blog! :)

    AntwortenLöschen
  52. 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 :D
    Dankeschön für das tolle Tutorial <3

    AntwortenLöschen
  53. 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?

    AntwortenLöschen
  54. 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

    AntwortenLöschen
  55. Bei mir wird kein Ergebnis für

    gefunden. Woran kann das liegen?

    AntwortenLöschen
  56. @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 :)

    AntwortenLöschen
  57. @Lea BauknechtFreut mich!

    Jup, ich find's selber doof, wenn Blogger auf "alte" Beiträge nimmer antworten...ich seh ja den neuen Kommentar? Tsts :)

    AntwortenLöschen
  58. Antworten
    1. Oh, wurde irgendwie nicht mit kopiert. :D
      Den zweiten Suchbefehl meine ich. Das mit dem

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

      Löschen
  59. @IdaWenn du versuchst, Codeteile zu kopieren, musst du Leerzeichen einfügen, sonst erkennt Blogger es als Code, nicht als Text ;)

    AntwortenLöschen

Danke fürs Einhalten der Netiquette & Comment Policy!
►Bitte von (Blog)URLs in den Kommentaren absehen, sie landen im Filter und werden nicht veröffentlicht.
International visitors: You're very welcome to comment in English!

Promotion


Make-Up bei Douglas - Your Partner in Beauty

Douglas AT

5€ RABATT CODE EUR5(MBW 35€ bis 30.06.18)



SALE - up to 70% off