[BLOGGER] Magazine Look for Starting Page ✤✤✤

Ich lebe noch! Meine Lehrer scheinen echt lieb zu sein, denn genauso wie Geschichte gestern war auch Mathe noch halbwegs okay, und das obwohl ich kaum ein Auge zugemacht hab, weil ich das Gefühl hatte, nichts mehr zu können. Aber Vektoren und Hypothesentests mit Analysis sind eine ganz schleckte Kombi und keine 4 Stunden, die man sich gerne aussucht...
Wie auch immer. Heute geht es um den Magazine-Look, den ich im letzten Template integriert hatte und auch auf meinem Schatzi hier drin hab. Dieses Script lädt auf der Startseite ein Preview des Postes (wenn ein Bild vorhanden, kommt das auch rein), was die Ladegeschwindigkeit verschnellert und es viel einfacher macht, einfach mal durch die Seite zu scrollen, um selbst auszusuchen, welche Posts man lesen möchte. Das Tutorial wurde auch schon auf CPL gemacht, weswegen ich es bisher nicht geschrieben habe, aber da es gewünscht wurde, mach ich's trotzdem und ausserdem werden bei der CPL-Version die Bilder verzerrt, weil man sie in eine bestimmte Form zwängt.

Okay, als erstes gehen wir ins HTML.

I'm still alive! My teachers really seem to be nice, because - just as history yesterday - math has been okay, and that even though I hadn't slept all night, because I felt like I was able of nothing. But Vectory hypothesistest and analysis are a very bad combination and 4 hours spent with them really are not enjoyable....
However, today it's about the magazine-look, which I included in my last template and also am currently using on my template here. This script only loads part of your post and a preview image, if there are any in your posts, which really helps loading your page faster and makes it easier to just scroll through the post, if you fell like reading you just click on more. This Tutorial has already been made once on CopyPasteLove, which is why I intended not to write one myself. But I was asked so I do write one and I also have made some adjustments because in the CPL-Version the pictures look ugly, because you are forcing them into a fixed ratio.

Okay, first open up your HTML


Dort suchen wir nach

Search for:

</head>

Und darunter kommt dann unser Script rein.

Underneath copy-paste this script.

<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes -with thumbnail, no -no thumbnail
summary_noimg = 630; //summary length when no image
summary_img = 540; //summary length when with image
img_thumb_height = 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+'" 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 -->

Dazu hab ich noch ein paar Worte zu verlieren ^^
Okay, ich hab das Script so verändert, dass die PreviewBilder nicht in eine feste Form gequetscht werden, also gibt's bei mir nur noch eine Höhe, ihr könntet auch nur eine Breite angeben. Das bedeutet, dass das Preview proportional verkleinert wird.
Ihr könnt die PreviewBilder aber auch komplett ausschalten, ändert einfach an der betreffenden Stelle von "yes" auf "no".

Just a few words about this script.
As already told, I changed the script to only have a fixed height, you could also add a width, but I don't want my pics to be stretched of crumpled together. ^^ You can change the height just by changing the number, it's in pixels, but don't write them in.
You could as well just remove all the previews. Just change the coressponding "yes" to a "no".



Okay, Script ist drin, jetzt muss das noch eingefügt werden.
Dafür sucht ihr folgende Zeile:

Okay, Script's done. Now how to actually apply it to the blog.
Search for the following line:
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>

Unterhalb dieser Zeile werdet ihr folgendes finden:

Underneath you'll find this snipped:
<data:post.body/>



Und das ersetzt ihr dann durch den folgenden Code.

which you are gonna replace by:

<!-- 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'>Mehr &#187;</a>
</b:if>
</b:if>
<!-- Auto read more End -->

Speichern und ihr seid fertig.

Save and you're done!

Wechsel von bestimmter Höhe auf bestimmte Breite / Switch from fixed height to fixed width

Vielleicht wollt ihr lieber eine fixe Breite, als eine fixe Höher? das geht folgendermassen:

Sucht folgende zwei Zeilen und ersetzt jeweils height durch width folgendermassen.

Vorher:

Maybe you'd rather have a fixed with than height. No prob. Just follow these steps.

There are two lines in which you have to change height into width and you're good to go.

Before:

img_thumb_height = 200;

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" height="'+img_thumb_height+'px" /></span>';

Nachher:
After

img_thumb_width = 200;

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

Und das war's!

And that's it!