Weiterlesen im Magazine-Look ♥♥♥♥

Heute zeige ich euch, wie man wie bei uns den Post als Vorschau im Magazine-Look anzeigen lassen kann. Es sieht auf informativen Blogs sehr schick aus, lädt nicht zu viel Text & Bilder und ist deswegen auch schneller zum laden. Wir haben vor längerer Zeit gezeigt, wie man mit Blogger die "Weiterlesen"-Funktion einstellt (zum Tutorial) und das hier ist sozusagen die Erweiterung. Aber worin unterscheiden sich die zwei Arten?

Der Vergleich:

Das normale "Read More"	Auto read more with thumbnail
Besteht aus HTML.	...Javascript.
Der Code muss extra eingefügt werden.	Am Post muss nichts gemacht werden.
Länge des Vorschaus wird im Einzeln bestimmt.	Länge kann geändert werden, ist bei jedem Post gleich.
"Read More" wird nur angezeigt, wenn der Code platziert wurde.	"Read More" wird ausnahmslos auf alle Posts übertragen.
Ohne Thumbnail; Bilder werden nur angezeigt, wenn sie vor dem Code platziert wurde.	Mit Thumbnail in einer festen Größe; das erste Bild wird dafür genutzt; kann abgeschaltet werden.
Der Code lädt den gesamten Post, aber zeigt nur die Vorschau.	Lädt nur die Vorschau (=lädt schneller).

Und wie ihr es einfügen könnt:

1. Öffnet eure HTML unter Design.

2. Macht einen Back-Up von eurem Template.

3. Lasst euch die Widgetvorlage anzeigen.

4. Sucht nach </head>.

5. Fügt diesen Code direkt nach dieser Zeile ein:

<!-- Auto read more script Start -->
<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="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
  summ = summary_img;
 }
 }
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script End -->

6. Ist das erledigt, sucht ihr nach <data:post.body/>.
7. Ersetzt diese Zeile mit (ihr werdet zwei finden, eins ist das richtige):

<!-- 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'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->

8. Drückt auf Vorschau. Falls es noch immer aussieht wie vorher, dann macht den Schritt mit STRG+Z rückgängig und sucht den gleichen Code an einer anderen Stelle und ersetzt diese. Danach drückt ihr wieder auf Vorschau. Macht das so oft, bis sich die Änderung in der Vorschau erkennbar ist. Dann könnt ihr speichern.


9. Und jetzt wird das alles noch angepasst!

thumbnail_mode - "yes" = mit Vorschaubild // "no" = ohne Vorschaubild

summary_img - Die Zahl bestimmt die Anzahl der Zeichen im Vorschau mit Bild.

summary_noimg - Diese Zahl bestimmt, wie viele Zeichen angezeigt werden, wenn du kein Bild im Post hast.

img_thumb_height & img_thumb_width - Bestimmt die Höhe und Breite des Bildes in Pixel. (Die ersten Bilder eures Posts müssen die gleichen Seitenverhältnisse haben, sonst werden die Bilder gezehrt. ZB. unser Snippet hat 282x212px, was das Verhältnis 4:3 entspricht.)

Read more änderst du, indem du im zweiten Code das "Read more ..." änderst.

Und das war's schon, ich wünsche viel Spaß damit!