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,

Sharing is sexy:

• Facebook
• Twitter
• Google+
• Pinterest
• StumbleUpon
• Delicious
• LinkedIn
• Reddit
• Technorati

Top Kommentatoren:
code source