[BLOGGER] Magazine Look (without JS) ✤✤✤

Vor einer Weile habe ich ein Tutorial geschrieben, wie man den Magazine Look auf der Startseite mithilfe eines JavaScripts erreicht. hier
Oliver hat mich dann darauf hingewiesen, dass das ganze auch ohne JavaScript klappt und bereits eine Version davon in einem seiner Tutorials erklärt (hier).
Heute möchte ich euch meine Version davon vorstellen.

A whil ago I wrote a tutorial about a magazine look, using JavaScript (here)
Oliver has told me you can achive this look without JS and wrote a tutorial about it(here).
Today I want to show you my take on it.



Okay, als erstes müssen wir wie immer ins HTML

First of all, change to the editor.



Dort suchen wir nach:

Then search for:

<b:includable id='post' var='post'>

Was wir eigentlich machen, ist unsere gesamte Post-Optik neu zu schreiben. Wir ersetzen nämlich den gesamten Eintrag, also bis zum schliessenden includable.

What we actually do is rewrite the whole look of our post. We're gonna replace the whole includeable.



Und zwar durch einen der beiden Codes.
Einmal habe ich das ganze mit einem Bild und einmal ohne.

Ihr ersetzt also den Code und dann speichert ihr.
Und das war's schon. :D

With one of the following codes, actually.
One is with an image preview, the secont without.

So take one of them, replace the includeable and save.

Magazine With Image Preview

<b:includable id='post' var='post'>
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
 <div class='hero-unit'>
  <h3 class='post-title'>
   <a expr:href='data:post.url'><data:post.title/></a>
  </h3>
 
  <div class='post-preview'>
   <img class='thumbpic pull-left' expr:src='data:post.firstImageUrl'/> <!-- first image of post is thumbnail -->
   <!-- if there ist jumplink show that part, otherwise show snippet -->
   <b:if cond='data:post.hasJumpLink'>
    <span><data:post.body/></span>
   <b:else/> 
    <span><data:post.snippet/></span> 
   </b:if> <!-- /if jumplink -->
   <br/>
   <a class='readmore pull-right' expr:href='data:post.url'>Read More</a> <!-- Read More Link. Style with .readmore -->
   <div style='clear: both;'/> <!-- clearfix -->
  </div> <!-- /post-preview -->
 </div> <!-- /hero-unit -->
 <!-- Preview CSS -->
 <style> 
  .thumbpic{
   width: 33%;
   margin-left: -5px;
   left: 0;
   position: absolute;
   top: 10px;
   padding-top: 10px;
  }
 
  .post-preview{
   padding: 0 0 0 34%; /* width of thumbnail + space between it and text */
   position: relative; 
   margin-top: -10px;
  }
  
  .hero-unit{
   margin-bottom: 30px; 
  }
 </style> 
 <b:else/> 
 <!-- POST PAGE STYLE -->
  <style>
   .post-title-page{
    text-align: center;
    font-size: 30px;
   }
 
   <!-- remove sidebar, stretch page width -->
   .main-inner .columns {
    padding-left: 0px !important;
    padding-right: 0px !important;
   }
 
   .main-inner .fauxcolumn-center-outer {
    left: 0px !important;
    right: 0px !important;
   }
  
   .main-inner .fauxcolumn-left-outer, 
   .main-inner .fauxcolumn-right-outer, 
   .main-inner .column-left-outer, 
   .main-inner .column-right-outer {
    display: none !important;
   }
  </style>
  
  <h3 class='post-title-page'>
   <a expr:href='data:post.url'><data:post.title/></a>
  </h3>
  <span><data:post.body/></span>

  <!-- edit link for Quick Editing -->
  <b:if cond='data:post.editUrl'>
   <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
    <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg' style='color: red;'>
     <span>edit</span> <!-- quick edit link -->
    </a>
   </span>
  </b:if> <!-- / edit link -->  
 </b:if>
</b:includable>

Magazine Without Image Preview

<b:includable id='post' var='post'>
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
 <div class='hero-unit'>
  <h3 class='post-title'>
   <a expr:href='data:post.url'><data:post.title/></a>
  </h3>
  <!-- if there ist jumplink show that part, otherwise show snippet -->
  <b:if cond='data:post.hasJumpLink'>
   <span><data:post.body/></span>
  <b:else/> 
   <span><data:post.snippet/></span> 
  </b:if> <!-- /if jumplink -->
  <br/>
  <a class='readmore pull-right' expr:href='data:post.url'>Read More</a> <!-- Read More Link. Style with .readmore -->
 </div> <!-- /hero-unit -->
 <!-- Preview CSS -->
 <style>  
  .hero-unit{
   margin-bottom: 30px;
  }
 </style>
 <b:else/> 
 <!-- POST PAGE STYLE -->
  <style>
   .post-title-page{
    text-align: center;
    font-size: 30px;
   }
 
   <!-- remove sidebar, stretch page width -->
   .main-inner .columns {
    padding-left: 0px !important;
    padding-right: 0px !important;
   }
 
   .main-inner .fauxcolumn-center-outer {
    left: 0px !important;
    right: 0px !important;
   }
  
   .main-inner .fauxcolumn-left-outer, 
   .main-inner .fauxcolumn-right-outer, 
   .main-inner .column-left-outer, 
   .main-inner .column-right-outer {
    display: none !important;
   }
  </style>
  
  <h3 class='post-title-page'>
   <a expr:href='data:post.url'><data:post.title/></a>
  </h3>
  <span><data:post.body/></span>

  <!-- edit link for Quick Editing -->
  <b:if cond='data:post.editUrl'>
   <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
    <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg' style='color: red;'>
     <span>edit</span> <!-- quick edit link -->
    </a>
   </span>
  </b:if> <!-- / edit link -->  
 </b:if>
</b:includable>

Der Code ist so angelegt, dass das erste Bild des Posts als Thumbnail verwendet wird. Der Text, den wir sehen können, legen wir entweder durch einen JumpLink fest, oder Blogger fügt ein Snippet ein. Leider lässt sich die Länge des Snippets nichts bearbeiten und es ist relativ kurz. Aber für alle die wie ich gerne JumpLinks setzen, ist die Möglichkeit klasse. :) Und schneller laden als mit JavaScript tut die Seite dann auch noch.

The code is written to take the first image in the post as a thumbnail. The text you can see is ended by either a jumplink or by blogger, because it takes a snippet of your post, this snippet is very short though and unfortunately its length can't be edited. But for everyone who loves jumplinks just as much as I do, I think this possibility is great. It actually loads faster too.

More 'bout that

0. Current
1. Looks Kinda Pinterest
2. Column Style
3. Image Thumbs