Posts mit dem Label Weiterlesen-Funktion werden angezeigt. Alle Posts anzeigen
Posts mit dem Label Weiterlesen-Funktion werden angezeigt. Alle Posts anzeigen

Automatisches "Read More"



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 -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //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 -->
Die markierten Zeilen könnt ihr im Nachhinein ändern. In der Erklärung steht, was diese Werte machen.

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 == &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'>Weiterlesen &#187;</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!

Ähnliche Posts


Weiterlesen »

Individuelle Jump Break Links einfügen ♥♥


Ahoi, mein Name ist Johanna und auf meinem Kunstblog Art Armada findet ihr viele geniale Arbeiten von jungen kreativen Köpfen, die mich inspiriert und zum Staunen gebracht haben. Da mein Blog dementsprechend viele Bilder enthält, hatte ich bei manchen Posts das Problem, dass der klassische Jump Break Link mit einem langweiligen „Weiterlesen“ nach dem Posteintrag einfach untergegangen ist.  
Weiterlesen »

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?

Weiterlesen »

Weiterlesen im Post

Unser zweites Tutorial zeigt euch, wie man im Post einen Weiterlesen-Link einfügt. Das hat den Vorteil, dass der ganze Post nicht gleich gezeigt wird und man Platz spart. :)


Weiterlesen »
 
Lass dir dein Blogdesign von mir gestalten!